/*General Document Style*/

*{
    margin: 0;
    font-family:'calibri', sans-serif;
    font-weight:lighter;
}

/*Page header styles*/

.header{
    list-style-type: none;
    margin:0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.header-image{
    float:left;
    display: block;
    width:10%;
    padding-left:3%;
    height: auto;
    object-fit:contain;
    text-align:left;
}

.header-large{
    font-size:60px;
    color:#7A7B7A;
    margin:auto;
    padding:10px;
    padding-left:10%;
    padding-top:3%;
    font-family:'palatino', serif;
    font-weight:bold;
    text-align:center;
}

.header-body{
    color:#7A7B7A;
    font-size:20px;
    margin:auto;
    /*padding-bottom:2px;*/
    padding-left:10%;
    font-family:'palatino', serif;
    text-align:center;

}


header-highlight{
    color:#D62631;
    font-family:'palatino', serif;
}


/*Menu Bar styles*/
.menubar{
    list-style-type: none;
    margin:0;
    padding: 0;
    overflow: hidden;
    background-color: #7A7B7A;
    display:flex;
    justify-content:center;
}


.menu-item{
    float:left;
    display: block;
    background-color: #7A7B7A;
    padding: 20px 20px;
    color: white;
    text-decoration:none;
    text-align:center;
}

.menu-item:hover{
    background-color:#D7D8D6;
    color:black;
    cursor: pointer;
}

.menu-item-active{
    float:left;
    display: block;
    background-color: #D62631;
    padding: 20px 20px;
    text-decoration:none;
    text-align:center;
    
}

div.background{
    background-color: #f6f7f5;
    height:100%;
}

/* Home Content Style*/

div.stats{
    overflow: hidden;
    /*display:flex;*/
    display: none;
    justify-content:center;
    perspective: 1px;
    outline:2px black solid;
    border-radius: 5px; /*Why DOES BORDER RADIUS NOT WORK????*/
    margin-bottom:20px;

}

div.stats-box1{
    float:right;
    outline:2px black solid;
    /*border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;*/
    padding:10px;
    width:50%;
    height:auto;
}

div.stats-box2{
    float:right;
    outline:2px black solid;
    /*border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;*/
    padding: 10px;
    width:50%;
    height:auto;
    
}

div.home-div{
    padding:30px 0px;
    padding-left:10%;
    padding-right:10%;
    width:50%;
    margin:auto;
    background-color: #ffffff;
}

.home-content{
    padding:2px;
    padding-left:0px;
    padding-bottom:25px;

}

.home-h1{
    font-weight: bold;
    font-size:20px;
    padding:5px;
    padding-left:0px;
}

/*About Content Style*/

div.about-div{
    padding:30px 0px;
    padding-left:10%;
    padding-right:10%;
    width:50%;
    margin:auto;
    background-color: #ffffff;
}

/*Login Style*/

div.login-div{
    padding:30px 0px;
    width:50%;
    padding-left:10%;
    padding-right:10%;
    margin:auto;
    background-color: #f6f7f5;
    align-items:center;
    height:67vh;
}

div.login-screen{
    background-color: #D7D8D6;
    padding-top:3%;
    padding-bottom:3%;
    width:80%;
    margin:auto;
    box-shadow: 8px 5px 5px black;
    border-radius: 5px;
}

h1.login-header{
    font-weight: bold;
    margin:auto;
    text-align:center;
    padding-bottom:4%;
}

.username{
    margin:auto;
    display:block;
    text-align:center;
}

.password{
    margin:auto;
    display:block;
    text-align:center;
}

.login-button{
    margin:auto;
    display:block;
    text-align:center;

}

/*Document Style*/

div.document-div{
    padding:30px 0px;
    padding-left:10%;
    padding-right:10%;
    display: none;
    width:50%;
    margin:auto;
    background-color: #ffffff;
}

/*Page Footer*/
div.footer{
    width: 100%;
    margin:0;
    padding: 0;
    overflow: hidden;
    background-color: #7A7B7A;
    display:flex;
    justify-content:center;
    font-size:10px;
}

div.footer-item{
    float:left;
    display: block;
    background-color: #7A7B7A;
    padding: 5px;
    color: white;
    text-align:center;
}

/*Documents Content*/

div.file{
    background-color:#D7D8D6;
    margin-bottom:5px;
    padding: 5px;

}

div.file:hover{
    background-color:#D62631;
    color: white;
}