@font-face {
    font-family: "lieberuth";
    src: url("https://use.typekit.net/af/bd67ba/00000000000000007735b77a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/bd67ba/00000000000000007735b77a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/bd67ba/00000000000000007735b77a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}

nav {
    font-family: "lieberuth", sans-serif;
    background-color: #fdca47;
    color: #532159;
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 3rem;
    text-align: center;
    background-image: url(../media/Stars_Tiling.png);
    background-repeat: repeat;
}

/* AFBEELDINGEN START */

#logoMascotte {
    padding-left: 10%;
    width: 500px;
}

#koekjeFoto {
    width: 200px;
    padding: 5%;
}

.cardSP img {
    padding: 5%;
    width: 70px;
}

#doosFoto{
       padding-left: 10%;
    width: 500px;
}

#behindTheScenesFoto{
    width: 400px;
}

/* AFBEELDINGEN EIND */

body {
    background-color: #F7ECD1;
}

p {
    margin-bottom: 2rem;
    font-family: verdana;
    font-size: 2rem;
    margin-left: 5%;
    margin-right: 5%;
}

#hero h1 {
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(18rem, auto);

}

#hero p {
    display: table-row;
    margin-top: 5rem;
    margin-bottom: 5rem;

}


#hero {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    padding: 5%;
}

#nav_logo {
    padding-right: 20rem;
}

ul li {

    display: inline-block;
    padding: 2rem;
}

h1 {
    font-family: "lieberuth", sans-serif;
    font-size: 8rem;
    margin-bottom: auto;
    margin-bottom: auto;
    color: #532159;
    width: 20%;
    padding-bottom: 5rem;
    padding-left: 5%;
    padding-right: 10%;
}

h2 {

    font-family: "lieberuth", sans-serif;
    color: white;
    font-size: 5vw;
    text-align: center;
    padding-top: 7%;

    background-image: url(../media/dividertiled.png);
    background-repeat: repeat-x;
    background-position: center left;
    background-size: 40%;

}


#intro :not(:first-child) {
    display: flex;  
     flex-flow: wrap;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(18rem, auto);

    align-items: center;

}

#intro p{
        display: flex;
    flex-flow: wrap;
}

#intro img{
        display: flex;
    flex-flow: wrap;
}

#spel :not(:first-child) {
    display: flex;
    flex-flow: wrap;
    align-content: center;
    margin-left: 20%;
    margin-right: 20%;
}

#over :not(:first-child) {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(18rem, auto);
            display: flex;
    flex-flow:row;
}

#over img{
        display: flex;
    flex-flow:row;
}

#andere :not(:first-child) {
    display:flex;
    flex-flow:row;
    
    margin-left: 20%;
    margin-right: 20%;
}

#cta :not(:first-child) {
     margin-left: 20%;
    margin-right: 20%;
}

#achtergrondTweedeGedeelte {

    background-color: #FF4E86;
    padding-top: 20%;
    padding-bottom: 20%;
}



.button {
    font-family: "lieberuth", sans-serif;
    color: #532159;
    font-size: 2rem;
    font-weight: lighter;
    padding: 1rem;
    text-transform: lowercase;
    border-radius: 1rem;
    box-shadow: #532159;
    background-color: #fdca47;
    transition: background-color 0.2s ease;
}

.button:hover {
    background-color: #FF4E86;
}

footer {
    background-color: #532159;
    color: white;
}

.cardSP {
    display: flex;
    flex-flow: column;
    align-items: center;
    
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
    padding-top: 5%;

    margin-left: 20%;
      margin-right: 20%;
      margin-bottom: 2%;
       margin-top: 2%;
    background-color: #fdca47;
}

#footerTekst {
    font-family: "lieberuth", sans-serif;
    font-size: 2rem;
    padding: 5rem;
}

#kleinelettertjes {
    font-family: Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    margin-top: 3rem;
    padding-bottom: 3rem;

}