/* ╔═*.·:·.✧ ✦ ✧.·:·.*═╗ */

/* -- FONTS -- */

@font-face {
    font-family: 'W95FA';
    src: url(/W95FA.otf);
  }

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

@font-face {
  font-family: 'ace';
  src: url("https://file.garden/aSOlzn3FbjJRlmph/Ace-Attorney.ttf");
}

@font-face {
  font-family: 'windows';
  src: url("https://file.garden/aSOlzn3FbjJRlmph/Windows%20Regular.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.24;
    z-index: 2;
    mix-blend-mode:darken;
    pointer-events: none;
}

#vignette {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 80px rgba(0, 24, 87, 0.45) inset;
	pointer-events: none;
	z-index: 600;
}

#overlay2 {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgb(4 8 19 / 10%) 40%, rgb(10 10 40 / 8%) 23%);
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

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

/* -- SELECTION -- */

::selection {
    color:#fafcff;
    background:rgb(10,10,220, .6);
    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));
       }

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

/* -- SCROLLBAR -- */

::-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: #488cfb;
    border-radius: 4px;
     padding: 3px;
   transition-duration:0.20s;
    
}
::-webkit-scrollbar-thumb:hover {
  background: #143dac;
    border-radius: 4px;
     padding: 3px;
    transition-duration:0.20s;
}

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

/* -- TOOLTIP -- */

.tooltiptext {
  visibility: hidden;
  font-family: 'cc lan';
  width: 130px;
  background-color:#010138;
  color: #7cacff;
  border:dashed 1px #2396fd;
   box-shadow:0 0 8px #3445ff;
  text-align:center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -65px;
  transition-duration:1s ;
  opacity: 0;
  transition: opacity 0.3s;
  }
  
  .tooltip:hover .tooltiptext {
  visibility: visible;
    opacity: 1;
   
}

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

/* -- TEXT -- */

h1 {
font-family:'CC lan';
color:#afb7ff;
    text-shadow: 0 0 10px blue, 0 0 8px blue, 0 0 8px blue, 0 0 3px #0384fc, 0 0 2px white, 0 0 1px white;
}

h2 {
    color:#94b7ff;
}

h2, h3, h4 {
font-family:"ace";
font-weight: 300;
}

h3{
    color:#98bdff;
}

h4 {
    color:#4a7dd9;
}

h5, h6 {
	font-family:'W95FA';
	color:RoyalBlue;
}
  p{
  	color:MediumBlue;
  	font-family:'W95FA';
  	
  }

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

/* -- BUTTONS -- */

button {
  background-color:#000010;
    padding:4px 10px;
    border:1px solid navy;
     border-collapse: collapse;
    width:100%;
    height:24px;
    font-size:16px;
  font-weight: 100;
    display:block;
    color:cornflowerblue;
    transition-duration:0.20s;
    font-family:"ace";
     text-shadow: 0 0 10px blue, 0 0 8px blue, 0 0 3px #0384fc, 0 0 1px white;
    cursor:pointer;
    text-align:left;
    
}

button:hover {
   color:white;
  border-color:#0384fc;
  background-color:darkblue;
    letter-spacing:1px;
    box-shadow:0 0 4px navy ;
}



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

/* -- BODY -- */

body { 
    background-image:url('https://i.pinimg.com/originals/d0/cd/87/d0cd873810a78ecac7ed39629923676c.gif') ;
    background-blend-mode:multiply;
    background-size:400px;
background-color:#000025;
text-shadow: 0 0 2px blue, 0 0 1px RoyalBlue;
max-width:65%;
margin-top:35px;
margin-left: auto;
margin-right: auto;
text-align:center;
cursor: url("https://blob.gifcities.org/gifcities/CYNHKMXZYNTORIDFUBTAS2SQNEF7TZP2.gif"), auto ;
}

.bg img {
    filter: brightness(30%);
}



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

/* -- Main Stuff -- */

section {
    border:double 5px blue;
    background-color: #000730;
	background-image:url('https://aruna-is-calling.neocities.org/backgrounds/d8daf85ee19d2f11ccf2222d1b56f78d.gif');
    background-blend-mode:hard-light;
    background-position:center;
  padding:3px;
  box-shadow: 0 0 20px blue;
  border-radius:16px 0;
 
}

main, header, footer, aside {
    margin:3px;
  
}

header {
    border:solid 1px navy;
  border-radius: 5px 0 0 0 ;
background-color:#000010;
  height:120px;
  padding:3px;	
    background-image:url('https://i.pinimg.com/originals/84/36/8f/84368f6da56463afa679273c47cc0596.gif');
  background-size: cover;
     background-position:center;
    background-blend-mode:soft-light;
  
}

.scroll {
   background:linear-gradient(to bottom, #0a0259 11%,#000730 37%,#06061b 64%,#020018 100%);
    height:20px;
}

#flex {
  display: flex;
  }

aside {
    border:solid 1px navy;
    width:180px;
    order:1;
    background-color:#000010;
}

main {
    flex:1;
  order:2;
    border:solid 1px navy;
  height:350px;  
    background: #000010;
  background-image:url('https://aruna-is-calling.neocities.org/backgrounds/0049.jpg') ;
    background-blend-mode:soft-light;
    padding:10px;
  
}


header, footer {
    
     border:solid 1px navy;
    height:40%;
  
}

footer {
  background-color:#000010;
 background-image:url('https://i.pinimg.com/originals/0b/2d/9f/0b2d9fc0146ed34a661360601598f82b.gif');
     background-position:center;
  background-size:cover;
    background-blend-mode:soft-light;
    
}

#abt {
  background-color: #000010 !important;
  border:double 3px #00004e;
  padding:12px;
  border-radius:5px;
  }


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

.border {
  border:2px solid #3A33FF;
}

/* ╚═*.·:·.✧ ✦ ✧.·:·.*═╝ */