*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: rgb(6, 8, 37);
  color: wheat;
}


.main-container{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;

  @media (max-width: 440px) {
    flex-direction: column;
    justify-content: center;
  }

  .input-container{
    border: 1px solid white;
    height: 100%;
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;

    @media (max-width: 440px) {
      width: 100%;
      padding: .6rem;
    }

    h2{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 2rem;
      letter-spacing: .1rem;
      font-weight: 800;
      @media (max-width: 440px) {
        font-size: 1.6rem;
      }
    }

    textarea{
      width: 100%;
      height: 80%;
      background-color: transparent;
      border: none;
      outline: none;
      color: wheat;
      font-size: 1.2rem;
      font-family: sans-serif;
      letter-spacing: .1rem;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: 400;
      padding-right: 1rem;
      padding-left: 1rem;
    }
    
    button{
      width: 40%;
      height: 3rem;
      cursor: pointer;
      background-color: rgb(255, 123, 0);
      font-weight: bold;
      letter-spacing: .1rem;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: white;
      border-radius: .6rem;
      font-size: 1.2rem;
      border: none;
      outline: none;
      transition: all ease-in-out 3ms;

      @media (max-width: 440px) {
              font-size: 1rem;
              font-weight: 800;
      }

      &:hover{
        border: .1rem solid wheat;
        background-color: rgb(253, 145, 43);
      }

      &:active{
        scale: .9;
      }
    }
  }

  .summary-container{
    border: 1px solid white;
    height: 100%;
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;

    @media (max-width: 440px) {
      width: 100%;
      padding: .6rem;
    }

    h2{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 2rem;
      letter-spacing: .1rem;
      font-weight: 800;
      @media (max-width: 440px) {
        font-size: 1.6rem;
      }
    }

    .result-container{
      width: 100%;
      height: 80%;
      padding: 1rem;

      p{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        scrollbar-width: thin;
        font-size: 1.2rem;
        font-family: sans-serif;
        letter-spacing: .1rem;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 400;
        color: wheat;
      }
    }
  }
}