/* BLUE BOX Game Studios copyright. */
body {
margin:0px;
font-family: 'Roboto', sans-serif;
background-color:#000; 
color:#FFF;
}

#banner {

margin:auto;
width:700px;
padding-top:220px;

}

#topbanner {
margin:0px;
width:100%;
background-color:#red;
border-style:none;
border-width:1px;
border-color:#000;
color:;
font-family: 'Roboto', sans-serif;
text-align:center;
padding: 2px 15px 2px 15px;
box-shadow: 0 4px 22px 2px black;
position:fixed;
top:0;
left:0;
font-weight: 300;
}

#bottom {
margin:auto;
width:350px;
background-color:#000;
color:white;
font-family: 'Roboto', sans-serif;
padding: 15px 15px 15px 15px;
}

a {
text-decoration:none;
}

#footer {
margin:auto;
width:350px;
font-family: 'Roboto', sans-serif;
font-size:9px;
height:100px;
}

#img-banner {
background-image:url('img/bannerimg.jpg');
background-repeat:no-repeat;
background-size:100%;
height:200px;
width:100%;
padding-left:200px;
padding-top:400px;
}

a {
text-decoration:none;
color:black;
}

.headertext {
color:white;
text-shadow: 2px 2px 4px #000000;
font-family: 'Roboto', sans-serif;

}

h1 {font-size:35px;}
button {background-color:#000;
border:none;
border-radius:50px;
color:white;
font-family: 'Roboto', sans-serif;
padding:15px 15px 15px 15px;
font-size:18px;
height:50px;
width:200px;
}

#left-footer {
margin:auto;
float:left;
font-size:14px;
font-weight:700;
}

#right-footer {
margin:auto;
float:right;
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: #f1f1f1;
        }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

#mainfront {
background-color:#000;
font-family: PT sans serif, sans-serif;
text-align: center;
margin:auto;
width: 350px;

}

button {
    border:thin;
    border-color:#FFF;
    border-radius:25px;
    height:30px;
    width:120px;
    color:#000;
    background-color:#FFF;
    padding: 5px 5px 5px 5px;
}

input {
    border: thin;
    background-color: #000;
    color: #FFF;
    border-radius: 25px;
    height: 30px;
    width: 220px;
    border-color: #FFF;
    padding: 5px 5px 5px 5px;
    text-align: center;
    font-family: PT sans serif, sans-serif;
}