/* 
 In terms of organizing our css file, we first have the importing of our fonts. 
 We generally have a structure that organizes our css from general to specific, which also goes from the order of 
 the content on the page. Therefore, we will have the css of our headers and nav bar first, then content of the
 actual page, and finally followed by the footer. 
 */


 /*Fonts*/
@font-face {
    font-family: OswaldReg;
    src: url(fonts/Oswald-Regular.ttf);
}

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

/*General*/
body{
    background-color: rgb(255,255,242);
    font-family: OswaldReg;
    font-size: 90%;
    margin: 0px;
}

h2{
    font-family: OswaldMed;
    font-size: 250%;
    background-color: rgb(255,232,16);
}

h3{
    font-family: OswaldMed;
    font-size: 225%;
}

p{
    font-family: OswaldReg;
}

a{
    text-decoration: none;
}

/*Header*/
.header{
    background-color: rgb(226,12,4);
    padding: 0px 0px 0px 0px;
    top: 0px;
    width: 100%;
    height: 100px;
}

/*Navigation Bar*/
.nav{
    font-family: OswaldReg;
    float: right;
    padding: 45px 45px 10px 10px;
    text-align: right;
    font-size: 150%;
    
}

.nav a:visited{
    color: white;
}

.nav a:hover{
    color:rgb(224,224,224);
}

/*Formatting Mainpage*/
.schedule{
    text-align: center;
}

.schedule p{
    font-size: 120%;
}

/*Formatting Circuit Page*/
.circuit{
    margin-left: 10px;
}

.circuit img{
    margin-bottom: 50px;
    padding-bottom: 30px;
}

table{
    text-align: left;
    border: 2px solid;
    width: 45%;
}

th,td{
    border: 2px solid;
}

/*Formatting Champions Page*/
.champions{
    margin-left: 10px;
}

.champions h3{
    margin-left: 50px;
}

.champions figure{
    margin-left: 50px;
}

.champions image{
    margin-left: 30px;
}

/*Formatting Headquarters Page*/
.headquarters{
    margin-top: 20px;
    margin-left: 20px;
}

/*Formatting Contact Page*/
.contact{
    margin-left: 10px;
    margin-right: 10px;
}

.contact img{
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.contact input{
    background-color: gray;
}

/*Formatting Footer*/
.footer{
    background-color: rgb(19,19,27);
    padding: 5px 10px;
    margin-top: 2%;
}

.footer p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 75%;
    color: white;
    text-align: right;
}