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

@font-face {
    font-family: 'rainbow';
    src: url('fonts/DrawingRainbow.otf') format('truetype');
}

@font-face {
    font-family: 'pgrass';
    src: url('fonts/PineappleGrass.ttf') format('truetype');
}

@font-face {
    font-family: 'vivid';
    src: url('fonts/VividlyRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'play';
    src: url('fonts/LetsPlay.ttf') format('truetype');
}

.web {
    display: block;
}

.mob {
    display: none;
}

/* H[EADER] STUFF*/
h1,
h2,
h3,
h4 {
    margin: 5px 0px 15px 0px;
    font-size: xx-large;
    font-family: 'pgrass', sans-serif;
}

p {
    margin-bottom: 5px;
    font-size: larger;
    font-family: 'rainbow', sans-serif;
}

/* DIFFERENT PARTS [BODY etc.]*/
body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    box-sizing: border-box;
    background: #1a112e;
}

header {
    text-align: center;
}

footer {
    height: 10vh;
    padding-top: 3vh;
    text-align: center;
    font-size: large;
    color: #f0d8f7;
    font-family: 'pgrass', sans-serif;
}

main ul li {
    list-style-type: none;
    margin: 0% 5% 2% 0%;
    font-size: larger;
    font-family: 'rainbow', sans-serif;
}

.topSection {
    grid-row: 1;
}

div.empty {
    padding: 0.5rem;
    background: #1a112e;
}

div.middle {
    padding: 1rem;
    background: #3b2a4f;
    font-size: large;
    text-align: center;
    padding-top: 1%;
    color: #1a112e;
}

/* FORM STUFF */
fieldset {
    margin: 1% 8% 1% 8%;
    border: solid #f9c2dd;
}

input {
    margin-left: 20px;
    margin: 1% 0 1% 0;
}

/* NAV STUFF */
nav ul {
    padding-left: 24%;
}

nav ul li {
    display: inline;
    padding-left: 1.5vw;
}

/* GRID STUFFS */
.grid1 {
    padding: 4rem;
    background-image: url(images/bg.jpg);
    background-size: cover;
    color: #2e325b;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.animGrid {
    font-size: large;
    grid-column: 4/7;
    text-align: left;
}

.grid2 {
    margin: 0% 0% 0% 7.5%;
    background: #1a112e;
}

.maingrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
}

.gridbanner {
    grid-column: 1/5;
    grid-row: 1;
    background-color: #D8BEE5;
}

.gridsecondbanner {
    grid-column: 1/5;
    grid-row: 1;
    background-color: #5c2576;
    color: #e6cbf3;
}

.gridarticle1 {
    grid-column: 2/4;
    grid-row: 1;
    color: rgb(92, 80, 161);
    padding-bottom: 5px;
}

.gridarticle2 {
    grid-column: 1/3;
    grid-row: 2;
}

.gridarticle3 {
    grid-column: 3/5;
    grid-row: 2;
}

.gridquizsec1,
.gridmini1 {
    grid-column: 2/4;
    grid-row: 1;
    padding-top: 6px;
    font-size: large;
}

.gridquizsec2,
.gridmini2 {
    grid-column: 1/5;
    grid-row: 2;
    font-size: larger;
    font-family: 'play', sans-serif;
}

/* PAGES/BUTTONS STUFF */
.page {
    width: auto;
    height: 950px;
    margin: 0 auto;
    transition: all 0.5s;
    text-align: center;
    background-color: #E8DAF0;
    color: #7a70a7;
}

.mini {
    width: 70vw;
    height: auto;
    margin-left: 15vw;
    margin-bottom: 10px;
    transition: all 0.5s;
    /* to make the transition go from center to sides */
    transform-origin: center;
    text-align: center;
    background-color: #a34874;
    color: #f9c2dd;
    border: solid #f9c2dd;
    /* curve the sides*/
    border-radius: 10px;
    /* make thinner */
    border-width: 1.5px;
    overflow: hidden;
}

.becomebox {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-left: 3%;
}

button {
    border-color: #2e325b;
    border-radius: 10px;
    border-width: 1.5px;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: larger;
    font-family: 'vivid', sans-serif;
}

button.btn1,
button.btn2,
button.btn3,
button.btn4 {
    height: 100px;
    width: 100px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

button.btn1:hover,
button.btn2:hover,
button.btn3:hover,
button.btn4:hover {
    height: 110px;
    width: 110px;
}

/* PAGE 1 BUTTON */
button.btn1 {
    border-color: #6aae7a;
    background-color: #d6f3dd;
    color: #96caa2;
}

button.btn1:hover {
    border-color: #dff2e4;
    background-color: #96caa2;
    color: #d6f3dd;
}

/* PAGE 2 BUTTON */
button.btn2 {
    border-color: #4b7da4;
    background-color: #dcf3f6;
    color: #7fa7c6;
}

button.btn2:hover {
    border-color: #d8e7f2;
    background-color: #7fa7c6;
    color: #dcf3f6;
}

/* PAGE 3 BUTTON */
button.btn3 {
    border-color: #9a4457;
    background-color: #fec8d8;
    color: #b05b6e;
}

button.btn3:hover {
    border-color: #e7ccd2;
    background-color: #b05b6e;
    color: #fec8d8;
}

/* PAGE 4 BUTTON */
button.btn4 {
    border-color: #c47466;
    background-color: #ffdfd4;
    color: #db9f94;
}

button.btn4:hover {
    border-color: #f4e4e1;
    background-color: #db9f94;
    color: #ffdfd4;
}

/* OTHER BUTTONS */
button.thebtn {
    color: #3D145B;
    background: #f9b7ff;
}

button.thebtn:hover,
button.thequizbtn:hover,
button.minigamebtn:hover {
    color: #f9b7ff;
    background: #3D145B;
}

button.forgamebtn {
    color: #c06c4a;
    background: #ffe0ba;
    border-color: #c06c4a;
}

button.thequizbtn,
button.minigamebtn {
    margin-top: 10px;
    margin-left: 10%;
    color: #3D145B;
    background: #f9b7ff;
}

.gamebuttons {
    display: inline;
    margin-left: 30%;
}

/* IMAGES */
.imgC {
    grid-row: 1;
    width: 200%;
}

.smallqr {
    width: 100px;
    display: block;
    /* auto left and right, top 10px*/
    margin: 10px auto 0;
}

.texttotop {
    color: #f9b7ff;
}

/*CSS for responsive menu*/
#hamIcon {
    display: none;
    width: 25px;
}

@media screen and (max-width:800px) {
    .web {
        display: none;
    }

    .mob {
        display: block;
    }

    h1,
    h2,
    h3,
    h4 {
        font-size: large;
    }

    nav ul li {
        display: block;
    }

    /* unhide menu icon */
    #hamIcon {
        display: block;
    }

    /*hide the menu item list*/
    nav ul {
        display: none;
    }

    button.btn1,
    button.btn2,
    button.btn3,
    button.btn4 {
        height: 40px;
        width: 150px;
    }

    button.btn1:hover,
    button.btn2:hover,
    button.btn3:hover,
    button.btn4:hover {
        height: 50px;
        width: 160px;
    }

    button.thequizbtn {
        margin-left: 10rem;
    }

    .gamebuttons {
        margin: 0% 0% 0% 0%;
    }

    .grid1 {
        grid-template-rows: 1fr 1fr;
    }

    .animGrid {
        grid-column: 1/7;
        grid-row: 2;
        text-align: center;
    }

    .imgC {
        grid-column: 1/3;
        grid-row: 1;
        width: 50px;
    }

    footer {
        font-size: small;
    }

    div.middle {
        font-size: medium;
    }

    .maingrid {
        font-size: x-small;
    }

    .gridbanner {
        grid-column: 1/5;
        grid-row: 1;
    }

    .gridarticle1 {
        grid-column: 1/5;
        grid-row: 1;
        text-align: center;
    }

    .gridarticle2 {
        grid-column: 1/5;
        grid-row: 2;
    }

    .gridarticle3 {
        grid-column: 1/5;
        grid-row: 3;
    }

    .page {
        height: 950px;
    }

    .mini {
        width: 90vw;
        height: auto;
        margin-bottom: 5%;
        margin: 0 auto 5% auto;
    }

    .imgC {
        width: 250%;
        margin-bottom: 5%;
    }

    .gridquizsec1,
    .gridmini1 {
        grid-column: 1/5;
        font-size: medium;
    }

    .smallqr {
        display: none;
    }
}


/*to unhide menu items*/
.menuShow {
    display: block;
}

/* TRANSITION */

.shrink {
    height: 1vh;
    opacity: 0;
}

.shrinkW {
    transform: scaleX(0);
    opacity: 0;
}