/****** scrollbar ******/
      ::-webkit-scrollbar{
          width: 10px;
          height: 10px;
          display: none;
      }
      
      ::-webkit-scrollbar-thumb{
          background: #fff;
          border-radius: 0px;
      }
      
      ::-webkit-scrollbar-track{
          background: inherit;
          border-radius: 0px;
      }
      
      /****** select hightlight ******/
      ::selection {
          background: blue;
          color:white;
      }
      
      ::-moz-selection {
          background: blue;
          color:white;
      }
      
      /****** select hightlight ******/
      ::selection {
          background: blue;
          color:white;
      }
      
      ::-moz-selection {
          background: blue;
          color:white;
      }
      
      /****** font ******/
      @font-face {
      font-family: lacy;
      src: url(https://ed1c24.neocities.org/projects/html/theme3/lacythethree.ttf);
      }
      
      /****** body ******/
      body, *, a, a:hover { cursor:url(ultra1.png), auto; }
      
      body {
          background-color:#D2FEF9;
          background-image:url("https://ed1c24.neocities.org/projects/html/theme3/tealbg.png");
          color:#000000; /* default font color */
          font-family: 'lacy', sans-serif;
          font-size:18px; /* default font size */
          padding:10px;
      }
      
      /****** links ******/
      a{
          text-decoration: underline;
          color:#3948CA;
          transition:0.3s;
      }
      
      a:hover{
          cursor:help;
          transition:0.3s;
          color:#BE5C81;
      }
      
      /****** wrappers ******/
      #wrapper{
          max-width:1200px;
          max-height:100%;
          width:fit-content;
          height:fit-content;
          width: -moz-fit-content;
          height: -moz-fit-content;
          animation: fadeEffect 1s;
          margin: auto;
      }
      
      @keyframes fadeEffect {
          from {opacity: 0;}
          to {opacity: 1;}
      }
      
      #mainwrapper{
          display:flex;
          width:1000px;
          height:650px;
          gap:10px;
          padding:10px;
          justify-content:space-between;
          background-color:white;
          border: 1px #122385;
          border-style: solid; 
      }
      
      #header{
          max-width:100%;
          height:150px;
          padding:10px;
          background-image:url("https://ed1c24.neocities.org/projects/html/theme3/banner.jpg");
          background-color: #FFFFBF;
          background-size: cover;
	        background-position: center;
          color: white;
          border: 1px #122385;
          border-style: solid;
          position: relative;
      }
      
      #header span {
      	font-size: 50px;
      	position: absolute;
      	bottom: 0;
      	right: 10px;
      	margin: 10px;
      	font-weight: bold;
      }
      
      #main{
          width:550px;
          float:left;
          text-align:center;
      }
      
      #sidebar{
          width:250px;
          gap:10px;
          float:left;
          display:flex;
          flex-direction:column;
      }
      
      .label{
          border: 1px #122385;
          border-style: solid solid none solid;
          font-size:20px;
          height:10px;
          padding:15px;
          text-align: left;
          background-color: #7ADEDC;
          color: white;
      }
      
      .section{
          border:1px solid #000000;
          padding:10px;
          background-color:#FFFFBF;
          overflow:auto;
      }
      
      h1 { 
        display: block;
        font-size: 30px;
        font-weight: bold;
      }
      
      /****** mobile settings ******/
      @media only screen and (max-width: 600px) {
          #sidebar, #main{
              width:100%; /* makes all container 100% to fit screen */
          }
          
          #mainwrapper{
              flex-wrap:wrap;
          }
          
      }