@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");
}

body {
 padding: 10px;
  
}

/* -- 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, a{
  	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;
}