@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
    font-family: Open Sans;
    margin: 0 auto;
    background-color: rgb(22, 20, 20);
    color: white;
}

h1, nav, h2, footer{
    display: flex;
    align-items: center;
    justify-content: center;
}

p, img{
    margin-left: 1em;
}

.nava{
    margin-left: 1em;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

nav{
    border: 2px solid rgb(0, 170, 255);
    height: 2em;
    margin-left: 1em;
    margin-right: 1em;
}

img{
    margin-top: 1.5em;
}

.pa{
    color: rgb(0, 170, 255);
    font-weight: bold;
}

.sectionp{
    line-height: 1.5em;
}

hr{
    margin-top: 4em;
    margin-bottom: 0;
    border: 3px solid rgb(0, 170, 255);
}

footer{
    background-color: #cdcdcd;
    color: rgb(0, 0, 0);
    height: 15em;
    width: 100%;
}

ul{
    margin-left: 10em;
}

.pcsec, .pcsec2{
    display: none;
}

.pcimg, .pcimg2, .pcimg3{
    display: none;
}

@media (min-width: 1080px){
    .pcsec, .pcsec2{
        display: inline-block;
    }
    
    .pcimg, .pcimg2, .pcimg3{
        display: inline-block;
    }

    .mobilesec{
        display: none;
    }

    nav{
        margin: 3em 30em 0 30em;
    }

    .nava{
        margin-left: 3em;
    }

    .nava:hover{
        color: rgb(0, 170, 255);
    }

    h2{
        text-decoration: underline rgb(0, 170, 255);
    }

    .pch2{
        margin-left: 7em;
    }

    section{
        margin: 8em 0 15em 25em;
        float: left;
    }

    .pcsec2{
        margin-left: 26em;
    }

    .pcimg2{
        margin-left: 7em;
    }

    img{
        margin-top: 10em;
        margin-left: 15em;
        float: left;
    }
    
    .pcimg3{
        width: 22em;
    }

    .pa:hover{
        color: white;
    }

    hr{
        clear: both;
    }
}