/* 
             GENERAL INFO
COOLORS LINK: https://coolors.co/d7e0cd-468189-b7c0ee-1d201f-f4e9cd

           ORDER OF STYLES
GENERAL FORMAT
NAVBAR STYLE
SLIDESHOW
PORTFOLIO
PFP HOMEPAGE
CAREER
INSTRUCTIONS (GAME)

*/

/* Format */
body{
    margin:0;
    background-color: #D7E0CD;
    font-family: "Trirong", serif;
}
.maincontent {
    margin: 3% 7% 3% 7%;
}
.format {
    table-layout: fixed ;
    width: 86% ;
}
@media all and (min-width:0px) and (max-width: 1000px){
    .format td {
        display: table-row;
      }
}
.game {
    width: 960px;
    height: 600px;
    border-width: 0px;
}
h1 {
    font-family: Bebas Neue;
    font-size: 64px;
    border-style: solid;
    border-width: 0px 0px 4px 0px;
    width:33%;
    margin-bottom: 0px;
}
body {
    font-family: Verdana, sans-serif; 
    margin:0px; 
    padding:0px;
}
ol ul {
    font-style: italic;
}


/* NAVBAR */
#full-navbar {
    background-color: #1D201F;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.navLink {
    text-align: center;
}
.navLink a {
    background-color: #1D201F;
    color: #F4E9CD;
    font-family: "Trirong", serif;
    text-decoration: none;
    font-size: 16px;
    width: 6%;
    padding: 14px;
    float: left;
}
.navLink a:hover {
    color: #1D201F;
    background-color: #B7C0EE !important;
    font-family: "Trirong", serif;
    text-decoration: none;
    padding: 14px;
    float: left;
}
.navActive a{
    background-color: #468189 !important;
}
.dropbtn {
    background-color: #1D201F;
    color: #F4E9CD;
    font-family: "Trirong", serif;
    padding: 14px;
    font-size: 16px;
    border: none;
    text-align: center;
}
.dropdown {
    position: relative;
    display: inline-block;
    font-family: "Trirong", serif !important;
    background-color:#1D201F;
    text-align: center;
    width: 9%;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color:#1D201F;
    font-size: 16px;
    z-index: 1;
    width:100%;
}
.dropdown-content a {
    color:  #F4E9CD;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color:#B7C0EE;
    color: #1D201F;
}
.dropdown:hover .dropdown-content {
    display: block;
}
#navbar {
    background-color:#1D201F;
    
}
@media only screen and (max-width: 1470px) {
    .navLink a {width: 14% !important;}
    .dropdown {width: 20% !important;}
    .dropbtn {padding: 14px 14px 14px 0px !important;}
}


/* Slideshow */
.mySlides {display: none;}
img {
    vertical-align: middle;
}
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
  background-color: #717171;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@media only screen and (max-width: 300px) {
  .text {
      font-size: 11px
  }
}
.projects {
    border: 1px solid black;
    table-layout: inherit;
}


/* Portfolio Styles */
#leftcol {
    width:69%;
    padding: 0;
    margin: 0;
}
.prolink {
    width: 50px;
    text-align: center;
}

/* PFP */
.pfp {
    width:37%;
    padding-left:9%;
    filter:sepia(50%) drop-shadow(10px 10px 4px black);
}
.pfp:hover {
    animation: enlarge 0.6s forwards; 
}
@keyframes enlarge {
    from {
        transform: scale(1);
        filter: sepia(50%) drop-shadow(10px 10px 4px black);;
    }
    to {
        transform: scale(1.3);
        filter: sepia(0%) drop-shadow(10px 10px 4px black);;
    }
}

/* CAREER */
.jobinfo {
    width: 40%;
    height: 400px;
}
.job-title {
    visibility: hidden;
}

/* INSTRUCTIONS */
.gameInstructions {
  visibility: hidden;
}
    
p:hover + .gameInstructions {
  visibility: visible;
}