* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Start of navbar*/
.header {
    position: fixed;
    top: 0; /*Removes browser default padding*/
    left: 0;
    width: 100%; /*Always use 100% of the screen width*/
    padding: 8px 100px; /*first is vertical, second is horizontal. 20px default without logo image*/
    box-sizing: border-box; /*https://www.w3schools.com/css/css3_box-sizing.asp*/
    background: white; /*Can change to transparent if needed*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100; /*makes navbar always stack on top of everything else / be in front*/
}

a.logo img{
    width: 65px;
    height: 65px;
}

/*Float (Switched to flex instead)*/
.navbar-float-child {
    width: 50%;
    float: left;
    /*border: 2px solid red;*/
    white-space: nowrap;/*Forces text in one line*/
}  
.navbar-float-child a{
    font-size: 16px;
    font-weight: 700;
    text-decoration: none; /*removes blue underscore link*/
    color: yellowgreen;
}
/*--*/

/*Flex*/
.navbar-flex-container { 
    display: flex;
    justify-content: center;/*Align text in center of box*/
    align-items: center;
}

.navbar-flex-child {
    flex: 1;
}  

.navbar-flex-child:first-child {
    margin-right: 10px; /*Space between boxes*/
} 

.navbar-flex-child a{
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: yellowgreen;
    white-space: nowrap; /*Forces text in a straight line*/
}
/*--*/

.navbar a {
    position: relative;
    font-size: 18px;
    text-decoration: none;
    color: black;
    margin-left: 20px; /*Makes space between words and only towards the left*/
}

.navbar a::before { /*Makes a custom underscore*/
    content: ''; /*Needed to show underscore*/
    position: absolute;
    top: 100%; /*Places underscore below the text instead of default on top*/
    left: 0; /*Centered on text*/
    width: 0; /*Makes it invisible*/
    height: 2px; /*How tall to make the underscore*/
    background: yellowgreen;
    transition: .25s; /*Animates it*/
}

.navbar a:hover::before {
    width: 100%;
    /*Makes the underscore visible only when hovering*/
}

.undermenu {
    display: none; /*Invisible until changed*/
    /*background-color: white;*/
    background-color: rgb(250, 250, 250, 0.5);
    position: absolute;
    width: 115px;
    padding-top: 10px; /*How far down the first word appears*/
    z-index: 1000;
    box-shadow: 0px 5px 10px black; /*Shadow around the undermenu*/
}

nav>ul li:hover .undermenu { /*Display on hover.    nav> to only affect undermenu*/
    display: block;
    
}


.undermenu li {
    float: none;
    width: 100%;
    text-align: left;
    padding-top: 20px; /*Extend box*/
    padding-bottom: 20px; /*Extend box down and space between lists*/
}

.undermenu a:hover {
    border-bottom: none; /*No default underscore*/
    /*background-color: RGBa(200, 200, 200, 0.1);*/
}


header ul li {
    list-style: none; /*Removes bullet point*/
    display: inline-block; /*Displays undermenu downwards*/      /*inline to inline-block*/
}

/*https://www.youtube.com/watch?v=wHFflWvii3M*/

/*____End of navbar_____*/

/*https://www.youtube.com/watch?v=lLdzlLL33G8 Footer*/

.footer {
    /*margin-top: 150px;*/
    margin-top: auto; /*Pulls everything down*/
    width: 100%;
    padding: 30px 15%; /*Size of footer up and down and space between columns*/
    background: white;
    display: flex;
    /*Makes texts go sidewards*/
    
    /*bottom 0*/
}
.footer-main {
    /*margin-top: 150px;*/
    margin-top: auto; /*Pulls everything down*/
    width: 100%;
    padding: 10px 15%; /*Size of footer up and down and space between columns*/
    background: white;
    display: flex;
    /*Makes texts go sidewards*/
    
    /*bottom 0*/
}

.footer div {
    text-align: center; /*Aligns text in center of box*/
}

.col2 {
    flex-grow: 2; /*Makes space to the  left and right*/
    text-decoration: none;
}

.footer div h3 {
    font-weight: 300;
    margin-bottom: 30px;
    /*Space between title and sub text*/
    letter-spacing: 1px;
}

.col1 a {
    display: block; /*Displays links top to bottom*/
    text-decoration: none;
    color: black;
    margin-bottom: 10px; /*Space between links*/
}
.social-icons a{
    color: black;
}
/*.social-icons img{ ? todo change size of image
    
}*/

/*Start of Gallery*/
div.gallery{
    float: left;
    width: 50%; /*50% for 2, 33.33% for 3, 25% for 4 images side by side*/
    padding: 5px;
    
    text-align: center; /*Aligns images from the center*/
  }

  div.gallery img {
    /*width: 80%;*/ /*img size*/
    max-width: 800px; /*Max image size. Scales accordingly to keep the aspect ratio*/
    max-height: 750px;
  }
  
  div.imagedesc {
      /*color: red;*/
      padding-bottom: 40px;
  }
/*End of Gallery*/


/*Start of Vacation Gallery*/
div.vacGallery {
    float: left;
    width: 25%; /*50% for 2, 33.33% for 3, 25% for 4 images side by side*/
    padding: 5px;
    text-align: center; /*Aligns images from the center*/
  }

  div.vacGallery img {
    /*width: 80%;*/ /*img size*/
    width: 100%;
    margin: 5px;
    border: 1px solid;
  }
  
  /*div.vacGallery :hover{
    width: 45%;
    position: absolute;
    left: 525px;
  }*/

  #gallery2{
    position: relative;
  }
  
  /*div.vacimagedesc {
    color: red;
  }*/
/*End of Vacation Gallery*/

div.photoshoptext h2, div.photoshoptext p{
    text-align: center;
}

body {
    background-color: lightgray;
    /*Footer*/
    min-height: 100vh; /*Increases the min size of page*/
    /*--*/
}
#main-content{ /*Big box so footer is pushed */
    height: 67vh;
}

#plex-content{ /*Big box so footer is pushed */
    height: 95.01vh;
    width: 101%;
    border: 1px black solid;
}


#plex-video{ /*Big box so footer is pushed */
    height: 88vh;
    width: 100%;
}