@font-face{
    font-family: "komigo";
    src: url(fonts/Komigo3D-Regular.ttf);
}

@font-face{
    font-family: "manga";
    src: url(fonts/mangat.ttf);
}
@font-face{
    font-family: "axis";
    src: url(fonts/KOMIKAX_.ttf);
}

/* Basic Information for all Body Pages */
#body1,#body2,#body3,#body4 {
    margin: 0px;
    color: #cccccc;
    font-family: "manga", sans-serif;
}
/* Only color difference in background*/
#body1 {
    background-color:#181f26;
}
#body2 {
    background-color:#182619;
}
#body3 {
    background-color:#182326;
    }
#body4 {
    background-color:#252618;  
}

/* Basic Information for all wrapper Pages */
#wrapper2,#wrapper3,#wrapper4 {
    width: 900px;
    margin: 20px auto 60px;
    border: 3px solid gray;
    border-radius: 7px;
}

/* Only color difference in background*/
#wrapper1 {
    background-color: #201f31;
    margin: 20px auto 60px; 
    width: 1100px ;
    border: 3px solid gray;
    border-radius: 7px;
}

#wrapper2 {
    background-color: #1f3123;
}
#wrapper3 {
    background-color: #1f2f31;
}
#wrapper4 {
    background-color: #30311f;
}

header, nav, main,footer {
    padding: 1px 20px;
}

header {
    font-family: "axis", sans-serif;
    border-bottom: 3px solid gray;
}
#wrapper1 header {
    background-color: #201f31 ;
}
#wrapper2 header {
    background-color: #1f3123 ;
}
#wrapper3 header {
    background-color: #1f2f31 ;
}
#wrapper4 header {
    background-color: #30311f ;
}


h1 {
    margin: 20px 0px 0px;
    font-size: 50pt;
}
h1 a{
    color: #ffffff;
    text-decoration: none;
}

h2 {
    margin: 0px 0px 10px;
    font-size: 10pt;
    font-weight: normal;
    color: #ffffff;
}


nav ul li a{
    color: #ffffff;
    text-decoration: none;
}
nav ul li a:hover {
    color: #ff9595;
    font-size: 20pt;
    transition: 0.3s;
}
nav ul{
    list-style-type: none;
    margin-top: 65px;
    margin-left: 20px;
}

nav li{
    margin-top: 16px;
}


#navbutton1,#navbutton2,#navbutton3,#navbutton4 {
    display: block;
    font-size: large;
    border: 2px solid gray;
    padding: 10px;
    border-radius: 3px;
    position: fixed;
    margin-top: -150px;
}

#navbutton1 {
    background-color: #201f31;
    color: #efbaff;
    margin-left: -130px;
}
#navbutton2 {
    background-color: #1f3123;
    color: #ffe2ba;
    margin-left: -230px;
}
#navbutton3 {
    background-color: #1f2f31;
    color: #babdff;
    margin-left: -230px;
}
#navbutton4 {
    background-color: #30311f;
    color: #baffd6;
    margin-left: -230px;
}


#backbutton1,#backbutton2,#backbutton3,#backbutton4{
    font-size: large;
    border: 2px solid gray;
    padding: 10px 0px 10px 0px;
    border-radius: 3px;
    position: fixed;
    text-decoration: none;
    margin-top: -150px;
    }
#backbutton1 {
    margin-left: 1125px;
}
#backbutton2,#backbutton3,#backbutton4 {
    margin-left: 1025px;
}
#backbutton15 {
    text-decoration: none;
    background-color: #201f31;
    color: #efbaff;
    padding: 10px 5px 10px 5px;
}
#backbutton25 {
    text-decoration: none;
    background-color: #1f3123;
    color: #ffe2ba;
    padding: 10px 5px 10px 5px;
}
#backbutton35 {
    text-decoration: none;
    background-color: #1f2f31;
    color: #babdff;
    padding: 10px 5px 10px 5px;
}
#backbutton45 {
    text-decoration: none;
    background-color: #30311f;
    color: #baffd6;
    padding: 10px 5px 10px 5px;
}

#actualmenu1,#actualmenu2,#actualmenu3,#actualmenu4{
    border: 3px solid gray;
    position: fixed;
    margin-top: -175px;
    width: 300px;
    height: 90%;
    font-size: x-large;
    border-radius: 30px;    
}

#actualmenu1{
    margin-left: -155px;
    background-color: #201f31;    
}
#actualmenu2{
    margin-left: -255px;
    background-color: #1f3123;    
}
#actualmenu3{
    margin-left: -255px;
    background-color: #1f2f31;    
}
#actualmenu4{
    margin-left: -255px;
    background-color: #30311f;    
}

/* This exit menu is in the works but doesn't work and I don't know why*/
#exitmenu {
    margin-left: 140px;
    margin-top: 10px;
    border: 1px solid red;
    display: inline-block;
    background-color: black;
    color: white;
    font-size: 10pt;
    position: absolute;
}
/*Makes the third level of pages appear more to the right on the nav bar*/
.nav3level{
    margin-left: 25px;
}
/*information for all main h3 in all pages*/
#main1 h3,#main2 h3,#main3 h3,#main4 h3{
    font-size: 30pt;
    font-family: "komigo", sans-serif;
}
/*index has different width to compensate for article and aside widths*/
#main1 h3 {
    width: 550px;
    color: #efbaff;
}
/*Different margins for secondary/tertiary pages*/
#main2 h3,#main3 h3,#main4 h3{
    font-size: 30pt;
    font-family: "komigo", sans-serif;
    margin-bottom: 10px;
    margin-top: 10px;
}
/* different font color per sport*/ 
#main2 h3 {
    color: #ffe2ba;
}
#main3 h3 {
    color: #babdff;
}
#main4 h3 {
    color: #baffd6;
}

/*index page*/
article {
    width: 600px;
    float: left;
}
aside {
    width: 400px;
    float: right;
    background-color:#201f31;
    margin-top: 45px;
}
article p {    
    font-size: 14pt;
}
.choose{
    color: white;
    font-size: 40px;
    margin-top: 0px;
    text-align: center;
    font-family: "komigo", sans-serif;
}
article figure {
    margin: auto;
}
aside figure{
    width: 300;
    display: inline-block;
    margin-left: 25px;
    margin-bottom: 30px;
    margin-top: -10px;
}
/**/

/*index page imagenav select*/
#choosenav img {
    border: 2px solid gray;
    border-radius: 15px;
    width: 350px;
}
#choosenav img:hover{
    transition: 0.5s;
    transform: scale(1.03);
    box-shadow: 0px 0px 30px  rgba(209, 138, 198, 0.5);
}
/**/
/*secondary page anime nav*/
#headerrecs {
    text-align: center;
}
#animerecs img {
    border: 2px solid gray;
    border-radius: 15px;
    width: 350px;
    margin: 0px 0px;
}
#animerecs figure {
    display: inline-block;
    margin: 25px 35px;
}
#main2 #animerecs img:hover{
    transition: 0.5s;
    transform: scale(1.03);
    box-shadow: 0px 0px 34px  rgba(247, 255, 137, 0.5);
}
#main3 #animerecs img:hover{
    transition: 0.5s;
    transform: scale(1.03);
    box-shadow: 0px 0px 34px  rgba(137, 237, 255, 0.5);
}
#main4 #animerecs img:hover{
    transition: 0.5s;
    transform: scale(1.03);
    box-shadow: 0px 0px 34px  rgba(137, 255, 147, 0.5);
}
/**/

/*h4 is for anime nav titles*/
h4 {
    font-size: 30px;
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: center;
}
/**/

figcaption{
    text-align: left;
}
figcaption {
    font-size: 8pt;
}
.mix{
    width: 598px;
    border: 3px solid gray;
}
/*Centers main image on secondary pages*/
#attention,#attention2{
    text-align: center;
    margin: 0px;
}
#attention img {
    border: 3px solid gray;
}
#attention figcaption{
    margin-left: 30px;
}
/**/
/*Sets wifth for images in all tertiary pages*/
.focus {
    width: 856px;
    border: 3px solid gray;
}
/**/
footer {
    clear: both;
}