/****** 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;
      }
      
      /****** fonts (credit to: https://mypillowfort.net/) ******/
      @font-face {
      font-family: lacy;
      src: url(fonts/lacythethree.ttf);
      }
      
      @font-face {
      font-family: plushie;
      src: url(fonts/plushie.ttf);
      }
      
      /****** body ******/
      body, *, a, a:hover { cursor:url(images/default.png), auto; }
      
      body {
          background-color:#D2FEF9;
          background-image:url("images/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:#2231bd;
          transition:0.3s;
      }
      
      a:hover{
          cursor:url(images/link.png), auto;
          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;
          max-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("images/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{
          max-width:250px;
          gap:10px;
          float:left;
          display:flex;
          flex-direction:column;
      }
      
      .label{
          border: 1px #122385;
          border-style: solid solid none solid;
          font-size:18px;
          height:8px;
          padding-bottom:15px;
          padding-left:6px;
          padding-right:3px;
          padding-top:3px;
          text-align: left;
          background-color: #7ADEDC;
          color: white;
      }
      
      .section{
          border:1px solid #000000;
          padding:10px;
          background-color:#FFFFBF;
          overflow:auto;
      }
      
      .profile {
        display: flex;
        align-items: center; 
        padding: 10px;
        width: 500px;
      }
      
      .profile-pic {
        width: 100px;
        height: 100px;
        border:1px solid #000000;
        margin-right: 15px;
        cursor:url(images/link.png), auto;
      }

      
      h1 { 
        display: block;
        font-size: 30px;
        font-weight: bold;
      }

      ul {
        margin:0;
        padding:0;
        list-style: square inside url(images/blue.gif);
      }
      
      /****** mobile settings ******/
      @media only screen and (max-width: 600px) {
          #sidebar, #main{
              width:100%; /* makes all container 100% to fit screen */
          }
          
          #mainwrapper{
              flex-wrap:wrap;
          }
          
      }