:root {
  --color-main: #7d32c8;
  --color-grey: #a0a0a0; 
  --color-yellow: #c8be23;
  --color-green: #5fa50f;
  --color-text: #3f3c42;
  --color-background: #fefaff;
}

* {
  font-family: "Arial", sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  color: var(--color-text);
}

button {
  color: var(--color-text);
  background-color: transparent;
  border: 0;
}

body {
  background-color: var(--color-background);
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  
  text-align: center;
  
  > header {
    border-block-end: 2px solid var(--color-main);
    display: flex;
    
    > * {
      font-size: 2rem;
      line-height: 2.5rem;
    }
    
    > h1 {
      flex: 1 1 0;
      order: 2;
    }
    
    button#menuBtn {
      order: 1;
    }
    
    button#infoBtn {
      order: 3;
    }
  }
  
  > main {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    
    > div#scroll {
      overflow: scroll;
      flex: 1 1 0;
      position: relative;
      
      > h2#mode {
        font-size: 1.5rem;
        line-height: 2rem;
      }
    
      > div#guesses {
        inline-size: 250px;
        padding: 5px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 5px;
        
        > div {
          aspect-ratio: 1 / 1;
          container-type: size; 
          
          &.none {
            border: 1.5px solid var(--color-grey);
          }
          
          &.green { background-color: var(--color-green); }
          &.yellow { background-color: var(--color-yellow); }
          &.grey { background-color: var(--color-grey); }
          
          > p {
            font-size: 80cqb;
            line-height: 100cqb;
          }
        }
      }
      
      > div#gameOver {
        background-color: var(--color-background);
        inline-size: 250px;
        padding: 0.75rem;
        border: 1.5px solid var(--color-main);
        border-radius: 1rem;
        margin-inline: auto;
        position: absolute;
        inset-inline: 0;
        inset-block-start: 30px;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        transition: all 0.5s allow-discrete;
        
        &.hidden {
          opacity: 0;
          transform: translateY(50px);
          display: none;
        }
        
        @starting-style {
          opacity: 0;
          transform: translateY(50px);
        }
        
        > h2 {
          font-size: 1.5rem;
        }
        
        > button {
          font-size: 1rem;
          line-height: 2rem;
          border: 1.5px solid var(--color-main);
          border-radius: 1rem;
        }
        
        > div#streaks {
          display: flex;
          gap: inherit;
          
          > div {
            padding: 0.5rem;
            border: 1.5px solid var(--color-main);
            border-radius: 1rem;
            flex: 1 1 0;
            
            > h3 {
              font-size: 1rem;
            }
            
            > p {
              font-size: 3rem;
            }
          }
        }
      }
      
      > div#alert {
        font-size: 1.5rem;
        line-height: 2.5rem;
        background-color: var(--color-background);
        width: fit-content;
        padding-inline: 1.25rem;
        border: 1.5px solid var(--color-main);
        border-radius: 1.25rem;
        margin-inline: auto;
        position: absolute;
        inset-block-start: 50px;
        inset-inline: 0;
        transition: all 0.4s allow-discrete;
        
        &.hidden {
          opacity: 0;
          display: none;
        }
        
        @starting-style {
          opacity: 0;
        }
      }
    }
    
    > div#keyboard {
      padding: 5px;
      border-block-start: 2px solid var(--color-main);
      display: grid;
      gap: 0.25rem;
      
      > button {
        font-size: 1rem;
        line-height: 2rem;
        border-radius: 1rem;
        touch-action: manipulation;
        
        &#delete {
          grid-row-end: -1;
          grid-column-end: -1;
        }
        
        &#enter {
          grid-row-end: -1;
          grid-column-start: 1;
        }
        
        &.none {
          border: 1.5px solid var(--color-grey);
        }
        
        &.green { background-color: var(--color-green); }
        &.yellow { background-color: var(--color-yellow); }
        &.grey { background-color: var(--color-grey); }
      }
    }
    
    > aside#info {
      text-align: start;
      background-color: var(--color-background);
      overflow: scroll;
      padding-inline: 20px;
      position: absolute;
      inset: 0;
      
      &.hidden {
        display: none;
      }
      
      h2 {
        text-align: center;
        border-block-end: 1.5px solid var(--color-main);
        margin-block: 1rem 0.5rem;
      }
      
      h3 {
        margin-block: 0.5rem 0.25rem;
      }
    }
  }
}

@media (orientation: portrait) {
  div#keyboard {
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(3,auto);
  }
}

@media (orientation: landscape) {
  div#keyboard {
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(2,auto);
  }
}