body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}

/* START MENU  */

header {
    position: absolute;
    z-index: 9;
    top: -100%;

    height: 100dvh;
    margin: 0px;
    background-color: rgb(36, 36, 36);
    transition: transform 0.4s ease-out;
}

/*richt van waar het menu vandaan komt*/
header.is-active {
    transform: translateY(100%);
}

/* <ul> */
.menu-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 97vh;
    gap: 2em;
    justify-items: center;
    padding: 0 4rem;
}

.menu li {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    width: 100%;
    grid-column: 1;
}

/*hovers over li*/
.home:hover {
    border: .5px solid white;
    filter: brightness(120%);
}

.testing:hover {
    border: .5px solid white;
    filter: brightness(120%);
}

.statistics:hover {
    border: .5px solid white;
    filter: brightness(120%);
}

.lessons-nav:hover {
    border: .5px solid white;
    filter: brightness(120%);
}

.profile:hover {
    border: .5px solid white;
    filter: brightness(120%);
}

/*menu kopjes*/
.menu a {
    display: block;
    margin-bottom: 0;
    width: 5em;
    height: 5em;
}

.menu .home {
    background-color: #3f92b6;
}

.menu .testing {
    background-color: #599ae7;
    grid-column: 2;
}

.menu .statistics {
    background-color: #06a192;
    grid-column: 2;
}

.menu .profile {
    background-color: #fd8c73;
}

.menu .lessons-nav {
    background-color: rgb(134, 97, 169);
}

/*tekst in li menu*/
.kopje {
    display: flex;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: rgb(255, 255, 255);
    font-weight: normal;
    margin-top: .4em;
}

/*plaatsing hamburger button en geen grijze ruimte boven home*/
.menu-trigger {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 10;
    padding: 0;
    border: 0;
    background: none;
}

/*kruisje onder hamburger button*/
.menu-trigger .open {
    display: none;
}

/*alle img in de section*/
header svg {
    width: 30px;
    height: 30px;
    margin-top: .3em;
    padding-top: .2em;
}

/*svg plaatsing*/
.svg-home {
    margin-left: 1.5em;
    margin-bottom: .2em;
}

.svg-testing {
    margin-left: 1.5em;
    margin-bottom: .2em;
}

.svg-lessons-nav {
    margin-left: 1.5em;
    margin-bottom: .2em;
}

.svg-statistics {
    margin-left: 1.5em;
    margin-bottom: .2em;
}

.svg-profile {
    margin-left: 1.5em;
    margin-bottom: .2em;
}


/*tekst in menu*/
a {
    margin-bottom: -.4em;
    text-decoration: none;
}

/* EINDE MENU */



/*START HOME*/

/*achtergrond*/
main {
    background-color: #3f92b6;
    background-image: url(../assets/house-mouse.svg);
    height: 100vh;
    background-size: cover;
    line-height: 1.5;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 2em;
    padding: 0;
}


/*tekstballon*/
.wolkje {
    background-color: rgb(255, 255, 255);
    padding: 1.5em;
    height: 8.5em;
    margin-left: 1.5em;
    position: relative;

    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 80%, 55% 100%, 31% 80%, 0 80%);

    width: 205px;
}


/*wolkje verdwijnt als je op het kruisje klikt*/
.hide {
    opacity: 0;
}


/*kruisje in de tekstballon*/
.kruisje {
    background-color: rgb(255, 255, 255);
    position: absolute;
    right: 1em;
    top: 1em;
}


/*button let's do it in de tekstballon*/
.lessons {
    background-color: rgb(134, 97, 169);
    color: rgb(255, 255, 255);
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 16px;
    text-decoration: none;
    padding: .5em;
    border-radius: 5px;
    margin-left: 3em;
}


.lessons:hover {
    background-color: #6d3a91;

}


/*button kruisje*/
button {
    border: none;
}


/*muis*/
.muis {
    row-gap: 3em;
}


/*tekst in tekstballon*/
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    padding: .2em;
    font-weight: bold;
}

/*tekst in wolkje*/
span {
    display: block;
}


/*muis en wolkje samen*/
.info {
    width: 330px;
    margin: 0 auto;
    grid-row: 2;
    align-self: end;
    margin-top: -3em;
}


/*wat om de hamburger menu zit*/
.streepje {
    background-color: rgb(36, 36, 36);
    border-radius: 50%;
    width: 4.5em;
    height: 4.5em;
}

/*wolkje na 12 uur 's nachts*/
.moved-down {
    transform: translateY(-.8em);
    /* Pas de waarde aan voor meer of minder verschuiving */
    transition: transform 0.5s ease;
    /* Voegt een animatie toe voor de beweging */
}

/*extra tekst die na 12 uur 's nachts komt*/
.goodnight-message {
    display: none;
    /* Standaard verbergen */
    margin-top: -1.5em;
    /* Optionele marge */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
}

/*tekst tomorrow na 12 uur 's nachts*/
.purple {
    color: rgb(134, 97, 169);
    /* Stel de kleur in op paars */
    font-size: 17px;
}

/*EINDE HOME*/





/*hamburger menu*/
/* li {
    list-style-type: none;
    margin-right: 1em;
    margin-bottom: -1em;
} */


/*hamburger menu plaatsing*/
/* .menu {
    grid-row: 3;
    justify-self: end;
    align-self: end;
    margin-right: 1em;
    margin-bottom: 1em;
}   */