/* if you're looking at this, I'm sorry.*/

/*----fonts----*/
@font-face {
  font-family: 'JetBrain';
  src: url(https://allmyfriendsarestories.neocities.org/fonts/JetBrains/JetBrainsMono-Regular.woff2);
}

@font-face {
  font-family: 'NetHands';
  src: url(https://allmyfriendsarestories.neocities.org/fonts/NetHandOriginals/fontsfree-net-hand-originals-webfont.woff);
}

/*----divs----*/

#skullheader {
  width: 100%; 
    max-width: 1000px;
    margin: auto;
  height: 375px;
  background-image: url('../images/skullheadersmall.PNG');
  background-repeat: no-repeat;
    background-size: contain;
  background-position: center top; 
  justify-content: center;
  align-content: center;
}

#flex {
  display: flex;
            }
#menu {
    top: 150px;
    text-align: center;
    font-size:2em;
    
}

#pagefooter {
    width: 80%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color:#203a6d;
    border-radius: 20px;
}
#pagefooter a {
    font-size: 1em;
    background-color: none;
    line-height: 2.4;
}

body {
  background-image: url('../images/bluecopybg.png');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  font-size: 16px;
  font-family: "JetBrain", Courier, monospace;
  color: #fffbdd;
  margin: 0;
            }   

#box {
  background-color: #ee4d98;
  border: 1px solid #e5e64a;
  padding: 30px;
    margin-top: 10px;
        margin-bottom: 10px;

  margin-left: 50px;
    margin-right: 50px;
  font-weight: normal;
  font-size: normal;
  color: #fffbdd;
    font-size: 1.5em;
    border-radius: 20px;
            }

#box2 {
  background-color: #ee4d98;
  border: 1px solid #e5e64a;
  padding: 30px;
    margin-top: 10px;
        margin-bottom: 10px;

  margin-left: 50px;
    margin-right: 50px;
  font-weight: normal;
  font-size: normal;
  color: #fffbdd;
    border-radius: 20px;
            }

#box img{
  
    margin-top: -10px;
        margin-bottom: -10px;

            }

#wrapper  {
  max-width: 1100px;
  margin: 0 auto;
            }
            
#uberwrapper  {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
            }

.redirect {
    width: 50%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 30px;
    font-size: 1.5em;
    line-height: 2em;
  justify-content: center;
  align-items: center;
    
}

.redirect img:hover{
  filter: invert(100%);
}

/*----textual healing----*/

h1 {
  position: relative;
  font-family:'NetHands';
  font-size:15px;
  line-height:35px;
  font-weight:normal;
  letter-spacing:0.2em;
  text-align:left; 
  left: -15px;
  color:#EE4D98;
  margin-top:20px;
  margin-bottom:10px;
  background-color:rgba(229, 230, 74, 1) ;
  padding-left:10px;
            }

h2 {
  position: relative;
  font-family:'NetHands';
  font-size:12px;
  line-height:30px;
  font-weight:normal;
  letter-spacing:0.1em;
  text-align:left; 
  left: 5px;
  width: auto;
  color:rgba(229, 230, 74, 1);
  margin-top:10px;
  margin-bottom:10px;
  padding-left:10px;
          text-shadow: 3px 3px 6px #132443;

            }
            
h3 {
  position: relative;
  font-family:'JetBrain';
  font-size:20px;
  line-height:15px;
  font-weight:bold;
  letter-spacing:5px;
  text-align:left; 
  left:-10px;
  width: auto;
  color:#e5e64a;
  margin-top:10px;
  margin-bottom:4px;
  padding-left:10px;
      text-shadow: 5px 5px 5px #132443;

            }
h4 {
  position: relative;
  font-family:'JetBrain';
  font-size:12px;
  line-height:15px;
  font-style: italic;
  letter-spacing:3px;
  text-align:left; 
  width: auto;
  margin-top:10px;
  margin-bottom:10px;
  padding-left:10px;
            }          

ol li{
   color: white; 
}

ul {
  list-style-image: url('../images/bullet.png');
  list-style-position: outside;
  margin-top:0px;
  margin-bottom:15px;
  margin-left:10px;
  padding-left:10px;
  padding-top:0px;
  line-height: 1.3;
            }
li {
  margin: 10px 0;
}

p {
  line-height: 1.4em;
  color: #fffbdd;
            }
/*note that links are customized in various divs, this is just the default link style*/
a:not(:has(img)) {
    font-weight: normal;
    color: #E5E64A;
    background-color: #ee4d98;
    }

a img {
    border: none;
    background: none;
    background-color: transparent;
      }

a:hover:not(:has(img))  {
    color: #E5E64A;
    background-color: #3a9b46
    } 


.button1 {
  background-color: #2E7C38;
  color: #ffffdd;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
border-radius: 8px;
    border: 1px dashed #e5e64a;
    font-family: 'JetBrain';
    
}

 .button1:hover {background-color: #ffffff;color: #2E7C38;}
 
 
/*----nonesense code for one specific page which I may have lost, idk----*/
.soup {
  position: relative;
  font-family:'NetHands';
  text-align: center;
  font-size: 20px;
  color: #ffbdd;
  text-shadow: 
 4px 4px 0 #ee4d98,
 -4px -4px #a32a63;
 margin-left: auto;
 margin-right: auto;
 margin-top: 1vh;
        }

.soup span {
 position: relative;
 display: inline-block;
 animation: animate 2s ease-in-out infinite;
 animation-delay: calc(0.05s * var(--i));
        }

        @keyframes animate {
            0% {
                transform: translateY(0px);
            }

            20% {
                transform: translateY(-20px);
            }

            40%,
            100% {
                transform: translateY(0px);
            }
        }

/*----back to top arrow----*/
.arrow-hover {
    width: 30px;
    height: 30px;
    background-image: url('../images/arrow.png'); /* Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.1s ease-in-out; /* Smooth transition */
    left: -15px;

}

.arrow-hover:hover {
    background-image: url('../images/arrowpress.png'); /* Change on hover */
}

/*----image rotate on hover----*/
.hover-rotate {
  min-width: 200px;
  max-width: 600px;
  width: 100%;
}

.hover-rotate img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

/*----left sidebar----*/
#bbox {
  position: relative;
  top:0px;
  width: 200px;
  padding: 20px;
  background-image: url("../images/pinkskullbg.PNG");
  outline-color: #e5e64a;
  outline-style: dashed;
  outline-width: 1px;
  outline-offset: 0;
  order: 1;
            }

/*----main content space----*/
#main {
  position: relative;
  margin-top: -30px;
    margin-left: auto;
    margin-right: auto;
  padding-left: 50px;
      padding-right: 50px;

  width: 80%;
  background-color: rgba(54, 91, 161, 0.75);
  outline-color: #e5e64a;
  outline-style: dashed;
  outline-width: 1px;
  outline-offset: 0;
  color: #e5e64a;
  order: 2;
            }

#main a:not(:has(img)) {
    font-weight:normal;
    color: #E5E64A;
    background-color: #263F70;
    letter-spacing: 3px;
    text-decoration: underline wavy #e5e64a 2px;
    }
            
#main a:hover:not(:has(img))  {
    color: #E5E64A;
    background-color: #3a9b46;
        text-decoration: overline wavy #e5e64a 2px ;
    } 


hr {
  border-width: 1px 0 0 0;
  border-style: dashed;
  border-color: #e5e64a; 
            }   

/*----i forget what this code does :) ----*/
th, td {
  padding: 10px;
  text-align: center;
}
th {
  background-color: #ee4d98;}
tr:nth-child(even) {background-color: rgba(238, 77, 152, 0.2);}
tr:nth-child(odd) {background-color: rgba(238, 77, 152, 0.5);}
tr:hover {background-color: #ee4d98;}


img {
  max-width: 100%;
  height: auto;
  background-color: transparent;
            }
            
.right {
  float: right;
  margin-left: 1em;
            }
            
.left {
  float: left;
  margin-right: 1em;
            }
            
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
            }

.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
            }



/*----sexy wiggly link effect for the top nav bar & footer----*/

a.menu {
  background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  color: #E5E64A;
  text-decoration: none;
    font-size: 25px;
        background-color: rgba(58, 155, 70, 0.7);
  margin: 1px;
line-height: 1.6;
 padding: 5px;  
    border-radius: 5px;
}

a.menu:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
  text-decoration: none;
}













/*-----Responsive design stuff, mobile friendly-ish----*/

@media(max-width:685px){
  
    .small {
    max-width: 60%;
    height: auto;
  }
  
  .body {
   width:685vw;
  }
  
  .header{  
  position:absolute;
  width: 675px;
  height: 572px;
  top:10px;
  left:165px;
  margin-bottom:20px;
  border: 0px solid blue;
  background-position:center;
  background-repeat: no-repeat;
  
}
  #ifrm1 {
    border-top-left-radius: 45px;
border-top-right-radius: 45px;
    overflow-y: auto;
    position: absolute;
    border-left: 1px solid #094d51;
    border-right: 1px solid #094d51;
     padding: 0px;
    width:621px;
    height:4000vw;
    top: 495px;
    left:217px; 
                }
#flex {
        flex-wrap: wrap;
                }
#skullheader {
        background-image: url('../images/badgesmall.png');
        background-position: center; /* Center the image */
        background-repeat: no-repeat; 
        background-size: contain; 
        width:100%;
}

 #bbox {
        width: 100%;
        padding-top: 10px;
        padding-left: 20%;
        margin: 10px;
                }
    
#main {
       position: relative;
       padding: 10px;
       margin-bottom: 100px;
       margin-right: 10px;
       margin-left: 10px;
       width: 95%;

                }


a.menu {
    background-color: #3a9b46;
  margin: 1px;
line-height: 1.6;
 padding: 5px;  
  color: #E5E64A;
  text-decoration: none;
    font-size: 25px;
    border-radius: 5px;
}