:root {
  --colour-bg: rgb(231 239 199 / 1);
  /* --colour-primary: rgb(174 200 164 / 1); */
  --colour-primary: rgb(255 155 69 / 1);
  --colour-secondary: rgb(138 120 78 / 1);
  --colour-tertiary: rgb(60 60 25 / 1);
  --colour-bg-dark: rgb(48 48 25 / 1);


  --colour-alt-primary: rgb(10 186 181 / 1);
  --colour-alt-secondary: rgb(86 223 207 / 1);
  --colour-alt-tertiary: rgb(173 238 217 / 1);
}


header{
  text-align: center;
  background-color: var(--colour-tertiary);
  padding: 0.482rem 0;
}

header h1{
  
  width: 100%;
  font-size: clamp(1.44rem, 5vw, 4.3rem);
  color: var(--colour-primary);
  word-break: break-all;
  line-break: anywhere;
}
main{
  min-height: 90vh;
}

nav, footer{
  background-color: var(--colour-bg);
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

nav article, footer article{
  display: inline-block;
  font-size: clamp(1.44rem, 5.16vw, 4.3rem);
  word-break: break-all;
  line-break: anywhere;
}

.navy article:nth-of-type(3n+1) a{
  color: var(--colour-primary);
}
.navy article:nth-of-type(3n+2) a{
  color: var(--colour-secondary);
}

.navy article:nth-of-type(3n+3) a{
  color: var(--colour-tertiary);
}

.navy article a:hover{
  color: var(--colour-bg-dark);
  transform: scale(1.5);
}


#classes{
  display: grid;
  grid-auto-flow: row;
  width: 100%;
  background-color: var(--colour-bg-dark);
  padding: 0;
}

#classes article{
  font-size: clamp(1rem, 2.986vw, 3.583rem);
  text-align: center;
}


#classes article:nth-of-type(3n+1) a{
  color: var(--colour-alt-primary);
}
#classes article:nth-of-type(3n+2) a{
  color: var(--colour-alt-secondary);
}

#classes article:nth-of-type(3n+3) a{
  color: var(--colour-alt-tertiary);
}

main article{
  padding: 1.44rem;
}

@media screen and (min-width: 620px) {
  #classes{
    display: grid;
    grid-auto-flow: column;
    padding: 0.482rem;
    
  }
  
}