body {
        background-color:rgb(254, 205, 214);
        color:rgb(113, 65, 73);
    }

    nav {
        background-color: rgb(197, 111, 125);
        color: rgb(30, 14, 22);
        width: 60%;
        border-radius: 10px;
        text-align: center; /*Moves text to center of nav bar*/
        margin-left:110px;
        position: sticky; /* makes nav sticky*/
        top:0;
        z-index: 10; /*makes ssticky nav appear on top of everything else on the webpage*/
    }

    a {
        color: rgb(30, 14, 22);
        text-decoration: none;
    }

    a:hover {
        color: rgb(255, 226, 240);
        text-decoration: underline;
    }

    marquee {
        display:none; /*hides the marquee*/
    }

    /*start of class and id styling*/
    #secOne, #secTwo, #secThree, #sidebar {
        background-color: rgb(255, 241, 252);
        border:1px solid black;
        padding:2px;
        margin:5px;
        width: 90%; 
    }

    #sidebar {
        width:90%;
    }

    .info {
        background-color: rgb(255, 250, 254);
        margin: 3px;
        padding:1px;
        border: 1px solid rgb(89, 62, 66);;
    }

    .topheading {
        font-size: 30px; /*changes the header for the main page to be larger*/
    }


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

    /*start of general tag styling*/
    body {
        background-color:rgb(254, 205, 214);
        color:rgb(113, 65, 73);
    }

    nav {
        background-color: rgb(197, 111, 125);
        color: rgb(30, 14, 22);
        width: 60%;
        border-radius: 10px;
        text-align: center; /*Moves text to center of nav bar*/
        margin-left:110px;
        position: sticky; /* makes nav sticky*/
        top:0;
        z-index: 10; /*makes ssticky nav appear on top of everything else on the webpage*/
    }

    a {
        color: rgb(30, 14, 22);
        text-decoration: none;
    }

    a:hover {
        color: rgb(255, 226, 240);
        text-decoration: underline;
    }

    marquee {
        display:none; /*hides the marquee*/
    }

    /*start of class and id styling*/
    #secOne, #secTwo, #secThree, #sidebar {
        background-color: rgb(255, 241, 252);
        border:1px solid black;
        padding:2px;
        margin:5px;
        width: 60%; 
    }

    #sidebar {
        position:absolute; /*keeps the sidebar section in one place*/
        right: 7px;
        top: 120px;
        width:35%;
    }

    .info {
        background-color: rgb(255, 250, 254);
        margin: 3px;
        padding:1px;
        border: 1px solid rgb(89, 62, 66);;
    }

    .topheading {
        font-size: 30px; /*changes the header for the main page to be larger*/
    }

}


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

    /*start of general tag styling*/
    body {
        background-color:rgb(203, 176, 238);
        color:rgb(60, 38, 78);
    }

     nav {
        background-color: rgb(160, 111, 197);
        color: rgb(26, 14, 30);
    }

    marquee {
        display:block; /*shows the marquee*/
        background-color: rgb(245, 239, 255);
        margin:3px;
    }


    /*start of class and id styling*/
    #secOne, #secTwo, #secThree, #sidebar {
        background-color: rgb(245, 239, 255);
    }

    #secTwo, #secThree {
        width:90%; /*changes the width for two of the main sections*/
    }

    #sidebar {
        right: 7px;
        top: 170px;
        /*repositions the sidebar*/
    }

    .info {
        background-color: rgb(254, 250, 255);
    }

    .topheading {
        font-size: 35px;
    }

}

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

    /*start of general tag styling*/
    body {
        background-color:rgb(176, 181, 238);
        color:rgb(38, 36, 70);
    }

    nav {
        background-color: rgb(111, 118, 197);
        color: rgb(16, 14, 30);
        margin-left:200px; /*moves the nav bar further to the right*/

    }

    marquee {
        background-color: rgb(235, 232, 255);
    }

    img {
        width:300px;
        float:left; /*adds float to all images*/
        margin:5px;
    }

    /*start of class and id styling*/
    #secOne, #secTwo, #secThree, #sidebar {
        background-color: rgb(235, 232, 255);
        width: 80%;
        margin:25px;
    }

    #sidebar {
        position:static;
        bottom:10px; /*moves the sidebar once again*/
        width:85%
    }

    .info {
        background-color: rgb(248, 247, 255);
        width:30%;
        display:inline-block; /*changes how the sections inside the sidebar display, putting them in the same line*/
    }

    .topheading {
        font-size: 40px;
    }

}