:root {

    --magenta: #ec008c;

    --cyan: #0085D6;

    --darkgray: #4B4B4C;

    --lightgray: #7e7e85;



    --hovercyan: #0676bb;

    --hovertext: #e4effc;

    --graysection: rgba(0,0,0, 0.08);



}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;



    font-family: "Roboto", sans-serif;

    font-optical-sizing: auto;

    font-weight: normal;

    font-style: normal;

    font-variation-settings:

    "wdth" 100;

}



body {

    background-image: url(img/background1.webp);

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    background-attachment: fixed;



    height: 100vh;

}



body::after {

      content: "";

  position: fixed;

     inset: 0;

    background: rgba(255,255,255, 0.9);

    z-index: -1;

}





.container {

    display:block;

}



article {

            padding: 1rem;

        }



ul {

    list-style-type: disc;

    list-style-position: inside;

}



li {

padding: 0.5rem 1rem;

}



h2 {

    color: var(--cyan);

        font-weight: 500;

        margin: 1.5rem;

}



h3 {

    color: var(--darkgray);

    font-weight: bold;

}



footer {



    background-color: var(--darkgray);

    color: white;

    padding: 0.5rem 2rem;

    width: 100%;



}



.page-wrapper {

    min-height: calc(100vh - 35px);

}



#textcenter {

    text-align: center;

}





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





        h2 {

        margin: 1rem 15%;

        }



        .sTextImg {

            display: flex;

            justify-content: space-between;

        }



        .sImg {

            max-width: 400px;

        }



}



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



    article > .container {

        max-width: 1200px;

        margin: auto;

    }



}