html {
    height: 100%;
    width: 100%;
    margin: 0;
}
#port>nav {
    display: block;
    width: 100%;
    height: 25px;
    background-color: #e6b241;
    color: #e292d7;
}
#navigation a {
    display: inline-block;
    width: 12%;
    height: 25px;
    color: #b361a8;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Roboto Mono', monospace;
}
#port>nav a:visited {
    color: mediumpurple;}
#port>nav a:hover {
    color: hotpink;
}
#port {
    background-image: url("img/cloud.gif");
    background-repeat: no-repeat;
    background-size: 100%;
}
#port{
    color: white;
}
#res {
    color: white;
    background-image: url(img/Aura.gif);
    background-repeat: no-repeat;
    background-size: 240%;
}
#res h2 {
    color: chartreuse;
}
#res h1 {
    color: chartreuse;
    text-shadow: 2px 2px 2px aquamarine, 2px 2px 2px chartreuse;
}
#res p{
    color: aquamarine;
}
#res li{
    color: powderblue;
}
#res a{
    color: cyan;
}
#res button{
    color: #43ea43;
}
#res button:hover{
    color: powderblue;
}
#res>nav {
    display: block;
    width: 100%;
    height: 25px;
    background-color: black;
    color: whitesmoke;
}
#res>nav a{
    display: inline-block;
    width: 12%;
    height: 25px;
    color: darkgrey;
}
#res>nav a:visited {
    color: goldenrod;}
#res>nav a:hover {
    color: lime;
}
#res a:hover{
    color: blue;
}
#pro {
    padding: 20px;
    color: white;
    background-image: url(img/neon.gif);
    background-repeat: no-repeat;
    background-size: 120%;
}
#pro>p{
    color: cyan;
    text-shadow: 2px 2px 3px hotpink;
}
#pro h2{
    color: #d95ed9;
    text-shadow: 2px 2px 5px hotpink;
}
#pro h1{
    color: deeppink;
    text-shadow: 2px 2px 18px #e1569d;
}
#pro button{
    color: #53c4ea;
    text-shadow: 2px 2px 5px hotpink;
}
#pro button:hover{
    color: cyan;
}
#pro>nav {
    display: block;
    width: 100%;
    background-color: #d95ed9;
    color: #53c4ea;
}
#pro>nav a{
    display: inline-block;
    width: 12%;
    height: 25px;
    color: blue;
    font-family: 'Montserrat', sans-serif;
}
#pro>nav a:visited {
    color: cyan;}
#pro>nav a:hover {
    color: greenyellow;
}
.pg2 a {
    color: cyan;}
.pg2 a:hover {
    color: deeppink;
}
#ex {
    background-color: black;
    color: #43ea43;
}
#ex>nav {
    display: block;
    width: 100%;
    color: darkgreen;
}
#ex>nav a{
    display: inline-block;
    width: 12%;
    height: 25px;
    color: #43ea43;
    font-family: 'Montserrat', sans-serif;
}
#ex button{
    color: #43ea43;
}
#ex>nav a:visited {
    color: #ec0e3a;
}
#ex>nav a:hover {
    color: lightgreen;
}
@media only screen and (max-width:500px) {
    /* For mobile phones: */
    #navigation, a,.pg1, .pg2, .pg3, .pg4, .pg5 {
        width: 100%;
    }
}
@media only screen and (max-width:500px) {
    /* For mobile phones: */
    #pro{
        background-repeat: no-repeat;
        background-size: 200%;
    }
    #res
    {
        background-repeat: no-repeat;
        background-size: 750%;
    }
    nav>a{
        font-size:2vw;

    }

    #cert{
        font-size: 1.8vw;
    }
}
button {
    background-color: transparent;
    color: white;
    font-size: larger;
}
button:hover{
    color: lightblue;
}
#hide{
    font-size: 2px;
}
.special {
    background-image: url(img/surprise.jpeg);
    background-repeat: no-repeat;
    background-size: 100%;
}
#awe{
    background-image: url("img/giphy.gif");
    background-repeat: no-repeat;
    background-size: 100%;
    color: gold;

}
#awe>nav{
    background-color:goldenrod ;
    color: black;
}
#awe>nav a{
    display: inline-block;
    width: 12%;
    height: 25px;
    color:dimgrey ;
    font-family: 'Montserrat', sans-serif;
}
#awe>nav a:visited{
    color:black ;
}
#awe>nav a:hover{
    color:blueviolet ;
}
#awe h1{
    color:goldenrod ;
}
#awe button {
    color: darkgoldenrod;
}
#awe button:hover{
    color: #b46ed9;
}
#prize{
    background-image: url("img/tree.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    color: white;
}
#prize img{
    width: 200px;
}
#special{
    background-image: url("img/hide.gif");
    color: #f6ac31;
}
#special>nav a{
    color: #f6ac31;
}
#pri>nav{
    background-color:black ;
    color: lightgrey;
}
#pri>nav a{
    display: inline-block;
    width: 12%;
    height: 25px;
    color:dodgerblue ;
    font-family: 'Montserrat', sans-serif;
}
#pri>nav a:visited{
    color: white;
}
#pri>nav a:hover{
    color: dimgrey;
}
#pri>a:visited{
    color: blueviolet;
}
#pri>a:hover{
    color: chartreuse;
}

#int>nav{
    background-color:black ;
    color: lightgrey;
}
#int{
    color: white;
}
#int>nav a{
    display: inline-block;
    width: 12%;
    height: 25px;
    color:dodgerblue ;
    font-family: 'Montserrat', sans-serif;
}
#int>nav a:visited{
    color: teal;
}
#int>nav a:hover{
    color: lightyellow;
}
#int button{
    color: white;
}
#int {
    background-image: url("img/rave.gif");
    background-repeat: no-repeat;
    background-size: 100%;
}
#speed {
    background-color: black;
    color: dodgerblue;
}
#star{
    background-color: black;
    color: white;
}
#denji{
    background-color: black;
    color: orange;
}
#star{
    background-color: black;
    color: aqua;
}
#cursed{
    background-color: #00001e;
    color: red;
}
#atla{
    background-color: #53c4ea;
    color: #c77e10;
}
#yugo{
    background-color: dimgrey;
    color: lightblue;
}
#ash{
    background-color: #e10d0d;
    color: #ffffff;
}
#mojang{
    background-color: saddlebrown;
    color: green;
}
#lbp{
    background-color: grey;
    color: orange;
}
#key{
    background-color: black;
    color: slategray;
}
#enchant{
    background-color: #c77e10;
    color: #e6b241;
}