/* Yall like the css file name OuO *cute face emoji* */
/* ╔════*.·:·.✧ CSS YAY ✧.·:·.*════╗ */

/*---------* FONTS *---------*/

@font-face {
  font-family: 'MS gothic';
  src: url("https://file.garden/aSOlzn3FbjJRlmph/ms-gothic.ttf");
}

@font-face {
  font-family: 'CC';
  src: url("https://file.garden/aSOlzn3FbjJRlmph/C%26C%20Red%20Alert%20%5BINET%5D.ttf");
}
 
@font-face {
  font-family: 'ace';
  src: url("https://file.garden/aSOlzn3FbjJRlmph/Ace-Attorney.ttf");
}


/* ------------------------- */

/*---------* OVERLAYS *---------*/

body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; 
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url('https://aruna-is-calling.neocities.org/backgrounds/9120cbcbb9b8f14f5c5448fe3929469a.gif');
    background-size:300px;
    opacity:0.4;
    z-index: 2;
    mix-blend-mode:darken;
    pointer-events: none;
}

/* ------------------------- */
/* -- SELECTION -- */

::selection {
    color:rgb(230, 231, 254);
    background:rgb(20,0,220, .7);
    text-shadow:
    -.05em -.05em 0 #4ca9ff,  
    .05em -.05em 0 royalblue,
    -.05em .05em 0 RoyalBlue,
     .05em .05em 0 RoyalBlue,
    0 0 5px white;
    mix-blend-mode:lighten;
 }

img:hover {
         transition:.3s;
         filter: drop-shadow(0 0 5px rgb(0, 10, 220));
       }

/* ---------------------- */

/*---------* BODY *---------*/

body {
    margin-left:auto;
    margin-right:auto;
       background-image:url(https://aruna-is-calling.neocities.org/backgrounds/d2f9097.jpg ) ;
    background-blend-mode:multiply;
    background-size:400px;
    background-color: #000010;
    text-align:center;
    text-shadow:0 0 2px navy, 0 0 1px #0068ff;
}

section {
    background-color: #000005;
    background-image:url(https://aruna-is-calling.neocities.org/backgrounds/d8daf85ee19d2f11ccf2222d1b56f78d.gif);
    background-blend-mode:color-dodge;
    margin-left:auto;
    margin-right:auto;
     margin-top:2%;
    padding:3px;
    width:63%;
    border: double 6px #0000ff;
    border-radius: 5px;
    box-shadow: 0 0 30px #000040,0 0 20px blue, 0 0 10px #001da4;
}

header {
    border:double 3px #011769;
    background: linear-gradient(#000010, #000);
    margin-left:auto;
    margin-right:auto;
    
}

#flex {
  display: flex;
  }

aside {
    border:double 3px #011769;
    max-width:380px;
    order:1;
    background: linear-gradient(#000010, #000);
    margin:3px
}

main {
    border:double 3px #011769;
    
    margin-left:auto;
    margin-right:auto;
    order:2;
    
}

footer {
    height:40%;
    border:double 3px #011769;
    background: linear-gradient(#000010, #000);
    margin-left:auto;
    margin-right:auto;
    font-size:8px;
}

main, header,footer
{
    margin:3px;
    padding:12px;
    
}

scroll {
        background-color:#000010;
        text-align:left;
        filter:brightness(80%);
        margin:3px;
        border:dashed 1px navy;
      }

/* -- TEXT -- */

h1 {
color:#98a3ff;
     font-family:'CC';
    font-weight:800;
   
}

h2 {
    color:#6891e6;
    font-family:'ace';
    font-weight: 100;
    font-size:22px;
}

h3{
    color:#4c7cd2;
     font-family: "ace";
    font-weight: 200;
    font-size:20px;
}

h4 {
    color:#4273cb;
    font-family: "ace";
    font-weight: 200;
    font-size:18px;
}

h5, h6 {
	color:#264cbb;
    font-family: "ace";
    font-weight: 300;
    font-size:16px;
}
  p{
  	color:#3a3add;
      font-family: "ace";
      font-weight: 100;
      font-size:15px;
      
  }

/* ------------------------- */
/*---------* ICONS *---------*/
.icon {
     filter: grayscale(1) sepia(1) saturate(4) hue-rotate(190deg) drop-shadow(0 0 3px blue); 
    border-radius:15px 0;
    border:double 3px dodgerblue;
    height:120px;
    animation-duration:2s;
}
            
.icon:hover {
 filter: grayscale(0) sepia(0) saturate(1)  brightness(1) drop-shadow(0 0 8px blue);
    border:double 3px royalblue;
    scale:1.03;
}
            


/* ------------------------- */
/*---------* TOOLTIP *---------*/

.tooltip {
   position: relative;
  display: inline-block;
  cursor: pointer;  
    animation-duration:0.4s;
}

.tooltiptext {
    font-family:"ace";
  opacity:0;
  background-color:#000020;
  color: #769eff;
  border:solid 1px #0e32d9;
   box-shadow:0 0 5px#3445ff;
  text-align:center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -65px;
    transition: opacity .2s;
    
  }
  
  .tooltip:hover .tooltiptext {
  opacity:1;
}
  

/* ------------------------- */
/*---------* BUTTON *---------*/

button{
    font-family:"ace";
    text-align: left;
    font-weight: 500;
    color:#4d70f1;
    text-shadow:0 0 2px navy, 0 0 1px #0068ff;
    background: linear-gradient(#000010, #000);
    border: 1px solid navy;
    width:100%;
    transition-duration:.4s;
    font-size:20px;
    padding:4px 6px;
}

button:hover {
    color: #fff;
    text-shadow:0 0 5px #024bff, 0 0 1px #bdd8ff;
    background: linear-gradient(#060676, #000532);
    letter-spacing: 1px;
    border:1px solid white;
}

::-webkit-scrollbar {
  width:4px;
  height:0;
   
    border-radius: 4px;
}
  ::-webkit-scrollbar-track {
  background: #000040;
  box-shadow:0 0 5px navy, 0 0 2px blue;
     
}
::-webkit-scrollbar-thumb {
  background: dodgerblue;
    border-radius: 4px;
     padding: 3px;
   transition-duration:0.20s;
    
}
::-webkit-scrollbar-thumb:hover {
  background: #143dac;
    border-radius: 4px;
     padding: 3px;
    transition-duration:0.20s;
}