:root{
    --geo: "afacad";
    --hand: "annie use your telescope";
    --blue: deepskyblue;
    --dark: darkslategrey;
    --light: aliceblue;
}

* {
    box-sizing: border-box;
}

html{
    font-size: 10px;
    overflow-x: hidden;
}
body{
    font-size: 1.6rem;
    margin: 0;
    background-color: var(--light);
    color: var(--dark);
}
/* ---overall style--- */
header{
    width: 100vw;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    position: fixed;
    top: 0;
    background-color: var(--blue);
    color: var(--light);
    border-radius: 0 0 4vw 4vw;
    border-bottom: 3vw solid dodgerblue;
}

#highlight{
    height: 20px;
    width: 80vw;
    left: 10vw;
    background-color: lightskyblue;
    position: absolute;
    border-radius: 10px;
}

h1{
    display: inline-block;
    margin-bottom: 3vw;
}

h1, h3{
    font-family: var(--hand);
    letter-spacing: 0.1em;
}
h2{
    font-family: var(--geo);
}

hr{
    border: 1px solid var(--light);
}

main{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
    row-gap: 0;
    padding: 5px;
}

.firstEl{
    margin-top: 200px;
}

#home{
    min-height: 10px;
    text-align: center;
}

/* homepage specific */
.lesson, img{
    height: 41vw;
    z-index: -1;
}
.lesson{
    padding-left: 10px;
    padding-right: 10px;
    background-color: bisque;
    border-top: cornsilk solid 3vw;
    border-bottom: burlywood solid 3vw;
}
.img{
    text-align: center;
    font-size: 25vw;
    line-height: 35vw;
    border: solid 3vw;
    border-radius: 4vw;
    background-color: cornsilk;
    font-family: "afacad";
}

#lesson1, #lesson3{
    grid-column-start: 7;
    grid-column-end: 10;
    border-radius: 0 4vw 4vw 0;
    margin-left: -5vw;
    text-align: right;
    z-index: -2;
}

#learn, #lesson2, #lesson4{
    grid-column-start: 4;
    grid-column-end: 7;
    border-radius: 4vw 0 0 4vw;
    margin-right: -5vw;
}

#img1, #img3{
    grid-column-start: 2;
    grid-column-end: 7;
}

#imgL, #img2, #img4{
    grid-column-start: 7;
    grid-column-end: 12;
}

.hidden{
    grid-column-start: 2;
    grid-column-end: 12;
    height: 41vw;
    margin-bottom: -41vw;
}

/* alphabet specific */
.letter{
    grid-column: span 2;
    height: 16vw;
    background-color: cornsilk;
    font-family: var(--geo);
    font-size: 14vw;
    line-height: 10vw;
    border: 1.5vw solid;
    border-radius: 1vw;
    margin-bottom: 5px;
}

#spacer{
    grid-column: span 4;
}

/* lesson specific */
#progressBar{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 75vw;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4vw;
    overflow: hidden;
    height: 20px;
}

.fill{
    background-color: lawngreen;
    border-bottom: 1vw solid mediumseagreen;
}

.question{
    grid-column: span 12;
}

.answer{
    grid-column: span 3;
    border: solid 2vw;
    background-color: cornsilk;
    font-family: var(--geo);
    height: 25vw;
    font-size: 15vw;
    line-height: 20vw;
    border-radius: 1vw;
}

.word{
    font-size: 8vw;
}

.button{
    background-color: var(--blue);
    color: var(--light);
    border-radius: 10vw;
    padding: 5vw;
    font-family: var(--hand);
    font-size: 10vw;
    border-bottom: 3vw solid dodgerblue;
    text-decoration: none;
}

#back{
    position: absolute;
    bottom: 2vw;
    right: 15px;
}

#next{
    grid-column: span 12;
    width: fit-content;
    margin-left: 36.5vw;
}

/* colours to randomly generate */
.red{
    border-color: firebrick;
    color: firebrick;
}
.blue{
    border-color: mediumblue;
    color: mediumblue;
}
.yellow{
    border-color: gold;
    color: gold;
}
.green{
    border-color: forestgreen;
    color: forestgreen;
}
.orange{
    border-color: orangered;
    color: orangered;
}