body {
  background-color: white;
  background-image: url("/purpleclouds.jpg");
  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;
}





.colorchange {
  animation: color-change 1s infinite;
}

@keyframes color-change {
  0% { color: #b0ebff; }
  50% { color: #ebfaff; }
  100% { color: #b0ebff; }
}





.outlined {
  width: 390px;
  outline: inset;
  outline-offset: 2px;
} 



.sidebarframe {
  position: fixed;
  
}

/* Mobile: Moves sidebar to the bottom of the entire page content */
@media (max-width: 767px) {
  .sidebarframe {
    position: relative; /* Removes the "stickiness" so it sits in the natural flow */
    width: 100%;        /* Full width for mobile */
    height: auto;       /* Height adapts to content */
    top: auto;          /* Reset desktop top position */
    left: auto;         /* Reset desktop left position */
    margin-top: 20px;   /* Optional: adds space between content and sidebar */
  }
}



.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: #19043d; 
  background-image: url("/sidebar.jpg");
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 40px;
  color: #9c6092;
  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: 255px; /* 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: #412a6d;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  opacity: 1.0;
  width: 400px;
  color: white;
  border-radius: 25px;
  outline-style: solid;
}

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

.textboxA a:link {
  color: white;
}

/* visited link */
.textboxA a:visited {
  color: white;
}

/* mouse over link */
.textboxA a:hover {
  color: black;
}

/* selected link */
.textboxA a:active {
  color: white;
}





.textboxB {
  margin: 50px;
  margin-left: 120px;
  background-color: #92355e;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  opacity: 1.0;
  width: 400px;
  border-radius: 25px;
  color: white;
  outline-style: solid;
}

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

.textboxB a:link {
  color: white;
}

/* visited link */
.textboxB a:visited {
  color: white;
}

/* mouse over link */
.textboxB a:hover {
  color: black;
}

/* selected link */
.textboxB a:active {
  color: black;
}


.date {border-style: outset;} 




/*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: 475px;
  width: 160px;
}


.right1 {
  position: fixed;
  top: 480px;
  margin-left: 730px;
}

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

.right3 {
  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% }
}










/* art gallery */
/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  width: 200px;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}