/* 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." */

/* ----------------- This is for the custom font and page margins. ----------------- */
   
   p{
margin-top: 0em ;
margin-bottom: 0em ;
}

body{
font-family: "din-condensed", sans-serif;
font-weight: 400;
font-style: normal;
  background-color: #81d6f7;
  color: black;
  background-image: url("assets/websitebg2.png"); /*url("assets/ebBG.png");*/
  background-size: 80%; /*cover;*/
  cursor: url('/Cursors/Cursor.svg') 8 8, auto; /*mSaturn1.png*/
  /*-webkit-animation: cursor 400ms infinite; */
 /* animation: cursor 400ms infinite; */
  /*cursor: url('/Cursors/Christmas Cursor.png'), default; */
}

 /* @-webkit-keyframes cursor {
  0% {cursor: url("Cursors/mSaturn1.png"), auto;}
  100% {cursor: url("Cursors/mSaturn2.png"), auto;}
} 

@keyframes cursor {
  0% {cursor: url("Cursors/mSaturn1.png"), auto;}
  100% {cursor: url("Cursors/mSaturn2.png"), auto;}
}
*/

@font-face {
    font-family: 'din_condensedbold';
    src: url('din_condensed_bold-webfont.woff2') format('woff2'),
         url('din_condensed_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'apple_kid';
    src: url('fonts/apple_kid.ttf') format('truetype');
    src: url('fonts/apple_kid.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'lumine_hall';
    src: url('fonts/lumine_hall.ttf') format('truetype');
    src: url('fonts/lumine_hall.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'fourside';
    src: url('fonts/fourside.ttf') format('truetype');
    src: url('fonts/fourside.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}
  
  /* Original BG */
  
  /*background-color: #81d6f7;
  color: black;
  margin: 0;
  margin-top: -80;
  background-image: url("websitebg.png");
  background-size: 15%; /*cover;
  background-position:center;
  background-repeat: repeat-x, repeat-y;
  /*cursor: url('/Cursors/Christmas Cursor.png'), default; */
  
}
  /*a:hover{ cursor: url('/Cursors/Christmas Cursor 2.png'), pointer; } */
  
/* HOME PAGE */

.homePageDesktop {
  background-position: center; 
  background-size: auto 100vh;
  align-items: start;
  position: relative; 
}

.testBox {
  display: flex;
  justify-content: center;
}

/* PAGE STUFF */

.newsTitle { 
      margin-left:0px;
      margin-right:0px;
      margin-top:10px;
    }
    
.aboutPhoto {
    margin-top:10px;
  }
  
.aboutPhotoAnim {
  width: 14%;
  margin-top: 10px;
  left: 78%;
  image-rendering: pixelated;
  filter: drop-shadow(4px 7px 0px rgba(0, 0, 0, 0.5));
  position: absolute;

  
  }
    
/* SCROLLING TEXT */

.scrolling-text {
  width: 100%;
  height: 50px;
  overflow: hidden;
  position: relative;
  background-color: #1e1f36;
  color: #FFFFFF;
  font-family: "apple_kid";
  font-size: 12px;
  }

.scrolling-text p {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 30px;
  margin: 0;
  line-height: 55px;
  /*text-align: center;*/
  animation: scrolling 20s linear infinite;
    }
    
     @media screen and (max-width: 788px) {
            .scrolling-text a:not(:first-child) { display: none; }
            .scrolling-text a.icon {
                float: right;
                display: block;
                font-size: 5px;
            }
        }

        @media screen and (max-width: 788px) {
            .scrolling-text.responsive { position: relative; }
            .scrolling-text.responsive .icon {
                position: fixed;
                right: 10px;
                top: 10px;
            }
            .scrolling-text.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }

@keyframes scrolling {
      0% {
        transform: translateX(100%);
      }
      
      100% {
        transform: translateX(-100%);
      }
    }



/* Misc */

#roundedBorder {
  border-radius:30px;
  background: #fa7878;
  padding: 20px;
  width: 575px;
  text-align: center;
  float: center;
  margin: auto;
}

#dateStamp {
  border-radius:60px;
  background: #fa7878;
  padding: 20px;
  display: inline-block;
  width: 200px;
  text-align: center;
  float: center;
  margin: auto;
}


/* customizable snowflake styling */

.snowflake {
  color: #fff;
  font-size: 1.2em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}
 
.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}

.full-size-img {
  /*background-image: url("websitebg.png");*/
  background-size: cover;
  background-position: center;
  background-repeat: repeat-x;
  position: relative;

}

.dropShadow { 
  filter: drop-shadow(4px 4px 1px rgba(0, 0, 0, 0.5)); /* For everything that needs a drop shadow of course */
}

.homePageLogo {
  margin: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: bold;
}

.homePageHeader {
  display: flex;
  width: 100%;
  justify-content: space-between;
}


/* ----------------- This is for the drop shadows. ----------------- */

.card {
  box-shadow: 0 800px 800px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.dropshadowimg {
    box-shadow: 5px 5px 5px #999; 
} 

.dropshadow {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

/* ----------------- This is for the photo on About. ----------------- */

.avatar {
    display: block;
    border-radius: 200px;
    box-sizing: border-box;
    background-color: #DDD;
    border: 5px solid #fa7878;
}

.circleborder {
border: 5px solid #fa7878;
border-radius: 100%;
display: inline-block;}

/* ----------------- This is for the TOP navigation bar. ----------------- */

 body .content .sidebar {
background-color: #333;
float: left;
margin: 0;
padding: 28px 0;
width: 200px;
margin-left: 0px;

}

/* Add a black background color to the top navigation */

.topnav {
  background-color: #67a5eb; /*#333; #eb3e31; #1e1f36 #57b8ff #33a9a5 */ 
  top: 0px;
  width: 100%;
  overflow: hidden;
  height: -1000px;
  text-align: center;
  display: block; /* this is what keeps the navbar from displaying horizontally. Used to be flex. */
  justify-content: center;
  display: flex;
  margin-bottom: -40px;
  font-family: "apple_kid";
  filter: drop-shadow(0px 7px 2px rgba(0, 0, 0, 0.3));

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size:30px;
  height: -100px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav .active {
background-color: #fa7878; /*#06bd1e;*/
color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  
}

 @media screen and (max-width: 788px) {
            .topnav a:not(:first-child) { display: none; }
            .topnav a.icon {
                float: right;
                display: block;
            }
        }

        @media screen and (max-width: 788px) {
            .topnav.responsive { position: relative; }
            .topnav.responsive .icon {
                position: fixed;
                right: 10px;
                top: 10px;
            }
            .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }

/* -------------- The dropdown container -------------- */

.dropdown {
  float: left;
  overflow: hidden;
  z-index: 9999;
  color:black
}

.dropbtn:hover, .dropdown:hover, .dropbtn {
  background-color: #ddd;
  color: black;
  z-index: 9999;
  
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 30px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: fixed;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9999;
}

.dropbtn:hover, .dropdown:hover, .dropbtn{
  background-color: #ddd;
  color: black;
  z-index: 9999;
  
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover, .dropdown a:hover, .dropbtn {
  background-color: #ddd;
  color:#fa7878;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.topnav {
  position: fixed; /* Set the topnav's position to relative */
  z-index: 2; /* Increase the z-index value of the topnav to be above the scrolling text bar */
  
}

.scroll-bar {
  z-index: 1; /* Increase the z-index value of the scrolling text bar */
}

#home{  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}
#music_player {  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}
#links{  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

/* ----------------- This is for the BOTTOM navigation bar ----------------- */

 body .content .sidebar {
background-color: #67a5eb; /*#eb3e31;*/
float: left;
margin: 0;
padding: 0 0;
width: 200px;
position: fixed; 
margin-left: 0;

}

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
  background-color: #67a5eb; /*#333 #eb3e31; #57b8ff*/
  overflow: hidden;
  width: 100%;
  margin-top: 100px;
  bottom: -10%;
  display: flex;
  justify-content: flex-end;
  left: 0;
  right: 0;
  filter: drop-shadow(0px -7px 2px rgba(0, 0, 0, 0.3));
  height: 2rem;
  
}

/* Style the links inside the navigation bar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #f2f2f2;
color: black;
}

/* Add a color to the active/current link */
.navbar a.active {
  background-color: #333;
  color: white;
}

@media (max-width: 788px) {
  .navbar {
    flex-direction: column; /* Stack links vertically */
    margin-top: 0; /* Remove top margin */
  }

  .navbar a {
    padding: 10px; /* Adjust padding for smaller screens */
  }
  .overlapfix { 
    width: 70% !important; 
    }
}
}

@media screen and (max-width: 768px) {
    .navbar {
        /* Adjust styles for mobile */
    }
}

.navLinksBottom
{
  display: flex;
  scale: 50%;
  top: -16px;
  position: absolute;
  right: -68px;
}

/* HOMEPAGE VARIANT */
.navbarHome /* HOMEPAGE VARIANT */
  {
  background-color: #67a5eb;
  overflow: hidden;
  width: 100%;
  margin-top: 100px;
  bottom: 0%;
  display: flex;
  justify-content: flex-end;
  left: 0;
  right: 0;
  filter: drop-shadow(0px -7px 2px rgba(0, 0, 0, 0.3));
  height: 2rem;
  position: fixed;
  }

/* Style the links inside the navigation bar */
.navbarHome a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.navbarHome a:hover {
  background-color: #f2f2f2;
color: black;
}

/* Add a color to the active/current link */
.navbarHome a.active {
  background-color: #333;
  color: white;
}

/* ----------------- This is for the text alignment ----------------- */

.a {
  text-align: center;
}

.b {
  text-align: left;
}

.c {
  text-align: right;
}

.justify {
  text-align: justify;
  float: left;
}

.img {
  float: right;
  margin: 10px;
  
}


/* ----------------- This is for horizontal images ----------------- */

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

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

/* ----------------- This is for the carosuel ----------------- */

.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.7s;
}

.image-container span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);

}

.image-container span img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.btn-container {
  position: relative;
  width: 80%;
  
}

.btn {
  position: absolute;
  bottom: -80px;
  background: #f27679;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#prev {
    left: 20%;
}

#next {
    right: 20%;
}
.btn:hover {
  filter: brightness(1.5);
}

/* ----------------- This is for the image gallery ----------------- */

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

.app_container{
  width:600px;
  margin:25px auto;
}

.buttons{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f27679;
  color: #fff;
}
.prev, .next{
  width: 100px;
  height: 50px;
  font-size: 1em;
  border: none;
  border-radius: 10px;
}
.prev:hover, .next:hover{
  background-color:gray;
  color:black;
}
.info{
  font-size: 2em;
  font-weight: bold;
}

/* ----------------- This is for the NEW image gallery ----------------- */

.slider{
    margin:50px auto;
    width:50%;
}

.img-box img{
  width:100%;
}

.btn{
  border:none;
  outline:none;
  padding: 10px 30px;
  cursor: pointer;
  margin: 10px auto;
  background: #f27679;
  color: #fff;
}

 /* ----------------- This is for the new NEW image gallery ----------------- */


.image-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  width:10%;
}

.button {
  padding: 10px;
  margin: 10px auto;
  background: #f27679;
  color: #fff;
  border: none;
}

 /* ----------------- This is for the star BG ----------------- */

/* Center and display the image & text side by side */
.rectangle-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.rectangle-content img {
   margin-right: 50px;
   max-width: 100% /*make the image fit in the container*/
}

 /* ----------------- Scrollbox Stuff ----------------- */
 
.scrollbox {
  background: #1e1f36;
  border: 2px solid #00cde3;
  position: absolute;
  border-radius: 8px;
  display: flex;
  padding: 15px;
  margin-top: 20px;
  width: 25%;
  height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 65%;
  top: 5.5rem;
  color: white;
  font-family: "apple_kid";
  text-align: left;
  }
  
.box { 
  background: #1e1f36;
  border: 2px solid #00cde3;
  position: absolute;
  border-radius: 8px;
  display: flex;
  padding: 15px;
  width: 12%;
  height: 107px;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 65.5rem;
  top: 1rem;
  color: white;
  font-family: "apple_kid";
  }
  
  .box2 { 
  background: #1e1f36;
  border: 2px solid #00cde3;
  position: absolute;
  border-radius: 8px;
  display: flex;
  padding: 15px;
  width: 12%;
  height: 107px;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 80.5rem;
  top: 1rem;
  color: white;
  font-family: "apple_kid";
  }
  
/* ------- HOMEPAGE STUFF ------ */

.welcome {
  margin: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: bold;
  color: white;
  font-family: "apple_kid";
}


.buttonGrid {
  line-height: 0;
  margin: auto auto;
  text-align: center;
  background: #1e1f36;
  border: 2px solid #00cde3;
  border-radius: 8px;
  position: absolute;
  padding: 15px;
  width: 25%;
  height: 6rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 65%;
  top: 27.8rem;
  overflow: auto; /* TEMPORARY FIX */
}

.siteButtons {
  display: flex;
  background-color: transparent;
  align-items: flex-start;
  padding: 1px;
  }
  
.helloBox {
  background: #1e1f36;
  border: 2px solid #00cde3;
  position: absolute;
  border-radius: 8px;
  display: flex;
  padding: 15px;
  margin-top: 12px;
  width: 25%;
  height: 555px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 2.5rem;
  top: 9rem;
  color: white;
  font-family: "apple_kid";
}

.bear {
  display: flex;
  position: absolute;
  bottom: -3%;
  left: -11%;
  width: 118%;
  height: 92%;
}

.title {
  position: absolute;
  left: 20%;
  width: 224px;
  height: auto;
  font-size: x-large;
  }
  
.pGraph {
  position: absolute;
  left: 3.6%;
  width: auto;
  height: auto;
  font-size: 20px;
  top: 3.5rem;
  z-index: 1;
  text-align: left;
}

/* ABOUT PAGE */

.aboutPage {
  background-position: center;
  align-items: start;
  position: relative;
  top: -3rem;
}

.copyright {
  color: white;
  width: auto;
  position: absolute;
  left: 0.5rem;
  bottom: 0rem;
  z-index: 1;
  font-size: 15px;
  }
  
/*.musicPage{
  background-position: center;
  align-items: flex-start;
  position: relative;
  top: -3rem;
  display: flex;
  } */
  
.song {
  position: absolute;
  left: .5rem;
  }
  
  
/* JUNK PAGE GRID */

.grid {
  margin:20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  align-content: center;
  display: center;
 
}

.item{
  background-color: #fa7878;
  aspect-ratio: 1;
}

.grid img {
  width: 90px;
  height: 118px;
  /* */
  /* fill the item space*/
  min-height: 100%;
  min-width: 100%;
  /* */
  display: block;
  object-fit: cover; /* avoid distortion*/
  
}

/* HITCOUNT */
.visitorTitle {
  display: flex;
  left: 1.5rem;
  top: 1.5rem;
  position: absolute;
  height: auto;
  width: auto;
}
  
.visitorCount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;
  width: auto;
  image-rendering: pixelated;
  left: 3rem;
  position: absolute;
  top: 3.5rem;
  scale: 200%;

  }
  
.visitorCountBox {
  background: #1e1f36;
  border: 2px solid #00cde3;
  position: absolute;
  border-radius: 8px;
  display: flex;
  padding: 15px;
  margin-top: 12px;
  width: 10%;
  height: 6.2rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 65%;
  top: 20rem;
  color: white;
  font-family: "fourside";
  font-size: 98%;
  overflow: auto; /* TEMP FIX */
  
  }
  
.rightBox {
  position: absolute;
  left: -5%;
  top: 6%;
  height: 10%;
  width: 114%;
  }
  
.guestBook {
  position: absolute;
  display: flex;
  left: 76%;
  font-family: "fourside";
  padding: 15px;
  background: #1e1f36;
  border: 2px solid #00cde3;
  border-radius: 8px;
  color: white;
  top: 20.7rem;
  text-decoration: none;
  width: 14%;
  }