body{   
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(255, 255, 255, 0.93)), url('https://file.garden/aJDIRaY1YG2XmKGD/Square-slider.gif');
    background-size: cotain;
    max-height: 1300px;
}


/* The profile itself as a whole! This is where you can change the main background.*/
.container{
    user-select: none;
    width: 1100px;
    padding: 5px;
    font-family: "Jua", sans-serif;
    margin: auto;
    border : 2px solid #aeda00; 
    border-radius : 10px ; 
    background: linear-gradient(rgb(255, 255, 255),hsla(0, 0%, 100%, 0.242));
}

/* This is the header of the content! you will have to go into the html in order to change the
picture however.*/
.top{
    border:3px solid #2bf0fa;
    border-radius:5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px;
    gap: 5px;
}

/* This one is pretty self-explanitory. This is the title and update log.*/
.title{
    background: url('https://i.pinimg.com/736x/f5/98/28/f5982865d5010b132db56ccbd23dbd1c.jpg');
    background-size: cover;
    text-align: center;
    font-size: 6em;
    color: #ff3e86;
    text-shadow: 5px 5px 0px rgb(249, 254, 255);
    font-family: "Bagel Fat One", system-ui;
    font-style: normal;
    padding-bottom: 10px;
    border-top: 3px solid #2bf0fa;
    border-left: 3px solid #2bf0fa;
    border-right: 3px solid #2bf0fa;
    border-radius:5px;
}
.update-log{
    background: #fdfff9;
    border:3px double  #aeda00;
    border-radius:5px;
    padding: 5px;
    height: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;
}


/* This is the profile itself, meaning everything listed below the header/update log. However, DO NOT
use this to change the background of the profile! the container is where you should do that!*/
.profile{
    margin: auto;
    gap: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 15px;
}


.headers{
    border-bottom: solid 3px #ff3e86;
    text-align: center;
    font-size: large; 
}


.navi-link{
    background: linear-gradient(#fdfff9,#caf4ff, #ffffff,#caf4ff, #ffffff);
    padding: 5px;
    border:3px double #ff3e86;
    border-radius:3px;
    border-radius: 10px;

}

.navi-link:before{
    content: url('https://files.catbox.moe/ta6x1q.gif'); 
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  color: black;
  text-decoration: none;
}

.navi-link:hover{
    letter-spacing: .1rem;
    animation: slide .1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

.navigator{
    background: #fdfff9;
    display: flex;
    flex-direction: column;
    border: 3px solid #2bf0fa;
    border-radius: 10px;
    overflow-x: hidden;
    width: 200px;
    padding-bottom: 15px;
}

.contact{
    background: #fdfff9;
    border: 3px solid #2bf0fa;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.fan-listings{
    background: #fdfff9;
    margin-top: 10px;
    border: 3px solid #2bf0fa;
    border-radius: 10px;
}

.fans-listed{
    display: grid;
    grid-template-columns: auto auto auto;
    margin-left: 10px;
}

.fan:hover{
  animation: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  transform-style: preserve-3d;
  animation-iteration-count: infinite;
}

.about{
    background: #ffffff;
    width: 500px;
    padding: 15px;
    border-width: 10px;
    border-style:solid;
    border-image: url('https://file.garden/aJDIRaY1YG2XmKGD/image_2025-08-04_102718000.png') 7 fill round;
    border-radius: 3%;
    padding: 10px;
    text-indent: 1em;
}

.text{
    background: white;
    width: auto;
    border : 2px solid #ff3e86; 
    border-radius : 5px ; 
    padding: 10px;
}



.status{
    background: #fdfff9;
    border: 3px solid #2bf0fa;
    border-radius: 10px;
    max-width: 290px;
    overflow: hidden;
    padding: 5px;
}

.decals{
    background: #fdfff9;
    margin-top: 10px;
    border: 3px solid #2bf0fa;
    border-radius: 10px;
    padding: 10px;
    width: 280px;
}

.mid-decals{
    display: grid;
    grid-template-columns: auto auto auto;
    background: url('https://file.garden/aJDIRaY1YG2XmKGD/i17-bg-simple.gif');
    margin-top: 10px;
    border : 5px double #ff3e86; 
    border-radius : 5px ; 
    
}


@keyframes slide{
   from{transform: translatex(0px)}
    to{transform: translatex(15px)}
}

  @keyframes spin{
    from{ transform: rotatey(0deg)}
    to{ transform: rotatey(360deg)}
}



/*SCROLLBAR*/
::-webkit-scrollbar-track {
    box-shadow: outset 0 0 5px grey; 
    border-radius: 5px;
  }
::-webkit-scrollbar-thumb {
    background: url('https://file.garden/aJDIRaY1YG2XmKGD/195ea964f177f0d7cc66ad1dfc51b8bc.jpg');
    border: double 3px #aeda00;
    border-radius: 5px;
  }
::-webkit-scrollbar {
    background: url('https://file.garden/aJDIRaY1YG2XmKGD/195ea964f177f0d7cc66ad1dfc51b8bc.jpg');
    width: 8px;
  }
::-webkit-scrollbar-thumb:hover {
    background: url('https://file.garden/aJDIRaY1YG2XmKGD/195ea964f177f0d7cc66ad1dfc51b8bc.jpg');
  }