/* Made with NO AI, no templates, all made by me, Neuro.*/
   /*please DO NOT STEAL/RIP CODE. DO NOT USE THIS WEBSITE AS A TEMPLATE. THERE ARE MANY F2U TEMPLATES FOR WEBSITES, MINE IS NOT ONE OF THEM.WE WORKED VERY HARD ON THIS! :-( */
   
   /* root */
   
   :root {
     --neuro-bg: url('https://neurotoxin.neocities.org/resources/bgs/xpbliss.jpg');
     --neuro-main: #ECE9D8;
     --neuro-accent: #0050ED;
     
     --neuro-link: #0050ED;
     --neuro-link-hover: #7D4CA8;
     
     --neuro-button: #4A6EF1;
     --neuro-button-hover: #6785EE;
     }
   
   /* links */
   
    @font-face {
     font-family: "ds"; 
     src: url("https://neurotoxin.neocities.org/r/font/DS.ttf") format("truetype"); }
    
    @font-face {
      font-family: "tahoma"; 
      src: url("https://neurotoxin.neocities.org/r/font/Tahoma.ttf") format("truetype"); }
   
   /* main elements */
   
    * {
     box-sizing: border-box;
     font-family: "ds";
     font-size: 18px;
     color: BLACK;
     margin: 0px;
     scrollbar-width: thin;
     scrollbar-color: #0050ED #6785EE;
     scroll-behavior: smooth;
     }
   
    body {
     background: url('https://neurotoxin.neocities.org/r/g/bg/xpAzul.jpg') no-repeat center center fixed;
     background-size: cover;
     }
    
    main {
     margin: auto;
     margin-top: 5px;
     padding: 0px;
     width: 60%;
     height: auto;
     min-height: 900px;
     background-color: var(--neuro-main);
     border: 3px outset var(--neuro-accent);
     }
    
    header {
      height: 100px;
      width: 100%;
      border: 1px solid var(--neuro-accent);
      }
    
    nav {
     margin: 0px;
     padding: 0px;
     width: 23%;  
     float: right;
     border-right: 1px solid var(--neuro-accent);
     background-color: red;
     display: flex;
     flex-wrap: wrap;
     }
   
   /* left side*/
    section {
     margin: 0px;
     padding: 0px;
     width: 77%;
     height: 500px;
     float: left;
     }
   
   /* right side */
    aside {
     background-color: red;
     margin: 0px;
     padding: 0px;
     width: 23%;
     height: auto;
     float: right;   
     border-right: 1px solid var(--neuro-accent); 
     }
   
    article {
     /* background-color: green; */
      border-bottom: 1px solid var(--neuro-accent);
      width: 100%;
      height: 300px;
      margin: 0px;
      padding: 10px;
      overflow: auto;
      }
   
   
   

   /* text */

    p {
     font-family: "ds";
     font-size: 18px;
     color: BLACK;
     margin: 0px;
     }
   
    a {
     font-family: "ds";
     font-size: 18px;
     color: var(--neuro-link);
     text-decoration: underline;
     cursor: pointer;
     transition-duration: 0.10s;
     margin: 0px;
     }
   
    a:hover {
     font-family: "ds";
     font-size: 18px;
     color: var(--neuro-link-hover);
     font-style: italic;
     text-decoration: underline;
     cursor: pointer;
     transition-duration: 0.10s;
     margin: 0px;
     }
   
   ul {
     font-family: "ds";
     font-size: 18px;
     color: BLACK;
     margin: 0px;
     }
   
   em {
     font-family: "ds";
     font-size: 15px;
     color: #696969;
     margin: 0px;
     font-style: none;
     }
   
   b {
     font-family: "ds";
     font-size: 18px;
     color: BLACK;
     margin: 0px;
     font-style: bold;
     }
   
   h1 {
     font-family: "tahoma";
     font-size: 20px;
     color: BLACK;
     margin: 0px;
      }
   
    h3 {
     font-family: "tahoma";
     font-size: 17px;
     color: BLACK;
     margin: 0px;
      }
   

   /* classes & divs */
   
    .tank {
      margin: 10px  10px;
      border: 1px solid blue;
      width: 100%;
      height: 300px;
      background: green;
      overflow: hidden;
      
    }
   
   .fish {
     position: absolute;
  left: 0px;
  top: 0px;
  height: 50px;
  width: 100px;
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: center;
}
     
   }
   
   
     .marquee {
			border: 1px solid var(--neuro-accent);
			display: flex ;
			overflow: hidden ;
			white-space: nowrap ;
			width: 100% ;
			height: 20px;
			margin-bottom: 5px;
		}
		.marquee__item {
			animation-duration: 10s ;
			animation-iteration-count: infinite ;
			animation-name: marquee-content ;
			animation-timing-function: linear ;
			padding: 3px 0px ;
		}
		.marquee:hover .marquee__item {
			animation-play-state: paused ;
		}
   
   @keyframes marquee-content {
			from {
				transform: translateX( 0% );
			}
			to {
				transform: translateX( -100% );
			}
		}
   
   
   
   
   .navbutton {
      background: var(--neuro-button);
      border: 2px outset #5277FB;
      padding: 3px 5px;
      cursor: pointer;
      text-decoration: none;
      flex: 1 30px;
      width: 100%;
      min-width:100%;
      height: 30px;
      text-align: left;
      position: relative;
      
      transition-duration: 0.35s;
     }
   
   .navbutton:hover, .navbutton:focus {
      background: var(--neuro-button-hover);
      border: 2px outset #5277FB;
      padding: 3px 10px;
      cursor: pointer;
      text-decoration: none;
      flex: 1 30px;
      width: 100%;
      height: 30px;
      text-align: left;
      position: relative;
     
     transition-duration: 0.35s; }
   
   
   
   
   

   /* media */
   
    @media screen and (max-width: 800px) {
     main {
      width: 100%;
      margin: 0px;
      }
     section {
       width: 100%
       }
     aside {
       width: 100%;
       border-right: none;
       }
     nav {
       width: 100%;
       border-right: none;
       }
     
     
     .navbutton {
      padding: 3px 5px;
      cursor: pointer;
      text-decoration: none;
      flex: 1;
      min-width: 100px;
      text-align: center;
      font-size: 0.9em;
      position: relative;
       }
     
     .navbutton:hover, .navbutton:focus {
       text-align: center;
       padding: 3px 5px;
       
       }
     
     
     
     
    
   }