iframe {
    width: 80%;
    height: auto;
    margin-left: 10%;
    margin-top: 10%;
}

h2 {
    margin-top: 5%;
    text-align: center;
    font-family: "Faculty Glyphic"
}

h3 {
    margin: 5%;
    color: white;
}

section {
    border: solid black;
    border-radius: 30px;
    margin: 2% 0.5%;
}

section p {
    padding-left: 7%;
    padding-right: 7%;
    line-height: 150%;
    color: white;
    font-family: "Roboto", sans-serif;
}



#s1 {
    background: rgb(2, 0, 36);
    background: linear-gradient(164deg, rgba(2, 0, 36, 1) 0%, rgba(28, 9, 121, 1) 0%, rgba(28, 9, 121, 1) 6%, rgba(6, 167, 225, 1) 30%, rgba(0, 212, 255, 1) 100%);
}

#s2 {
    background: rgb(34, 193, 195);
    background: radial-gradient(circle, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}

#s3 {
    background: rgb(63, 94, 251);
    background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}

#s4 {
    background: rgb(238, 174, 202);
    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
}

#s5 {
    background: rgb(131, 58, 180);
    background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(228, 29, 253, 1) 50%, rgba(252, 176, 69, 1) 100%);
}

#s6 {
    background: rgb(73, 180, 58);
    background: linear-gradient(90deg, rgba(73, 180, 58, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(252, 69, 88, 1) 100%);
}

#s7 {
    background: rgb(58, 180, 173);
    background: radial-gradient(circle, rgba(58, 180, 173, 1) 0%, rgba(14, 0, 142, 1) 50%, rgba(152, 153, 0, 1) 100%);
}

#s8 {
    background: rgb(180, 64, 58);
    background: linear-gradient(3deg, rgba(180, 64, 58, 1) 0%, rgba(0, 79, 142, 1) 50%, rgba(255, 122, 239, 1) 100%);
}

#s9 {
    background: rgb(180, 58, 58);
    background: linear-gradient(3deg, rgba(180, 58, 58, 0.8407738095238095) 0%, rgba(142, 0, 91, 1) 0%, rgba(122, 255, 218, 1) 100%);
}

#s10 {
    background: rgb(180, 58, 58);
    background: linear-gradient(3deg, rgba(180, 58, 58, 0.8407738095238095) 0%, rgba(0, 211, 255, 1) 0%, rgba(135, 148, 28, 1) 100%);
}

@media screen and (min-width: 768px) {
   h2{
    font-size: 250%;
    margin-bottom: 5%;
   }
    h3 {
        font-size: 300%;
    }
    section p {
        font-size: 200%;
    }

    iframe {
        height: 37vh;
        width: 77vw;
        margin-bottom: 5%;
    }
}