/*Font for the website*/
@font-face {
    font-family: swordArtFont;
    src: url(../Sword_Art_Online/SAOUITT-Regular.ttf);
}

/*Font sizes*/
p {font-size: 22px; word-spacing: 3px;}
h2 {font-size: 30px;}

/*Background of the website*/
body {margin: 0; background-image: url(../images/647749.png); background-size: cover; background-attachment: fixed; font-family: swordArtFont;}

/*Container where all content is shown*/
.container {display: flex; padding: 10px; margin-left: 12%; margin-top: 60px; height: 85vh; width: 85vw; background-color: rgb(255, 255, 255, 0.6);}

/*Side navbar and content*/
nav {margin-top: 18vh; height: 50vh; width: 10vw; float: left; align-content: center; display: flex; flex-direction: column;}
ul {align-items: center; list-style-type: none;}
li {margin: auto;}
img {display: block; margin: 15px 10px;}

/*Dropdown for sidenav*/
.dropdown1, .dropdown2, .dropdown3, .dropdown4 {display: inline-block;}
.dropdown-content1 {display: none; position: absolute; min-width: 160px; z-index: 1; top: 149px; left: 120px;}
.dropdown-content2 {display: none; position: absolute; min-width: 160px; z-index: 1; top: 253px; left: 120px;}
.dropdown-content3 {display: none; position: absolute; min-width: 160px; z-index: 1; top: 355px; left: 120px;}
.dropdown-content4 {display: none; position: absolute; min-width: 160px; z-index: 1; top: 460px; left: 120px;}
.dropdown1:hover .dropdown-content1 {display: flex;}
.dropdown2:hover .dropdown-content2 {display: flex;}
.dropdown3:hover .dropdown-content3 {display: flex;}
.dropdown4:hover .dropdown-content4 {display: flex;}
.navigation-banner1, .navigation-banner2, .navigation-banner3, .navigation-banner4  {display: flex; flex-direction: column; margin-top: 16px;}
.dropbox {display: flex; align-items: center; background-color: white; text-decoration: none; padding: 15px; margin-top: 5px; width: 150px; text-align: center; font-size: large; color: black;}

/*Content inside container*/
.leftbox {display: flex; background-color: rgba(0, 0, 0, 0.4); color: white; width: 20%; margin-right: 50px; text-align: center; flex-direction: column; overflow: hidden;}
.rightbox {display: flex; /*background-color: rgba(0, 0, 0, 0.5);*/ color: black; width: 75%; padding: 10px; overflow: scroll; overflow-x: hidden;}
.landing {text-align: center; margin: auto;}

/*All articles inside rightbox*/
.rightbox article {display: none;}

/*Hover effect on learning outcomes in leftbox*/
#trendsBtn1 {cursor: pointer;} 
#iterativeBtn1 {cursor: pointer;}
#interactiveBtn1 {cursor: pointer;}
#groupBtn1 {cursor: pointer;}
#trendsBtn2 {cursor: pointer;} 
#iterativeBtn2 {cursor: pointer;}
#interactiveBtn2 {cursor: pointer;}
#groupBtn2 {cursor: pointer;}
#projectBtn1 {cursor: pointer;} 
#commsBtn1 {cursor: pointer;}
#expBtn1 {cursor: pointer;}
#feedbackBtn1 {cursor: pointer;}
#coreBtn1 {cursor: pointer;}
#projectBtn2 {cursor: pointer;} 
#commsBtn2 {cursor: pointer;}
#expBtn2 {cursor: pointer;}
#feedbackBtn2 {cursor: pointer;}
#coreBtn2 {cursor: pointer;}


/*Content spacing in leftbox*/
.portfolioL {display: flex; flex-direction: column; line-height: 1px; text-shadow: 1px 1px black;}
.projectL {display: flex; flex-direction: column; line-height: 1px; text-shadow: 1px 1px black;}

/*Footer*/
footer {text-align: center; text-shadow: 1px 1px black;}