/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: "piston black";
    src: url(https://unityrain24.neocities.org/fonts/PistonBlack-Regular.ttf);
    font-weight: normal;
    font-style: normal;}
    
@font-face {
    font-family: "distropilax";
    src: url(https://unityrain24.neocities.org/fonts/Distropiax-WpYMA.ttf);
    font-weight: normal;
    font-style: normal;}
    
 @font-face {
    font-family: "kosugi maru";
    src: url(https://unityrain24.neocities.org/fonts/KosugiMaru-Regular.ttf);
    font-weight: normal;
    font-style: normal;}
    
 @font-face {
    font-family: "quicksand";
    src: url(https://unityrain24.neocities.org/fonts/quicksand/Quicksand-Medium.ttf);
    font-weight: normal;
    font-style: normal;}

 @font-face {
    font-family: "quicksand";
    src: url(https://unityrain24.neocities.org/fonts/quicksand/Quicksand-Bold.ttf);
    font-weight: bold;
    font-style: normal;}

    
 body {
   color: #6C95A0;
   font-family: "quicksand", "kosugi maru", sans serif;
   background: url("Images/mistyloop.avif") round fixed;
  
   }
   
  h1 {
    position: absolute;
      top: 2%;
      right: 8%;
      left: 8%;
    padding: 16px;
    color: #B2CCD5;
    font-family: "piston black";
    text-align: center;
    border-style: double;
    border-width: 16px;
    border-color: #3A5D69;
    background: #283F46;
    }
    
  h2  {
    color: #93aeb8;
    font-family: "kosugi maru", sans serif;
    background: #283F46;
  }

#content {
    position: absolute;
      top: 20%;
      left: 30%;
      right:8%;
    border: solid 4pt #3A5D69;
    padding: 24px;
    background: #283F46;
}

#sidebar {
    position: absolute;
      top: 20%;
      left: 8%;
      right:72%;
    border: solid 4pt #3A5D69;
    padding: 24px;
    background: #283F46;
}

 a {
  color: cyan}
  
 a:hover {
    color: #c3dbe3;
    text-shadow: 0 0 16px cyan, 0 0 32px cyan;}
    
::selection{
    color: #c3dbe3;
    text-shadow: 0 0 16px cyan, 0 0 32px cyan;}
    
img:active {
  transform: scale(3);
  }