/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   
 


body {
  background-color: white;
  background-image: url("grovyle1.jpg");
  background-repeat: repeat;
  background-position: right top;
  background-attachment: fixed;
  color: black;
  font-family: "Trebuchet MS", Helvetica, sans-serif;}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
  font-size: 35px;
}


/*link Styling*/
a:link {
  color: #4f6d87;
  text-decoration: underline;
}


a:visited {
  color: black;
  text-decoration: underline;
}


a:hover {
  color: #689eb1;
  text-decoration: underline;
}




/* fun color changing font lmao */
.colorchange {
  animation: color-change 1s infinite;
}

@keyframes color-change {
  0% { color: #3b3c51; }
  30% { color: #546a69; }
  60% { color: #4e6e87; }
  90% { color: #435271; }
  100% { color: #3b3c51; }
}





.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 250px; /* width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #3b3c51; 
  background-image: url("/sidebar.jpg");
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 40px;
  color: #7abcb0;
  padding: 6px 6px 6px 6px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 6px 6px 6px;
  text-decoration: none;
 
  color: #fff;
  
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
  
}

/* Style page content */
.main {
  margin-left: 250px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 10px;}
}








/* Textboxes */
.textboxA {
  margin: 50px;
  margin-left: 80px;
  background-color: #7abcb0;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  opacity: 1.0;
  width: 400px;
  border-radius: 25px;
}

.textboxA p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}


.textboxB {
  margin: 50px;
  margin-left: 120px;
  background-color: #618c88;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  opacity: 1.0;
  width: 400px;
  border-radius: 25px;
}

.textboxB p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}


.date {border-style: outset;}  




.spoiler, .spoiler2{ 
  color: black; 
  background-color:black;
}

.spoiler:hover{
  color: white;
  }

.spoiler2:hover { 
  background-color:white; 
  }
  
  
  
  
  table, th, td {
  border: 1px solid black;
}





.gallery {
  margin: 5px;
  
  float: left;
  width: 180px;
}

.gallery:hover {
  
}

.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
  color: white;
}









/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 300px;
  background-color: #3b3c51;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  top: 25%;
  left: 0%;
  margin-top: 30px;
}



/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}













/*floating images*/

.sticky1 {
  position: fixed;
  position: absolute;
  top: 70;
  width: 200px;
}

.bigcinna {
  position: fixed;
  position: fixed;
  top: 30px;
  margin-left: 536px;
  width: 550px;
}

.sticky2 {
  position: fixed;
  position: absolute;
  top: 200;
  margin-left: 450px;
  width: 200px;
}


.sticky2 {
  position: fixed;
  position: absolute;
  top: 200;
  margin-left: 460px;
  width: 200px;
}


.pool1 {
  position: fixed;
  top: 380px;
  margin-left: 670px;
}

.pool2 {
  position: fixed;
  top: 390px;
  margin-left: 760px;
}

.pool3 {
  position: fixed;
  top: 380px;
  margin-left: 850px;
}
















/* set the body to flex, and allow the elements to wrap
   https://www.w3schools.com/css/css3_flexbox.asp                 */
body {
  display: flex;
  flex-wrap: wrap;
}
/* media query to change the layout at screen sizes under 910px.
   i chose 910px because it was a little over the point where the
   the horizontal scroll bar appears.
   https://www.w3schools.com/css/css_rwd_mediaqueries.asp         */
@media only screen and (max-width: 910px) {
  /* remove the margin on the body so the nav background is     
     is full width                                                */
  body {
    margin: 0;
  }
  /* set both the sidenav and main divs to full width             */
  .sidenav, .main {
    width: 100%;
  }
  /* set the order of the divs. you can swap these numbers around
     if you wish.
     https://www.w3schools.com/cssref/css3_pr_order.asp
     remove the left margin that made room for the sidenav on 
     desktop                                                      */
  .main {
    order: 1;
    margin-left: 0;
  }
  /* make the side nav auto height and change it's position from
     fixed to relative
     https://www.w3schools.com/css/css_positioning.asp
     reenabled auto horizontal scrolling in the rare case the user's
     phone is super old.                                          */
  .sidenav {
    order: 2;
    height: auto;
    position: relative;
    overflow-x: auto;
  }
  /* for every element inside .main, apply a 10px margin
     vertically to space the elements out and apply an auto margin 
     horizontally to center them.
    https://www.w3schools.com/css/css_margin.asp                  */
  .main > * {
    margin: 10px auto;
  }
  .bigcinna, .pool1, .pool2, .pool3 {
    width: 0%;}
    .sticky1, .sticky2 {
      width: 20% }
}