/*This file gives the default styling for entire web page
   and has the lowest priority in the style heiarchy.
   (i.e. Specific pages and subsections of the site may reference
   alternative stylesheets and overrride what is set here.)*/

/* generically set fonts */
* {
   font-family: univers, merriweather, dosis, helvetica;
}

/* style main web page content */
body {
   padding: 10px 10px;
}

title {
   height: 100%;
   width: 100%;
}


footer {
   margin: 30px 0 0;
}

footer p {
   color: white;
   text-align: right;
}

/* match full web page to body for later masking if needed */
html {
   background: #FFFFFF;
   opacity: 100%;
   padding: 0;
   background-image: url('./images/background.jpg');
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}


/* style all homepage sections */
section {
   display: block;
   width: 75%;
   border-radius: 20px;
   margin: 20px auto 40px;
   padding: 5 auto;
   background: rgba(200, 200, 200, 0.85);
   border-style: solid;
   border-width: 1px;
   border-color: #AAAAAA #000086;
}

/* format page title */
#title {
   padding: 10px;
   margin: 80px auto;
   border-style: none none solid;
   border-width: 3px;
   border-color: #FFCC00;
   text-align: center;
   background-image: url('./images/background-title.jpg');
   background-position: 42% 41%;    
}

#title h1 {
   text-indent: 0%;
   color: #FF9944;
}

#title h2 {
   color: #CCFFFF;
}


/* page title formatting */
h1 {
   color: black;
}

h2 {
   color: #111133;
}


a {
   color: #0000CC;
}

a:hover {
   color: #00CC00;
}

a:visited {
   color: #7799CC;
}

a:active {
   color: #CC0000;
}


p, span {
   color: #00000;
}

footer p {
   font-size: 14px;
}



/* updated nav styling */
#sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    width: 15%;
    margin-top: 2px;
    transform: translateX(100%);
    transition: transform 250ms ease-in-out;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
}
#capstoneLogo{
   position: relative;
   width: 90%;
   height: 150px;
   margin: 5%;
   border-radius: 20px;
   border-style: solid;
   border-width: 1.5px;
   border-color: #177D36;
}
.sidebarMenuInner{
    margin:0;
    padding:0;
}
.navItem {
    list-style: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    width: 75%;
}
#currentLink{
   color: white;
}
#currentLink:visited {
   color: none;
}
#currentLink:hover{
   color: #FF9944;
}
.navLink {
   display: block;
   margin: 3px auto;
   padding: 10px;
   text-align: center;
   width: 100%;
   background: rgba(225, 225, 225, 0.9);
   color: #FF9944 !important;
   text-decoration: none;
   font-size: 20px;
   
   border-style: none;
   border-radius: 10px;
   border-color: none;
   border-width: 0px;
   
   transition: all 0.3s ease;
}
.navLink:visited {
   color: none !important;
}
.navLink:active {
   color: #FF9944;
   
}
navLink:hover {
   color: #339944;
   border-color: #339944;
   background: white;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0px);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.5s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 22px;
    right: 15px;
    height: 22px;
    width: 22px;
}
.spinner {
    transition: all 0.5s;
    box-sizing: border-box;
    position: absolute;
    margin: 2px 0px;
    height: 5px;
    width: 150%;
    background-color: #fff;
}
.horizontal {
    transition: all 0.5s;
    box-sizing: border-box;
    width: 115%;
    position: relative;
    float: right;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.5s;
    box-sizing: border-box;
    float: right;
}
.diagonal.part-2 {
    transition: all 0.5s;
    box-sizing: border-box;
    position: relative;
    float: right;
    margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.5s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.5s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 180px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.5s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -16px;
}