/* HTML RULES */
html {
    font-family: Orbitronio;
    color: black;
}

/* BODY RULES */

body {
    padding: 0%;
}

/* ABOUT SECTION RULES */

#AboutWebsiteBody {
    font-family: Pixellari;
    background-color: rebeccapurple;
    background-image: url(../Images/carina_nebula.png);
    background-position-x: center;
}

#AboutCreatorBody {
    font-family: Pixellari;
    background-color: cornflowerblue;
    background-image: url(../Images/SmokingCat.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
}

#GeneralAbout {
    font-family: Pixellari;
    background-color: seagreen;
    background-image: url(../Images/Japan.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
}

.centeringText{
    margin-left: -2em;
}

/*HOME PAGE VIDEO RULES*/
#HomePagevideo
{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;

}
/* NAV MENU RULES */
#nav_menu {
    position: relative;
    width: 100%;
    z-index: 1;
}
    #nav_menu ul {
        list-style-type: none;
        text-align: center;
        padding-left: 0;
        position: relative;
    }
#nav_menu ul li{
    width: 19.50%;
    float: left;
    display: inline;
    position: relative;
}
#nav_menu ul ul{
    width: 100%;
    display: none;
    position: absolute;
    top: 100%;
}
#nav_menu ul ul li{
    width: 100%;
    clear: both;
}

    #nav_menu ul li a:hover, #nav_menu a:focus {
        background-color: rgb(128,128,128, .25);
        color: red;

    }

        #nav_menu ul li:hover > ul {
            display: block;
            transition: border .5s ease-out, .5s;
        }

#nav_menu > ul::after{
    content: "";
    display: block;
    clear: both;
}

#nav_menu ul li a{
    text-decoration: none;
    display: block;
    text-align: center;
    border: .4em double black;
    font-size: 1.5em;
    font-weight: bold;
    color: black;
    background-color: rgb(255,255,255, .75);
    padding: 1em 0;
    font-family: Orbitronio;
    color: black;
}

/* HEADER RULES */
header {
    background-color: rgb(255,255,255, .75);
    text-align: center;
    font-size: xx-large;
    border: double black;
    margin-left: 5em;
    margin-right: 5em;
}

header #headerleft{
    float: left;
    font-size: 4em;
    margin-left: 1.5em;
    margin-top: 3%;
}
header #headerright {
    float: right;
    font-size: 4em;
    margin-right: 1.5em;
    margin-top: 3%;
}

#AboutWebsiteHeader {
    background-color: white;
    text-align: center;
    font-size: large;
    font-family: Pixellari;
    border: double black .5em;
    background-color: rgb(255,255,255, 0.50);
}

/* SECTION RULES */
section {
    text-align: center;
    font-size: large;
}

#easyReadAbout {
    background-color: white;
    text-align: center;
    font-size: large;
    font-family: Pixellari;
    border: double black .5em;
    margin: 10em;
    background-color: rgb(255,255,255, 0.50);
}

/*Website Update DIV Rules*/
#WebsiteUpdates {
    background-color: rgb(255,255,255, .75);
    text-align: center;
    font-size: xx-large;
    border: double black;
    margin-left: 13em;
    margin-right: 13em;
}

/* FOOTER RULES */
footer {
    text-align: center;
    width: 100%;
    font-size: x-large;
    background-color: rgb(128,128,128, .50);
    border-top: double black .5em;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-family: Pixellari;
}

/* MEDIA QUERY */
#mobile_menu {
    font-family: Pixellari;
    display: none;
}

@media only screen and (max-width: 1400px){
    #headerleft{
        display: none;
    }
    #headerright{
        display: none;
    }

    #WebsiteUpdates {
        padding: 0;
        margin-left: 7em;
        margin-right: 7em;
    }
}

/*Some of the queries below just make the "Things I Love" text look alright*/
@media only screen and (max-width: 1263px) {
    #nav_menu {
        font-size: 13px
    }
}
/* 1024px tablet (horizontal) */
@media only screen and (max-width: 1027px) {
     body {
      height: auto;
     }

     #nav_menu {
      font-size: 10px
     }

     #WebsiteUpdates{
         padding: 0;
         margin-left: 3em;
         margin-right: 3em;
     }
}

    /* 770px phone (vertical) */
    @media only screen and (max-width: 810px) {

        body {
            margin-left: 0;
            margin-right: 0;
            text-align: center;
            font-size: small;
        }

        #nav_menu {
            display: none;
        }

        #mobile_menu {
            display: block;
        }
        h1{
            font-size: 2em;
        }
    }

    /* FONT RULES */

    /*font used for home page*/
    @font-face {
        font-family: Orbitronio;
        src: url(../fonts/Orbitronio.ttf);
    }

    @font-face {
        font-family: Pixellari;
        src: url(../fonts/Pixellari.ttf)
    }