/* 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." */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Gluten:wght@100..900&family=Short+Stack&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=The+Girl+Next+Door&display=swap');

body {
  background: black;
  color: white;
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 3vw;
  text-shadow: 2px 2px 4px #0F2A30;
  overflow: auto;
  cursor: default;
}

/* Media query for screens wider than 768px (e.g., tablets and desktops) */
@media only screen and (min-width: 768px) {
    body {
      background: black;
      color: white;
      font-family: "Comic Neue", cursive;
      font-weight: 400;
      font-style: normal;
      font-size: 1.3vw;
      text-shadow: 2px 2px 4px #0F2A30;
      overflow: hidden;
      height: 100%;
      cursor: default;
    }
}



a:any-link {
  color: PaleGreen;
  text-decoration: none;
}
a:hover {
  background-color: SeaGreen;
  color: PaleGreen;
}

figcaption {
  text-align: center;
  font-size:1vw;
  font-style:italic;
  padding-top:0.3vw;
  }


ul {
  margin-left: 4vw;
  padding: 0;
}
/*========================Text Select Color==================================*/
::selection {
    background: seagreen;
    color: white;
    text-shadow: inherit;
}

::-moz-selection {
    background: seagreen;
    color: white;
    text-shadow: inherit;
}
/*========================The Issue of Ugly IMG links==================================*/
.imglink:any-link {
  color: brown;
  }
.imglink:hover {
  background-color: transparent;
  color: brown;
  }
  
/*========================Spoiler==================================*/
.spoiler {
  color:transparent;
  background-color:black;
  }
.spoiler:hover, .spoiler:active {
  color: White;
  }
/*========================SMALL TEXT==================================*/
.smalltext {
  font-size: 1.5vw;
}

/* Media query for screens wider than 768px (e.g., tablets and desktops) */
@media only screen and (min-width: 768px) {
    .smalltext {
      font-size:1vw
    }
}
/*========================CUSTOM SCROLLBAR==================================*/
/* width */
::-webkit-scrollbar {
  width: 1vw;
}

/* Track */
::-webkit-scrollbar-track {
  background-image: linear-gradient(transparent);
  border:  inset;
  border-image: linear-gradient(to bottom, #00040A, #07260E, #21473C) 1;
  border-radius: 50px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background-image: linear-gradient(#29444A, #3F6E4A, #418572);
  border:  outset #286B59;
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(#2B5963, #408751, #429E84);
  border:  outset #2A856C;
  border-radius: 50px;
  cursor: pointer;
}
/*========================MARQUEE MY BELOVED==================================*/
.marquee {
  font-size: 4vw;
  width: 100%;
  line-height: 0.01vw;
  color: seagreen;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/*========================TILTING TEXT==================================*/
#scream {
        animation-name: hi;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        line-height: 0em;
        bottom: -5px;
        position: relative;
        font-size: 2rem;
        text-align: center;
        font-family: sant joan;
}
                          
@keyframes hi {
    0% {
        transform: rotate(5deg);
    }
                          
    50% {
        transform: rotate(-5deg);
    }
                          
    100% {
        transform: rotate(5deg);
    }
}
                  


/*========================GLOWING TEXT==================================*/
          @keyframes glow {
              0% {
                  text-shadow: 0 0 8vh #3FF0AC;
              }           
               50% {
                   text-shadow: 0 0 3vh #3ED49A;
              }   
              100% {
                   text-shadow: 0 0 8vh #3FF0AC;
              }
          }
                            
          @-webkit-keyframes glow {
              0% {
                 text-shadow: 0 0 6vh GreenYellow;
              }
                                
              50% {
                  text-shadow: 0 0 0;
              }
                                
              100% {
                   text-shadow: 0 0 6vh ;
              }
          }
                            
          #glow {
            background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: palegreen;
            font-weight:bold;
            font-size:2em;
            -webkit-animation: glow 2.0s linear infinite;
            -moz-animation: glow 2.0s linear infinite;
            -ms-animation: glow 2.0s linear infinite;
            -o-animation: glow 2.0s linear infinite;
            animation: glow 2.0s linear infinite;
        }        
/*========================OUTLINE TEXT==================================*/
.outlinetext {
  font-size:10vw;
  text-shadow:none;
  -webkit-text-fill-color: transparent; 
  -webkit-text-stroke-width: 0.4px; 
  -webkit-text-stroke-color: LemonChiffon;
  }

/* Media query for screens wider than 768px (e.g., tablets and desktops) */
@media only screen and (min-width: 768px) {
    .outlinetext {
      font-size:4vw;
      text-shadow:none;
      -webkit-text-fill-color: transparent; 
      -webkit-text-stroke-width: 0.4px; 
      -webkit-text-stroke-color: LemonChiffon;
      }
}
/*========================SIDE BAR BY MS/MR TEMPLATERR==================================*/
nav{
      z-index: 99;
      position: fixed;
      left: 75%;
      padding: 10px;
      height: 200%;
      width: 22%;
      box-shadow: 0px 0px 0px 0px SeaGreen;
      background-image: linear-gradient(#0F2A30, #255330, #286B59);
      background-color:#24001F;
      margin-top: -20px;
}


/* Media query for screens wider than 768px (e.g., tablets and desktops) */
@media only screen and (min-width: 768px) {
    nav{
      z-index: 99;
      position: absolute;
      left: 85%;
      padding: 10px;
      height: 100%;
      width: 12%;
      box-shadow: 0px 0px 0px 0px SeaGreen;
      background-image: linear-gradient(#0F2A30, #255330, #286B59);
      background-color:#24001F;
      margin-top: -20px;
    }
}

.navlink{
}

.sidelink, .sidelink:visited  {
  background-image: linear-gradient(#1C4E59, #337141, #38997F);
  border: outset #286B59;
  color: palegreen;
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
  text-align: center;
  text-decoration: none;
}

.sidelink:hover, .sidelink:active {
  background-image: linear-gradient(#0F2A30, #255330, #286B59);
  border: inset #286B59;
}

/*==========================detail symbols================================*/

details > summary {
    padding: 0.6vw;
    list-style-type: ' ';
}

details[open] > summary {
    padding: 0.6vw;
    background-image: linear-gradient(#0F2A30, #255330, #286B59);
    border-radius:0.5vw;
    list-style-type: ' ';
}

details {
    background-image: linear-gradient(#0F2A30, #255330, #286B59);
    border: outset seagreen;
    border-radius: 0.5vw;
    padding: 0.5rem;
}

/*========================TEXT ON IMAGE FROM w3schools==================================*/
/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: brown;
  text-shadow: 2px 2px 4px white;
  font-size: 5vw;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}