:root {
  --blue1: #708DAC;
}

  
.int1 { 
background-color:#F3F6FA;
  text-align:left;
 padding:5px; 
 font-family:mbytepc;
 color:#A9C4DA;
      text-shadow: 0 0 5px #99B7FF;
 background-image: linear-gradient(to left, #DCF3FF, #FFFFFF);      

}

.whitebox {
  background-color: white;
padding: 5px;
margin: 5px;
}

.interest {
  padding: 5px;
  margin:5px;
  text-align: left;
  overflow: auto;
height: 320px;
  font-size:13px;
              /* (c) reijeoh */
background-color:white;
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
          text-shadow: 0 0 5px #99B7FF;
border-radius:5px;
border-width: 3px;
size:9px;
border-color: white;
border-style: solid;



    

    
}

.shipdesc {
  font-family: mbytepc;
  font-size: 10px;
  text-align:left;
  color:#708DAC;
  margin: 5px;
}
.shiptitle {
  margin-top: 3px;
  font-family: dos;
  font-size: 20px;
  color: #FFFFFF;
  position: relative;
  margin-bottom: 2px;
  text-shadow: 
    -1px -1px 0 var(--blue1),
     1px -1px 0 var(--blue1),
    -1px  1px 0 var(--blue1),
     1px  1px 0 var(--blue1);
     text-align: left;
     margin-left: 5px;
      
      animation: jerky 0.5s infinite;
       background-color: transparent;
  background-image: radial-gradient(#C4DFEE 30%, transparent 70%);
    }



    @keyframes jerky {
      0% {
        transform: rotate(2deg);
      }

      50% {
        transform: rotate(2deg);
      }

      51% {
        transform: rotate(-2deg);
      }

      100% {
        transform: rotate(-2deg);
      }
    }


.interest1 {
   display: grid;
grid-template-columns: 5fr 6fr;
gap: 5px;
  margin-top: 5px;
 padding: 5px;
  align-items: stretch;
  

}
#bg {
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23def3ffff'/><path d='M0 10h20z'   stroke-width='11' stroke='%23e8f8ffff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
padding:5px;
height:auto;
}


.bordergr {
   border-radius: 5px;
border: 1px solid #CAD2C5;
}

.inttitle {
    font-family:dos; color:#7B98B6;;

}
.inttext {  color:#5B6E7F; font-family: mbytepc; }


.rows {
 grid-template-rows: 100px auto 1fr;
 overflow: auto;

}

.track {
  display: inline-block;
  animation: scroll 28s linear infinite;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
} 
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

#shipstext {
  background-image: linear-gradient(to bottom, #FFFFFF, #EEF9FF);       width: 90%;
       margin-left:auto;margin-right:auto;
       height: 92%;
       padding: 5px;
       border-radius:5px;
       overflow:auto;
}

#ships  { 
   padding:5px;   text-align:center;
   color: #84A4C5;
   font-family: mbytepc;
   font-size: 15px;
   position: relative;
   bottom:10px;
   width:85px;
   background-color:white;
       box-shadow: 0 0 5px 5px white;
margin-left: auto;
margin-right: auto;
margin-top:15px; margin-bottom:10px;
;

   }
   
   a {
  color: #84A4C5; /* Change link color to green */
}
 
   #shipsongsbg {
     background-color: #EBF4FF;

text-align: center;
height: auto;
   }
   
   #shipsongs { 
        display: grid;
grid-template-columns: 1fr 2fr;
margin-left:auto;
margin-right:auto;
 align-items: stretch;
height: 300px;
margin-bottom:8px;
margin-top:5px;

}

.blah {
  margin-left:10px;
}

#who {
  size:8px;
  font-family:mbytepc;
  margin-left:auto;
  margin-right:2px;
    top: 10px;
  left: 20px;
  position:relative;
}

#lbbg {
  margin-top: 10px;
}

.fanlisting {
  height: 40px;
  filter: grayscale(80%);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);

background-color: #B2CFEB;
transition: .25s ease-in-out; mix-blend-mode: lighten; opacity: 0.6; 


}
  
.fanlisting:hover {
  filter: saturate(200%);
transition: .25s ease-in;
      transform: scale(1.1);
  
}


#lace31 {
   background-image: url(
gifs/whiteplaid.png
);
             background-size: auto 20px;
  background-repeat: repeat-x;
  
  width:100%;
  height: 20px;
}

.songsplit {
  margin:auto; 
  margin-top:5px;
  color: #466585;
  font-family:Nintendo;
  font-size:15px;
 
  display:grid; 
  grid-template-columns:1fr 1fr .4fr;
  background:white;
  width: auto;
  padding:2px;
}


.left {
  text-align: left
}
.right {
  text-align: right
}


#directoryborder2 {
  border-bottom: 1.5px #83A4BD dotted;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 3px;
width: 95%;
}


.floating {
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
}

.blueborder5{
border-width: 7px; 
border-style: solid; 
border-image: url("blueborder5.png") 11 fill round;       
}
  
#bow {
  height:75px;
}
  
  
.spin { animation: spin 30s linear infinite;
    /* Ensure the image is treated as a circle if it's square */
    border-radius: 50%; 
    position: relative;

}
#circlelace {
  z-index:-1;
    right:30px;
    bottom:270px;
}
.laced2 {
  border-width: 3px;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;         
      border-style: inset;
        height: 40px;
filter: sepia(60%);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
margin:5px;
transition: .25s ease-in-out;

  opacity: .4; 

}
.laced2:hover {
 filter: saturate(200%);
transition: .25s ease-in;
      transform: scale(1.1);
      
  }
  
.laced {
  height:35px;
  border-width: 3px;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;         
      border-style: inset;

}

#blues {
  background-color:#D9E5F0; height:auto;
}

#zero {
  height:0px;
}

/* Define the animation keyframes */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#bow {
  height:100px;
  position:relative;
  left:1010px;
  top:5px;
  z-index:5;
}

#center {
  margin-left:auto;
  margin-right: auto;
}


.whitethick {
  border:white solid 5px;
}

.heightauto {
  height:auto