body{
    background-color: #F0EDE8; 
    overflow-x: hidden;
}

/* CASE 3 RESPONSIVE MULTI DEVICE DESIGN. */
header nav ul li a{
    color:#0F21A3;
}

.headermultidesign {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #F0EDE8;
}


.headermultidesign section{
    line-height: clamp(1rem, 10vw, 15rem);
    margin-bottom: 7em;
    margin-top: 7em;
    display: flex;
    flex-direction: row;
    justify-content:center;
   
}

.headermultidesign  h1{
    font-size: clamp(8vw, 15vw, 10rem);
    align-items: start;
    white-space: nowrap;
    display: inline;
    line-height: 1;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: bold;
    color: #0F21A3;
}

.headermultidesign  h2{
    color: #0F21A3;
    font-family: "STIX Two Text", serif;
    font-style: normal;
    font-size: clamp(1rem, 5vw, 3rem);
    font-weight: 250;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.headermultidesign section div img{
        max-width: 100%;
        position: absolute;
        z-index: 1;
        right: 28em;
        height: 20em;
        top: 30em;
        z-index: 10;
        } 

.headermultidesign section div:first-of-type{
    z-index: 100;
}
          
.whitecircle{
    background-color: white;
    position: absolute;
    width: 40em;
    height:40em;
    top: 22em;
    right: 18em;
    z-index: 1;
    border-radius: 100%;
    }

/* Case study 1 main */

.mainmultidevice {
    background-color: #F0EDE8;
}

.mainmultidevice section{
    margin-left: 7em;
    margin-right: 7em;
    z-index: 200;
}

.mainmultidevice h3{
    color: #0F21A3;
    font-family: "Big Shoulders Text", serif;
    font-size: 1em;
    margin-top: 1em;
    z-index: 100;
}

.mainmultidevice p{
    color:  #0F21A3;
    font-family: "STIX Two Text", serif;
    font-size: clamp(0.01rem, 5vw, 1.2rem);
    z-index: 100;
}

.mainmultidevice strong{
    color:  #0F21A3
}

.mainmultidevice img{
    max-width: 100%;
}

/*Main */

.mainmultidevice{
    background-color: #F0EDE8;
    font-family: Inter;
    z-index: 100;
}

.mainmultidevice section{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
    margin-left: 10em;
    margin-right: 10em;
    margin-bottom: 3em;
    z-index: 100;
}

.mainmultidevice section div h3, p{
    max-width: 100%;
    z-index: 100;
}

.mainmultidevice section div p{
    max-width: 80%;
    z-index: 100;
}

.mainmultidevice h3{
    font-family: "Encode Sans Expanded", serif; 
    text-transform: uppercase;
    font-weight: 900;
    font-size: 2em;
    font-style: normal;
    z-index: 100;
}

.mainmultidevice p{
    font-size: 1.3em;
    z-index: 100;
}

.mainmultidevice img{
    max-width: 100%;
}

.mainmultidevice section:first-of-type{
align-items:start;
gap: 2em;
width: 70%;
margin-right:10em;
margin-left:23em;
z-index: 100;
}


.mainmultidevice section:nth-of-type(7) {
    align-items: start;
    background-color: #ffffff;
    padding: 5em;
}


.mainmultidevice section:nth-of-type(7) div{
    margin-left: 5em;
    margin-right: 5em;
    
}

.mainmultidevice section:nth-of-type(7) p{
    max-width: 70%;
}

.imagewiteachtergrond div img{
background-color: rgb(255, 255, 255);
width: 100%;
margin-left: 0em;
}
/* FOOTER */

.footerstainedglasstories{
    background-color: #0F21A3;
}
.footerstainedglasstories ul li{
color:#ffffff;
}

.footerstainedglasstories h3{
color:#ffffff;
}

.footerstainedglasstories h1{
color:#F0EDE8;
}
.footerstainedglasstories h3{
color:#F0EDE8;

}.footerstainedglasstories strong{
color:#F0EDE8;
}

/* media query voor groot scherm */
@media only screen and (max-width:1600px){
      
    .whitecircle{
        position: absolute;
        width: 30em;
        height:30em;
        top: 22em;
        right: 18em;
        z-index: 1;
        border-radius: 100%;
        }
    
    .headermultidesign section div img{
        position: absolute;
        z-index: 1;
        right: 25.5em;
        height: 15em;
        top: 29em;
        z-index: 10;
        } 

        .mainmultidevice section:first-of-type {
            align-items: start;
            gap: 2em;
            width: 90%;
            margin-right: 10em;
            margin-left: 10em;
            z-index: 100;
        }

        .mainmultidevice section {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 5em;
            margin-left: 7em;
            margin-right: 7em;
            margin-bottom: 3em;
            z-index: 100;
        }

        .mainmultidevice section:nth-of-type(7) {
            align-items: start;
            margin-left: 0em;
            background-color: #ffffff;
            padding: 5em;}

        .mainmultidevice section:nth-of-type(7) div {
            margin-left: 1em;
            margin-right: 1em;}
        }


@media only screen and (min-width:1800px){

.headerVisualinterfacedesign div:first-of-type{
    margin-bottom: 8em;
    margin-right: 30em;
}


.headerVisualinterfacedesign h1{
    width: 10%;
    font-size: 10em;
}

.headermultidesign section div img{
    position: absolute;
    z-index: 1;
    right: 25.5em;
    height: 20em;
    top: 29em;
    z-index: 10;
    } 

}
    

@media only screen and (max-width: 950px) {

/* HEADER SMALL */
.headermultidesign{
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    flex-wrap: wrap;
}


.headermultidesign div:first-of-type{
z-index: 99;
margin: 0em;
margin-bottom: 10em;
}

.headermultidesign h1{
    width: 10%;
    font-size: 4em;
}

.headermultidesign h2{
    width: 60%;
    margin: 0em;
    margin-top: 0em;
    line-height: 1em;
    font-size: 2em;
    float: left;

}

.headermultidesign section div img{
    max-width: 100%;
    position: absolute;
    z-index: 1;
    right: 6em;
    height: 13em;
    top: 18em;
    z-index: 10;

}

.whitecircle{
background-color: white;
    position: absolute;
    width: 20em;
    height:20em;
    top: 15em;
    right: 3em;
    z-index: 5;
    border-radius: 100%;
}

/* MAIN */

.mainmultidevice section{
        margin-left: 1em;
        margin-right: 1em;
        flex-wrap: wrap;
        margin-top: 0em;
    }

    .mainmultidevice section h3{
        margin-top: 1em;
        font-size: 2em;
    }

    .mainmultidevice section div{
        max-width: 100%;
        margin: 0;
        margin-top: 0.5em;
        margin-left: 1em;
    }


.mainmultidevice section:first-of-type{
align-items:start;
gap:2em;
width: 100%;
margin-right:0em;
margin-left:1em;
}

}


.mainmultidevice section:nth-of-type(7) {
    align-items: start;
    margin-left: 2em;
    background-color: #ffffff;
    padding: 5em;
}

.mainmultidevice section:nth-of-type(7) p {
    max-width: 100%;
}

/* Met meer tijd kan ik hetvolgende doen:
- witte circles
- meer media queries
logo andere kleur? 
-strong */