html{
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}  

header{
    display: flex;
    align-items: center;
    margin-left: 20%;
}

/*nav bar*/
nav{
    display: flex;
    list-style: none;
    margin-left: 40%;
    border: 2px;
}

nav a{
    color: gray;
    text-decoration: none;
    margin-left: 10%;
}


div.d1{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 15%;
}
.s1 h2{
    display: flex;
    justify-content: center;
    margin-top: 9%;
    font-size: 500%;
}
.s1 a{
    display: flex;
    justify-content: center;
    color: black;
    text-decoration: none;
    font-size: 130%;
    margin-left: 45%;
    margin-right: 45%;
    margin-top: -2%;
}

.s2 h2{
    display: flex;
    justify-content: center;
    font-size: 600%;
    color: pink;
}
.s2 p{
    display: flex;
    justify-content: center;
    font-size: 130%;
    color: gray;
    margin-top: -2%;
}
div.d2{
    display: flex;
    justify-content: center;
    margin-top: 9%;
    width: 100%;
}

.s3 h2{
    display: flex;
    justify-content: center;
    font-size: 600%;
    color: pink;
}
.s3 p{
    display: flex;
    justify-content: center;
    font-size: 130%;
    color: gray;
    margin-top: -2%;
}
div.d3{
    display: flex;
    justify-content: center;
    margin-top: 8%;
    width: 100%;
}

.s4 h2{
    display: flex;
    justify-content: center;
    font-size: 600%;
    color: pink;
}
.s4 p{
    display: flex;
    justify-content: center;
    font-size: 130%;
    color: gray;
    margin-top: -2%;
}

div.d5{
    display: flex;
    justify-content: center;
    margin-top: 5%;
    width: 100%;
}
.s5 h4{
    display: flex;
    justify-content: center;
    font-size: 300%;
    margin-top: 1%;
}
.s5 p{
    display: flex;
    justify-content: center;
    font-size: 130%;
    color: gray;
    margin-top: -3%;
}

div.d6{
    display: flex;
    justify-content: center;
    margin-top: 5%;
    width: 100%;
}
.s6 h4{
    display: flex;
    justify-content: center;
    font-size: 300%;
    margin-top: 1%;
}
.s6 p{
    display: flex;
    justify-content: center;
    font-size: 130%;
    color: gray;
    margin-top: -3%;
}

div.d7{
    display: flex;
    justify-content: center;
    padding-top: 12%;
    width: 100%;
    margin-top: -8%;
}
.s7 h4{
    display: flex;
    justify-content: center;
    font-size: 300%;
    margin-top: 1%;
}
.s7 p{
    display: flex;
    justify-content: center;
    font-size: 130%;
    color: gray;
    margin-top: -3%;
}

.d8{
    display: flex;
    justify-content: center;
    margin-top: -3%;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media screen and (max-width:960px){
    .d1{
        transform: scale(0.6);
    }
    .d2{
        transform: scale(0.6);
    }
    .d3{
        transform: scale(0.9);
    }
    .d5{
        transform: scale(0.7);
    }
    .d6{
        transform: scale(0.7);
    }
    .d7{
        transform: scale(0.7);
    }
    .d8{
        transform: scale(0.3);
    }
}

@media screen and (max-width:960px){
    nav{
        display: flex;
        flex-direction: column;
    }
}