html {
  cursor: url("/s.png"), auto;
}

body {
  background-image:url("/main/bb.png");
  background-attachment:fixed;
  background-size:cover;
  background-color:#8ddcf0;
  scrollbar-width:none;
}

h1 {
  filter: drop-shadow(0 0 2px rgba(0,0,0,.7));
  font-family: 'FinkSans', sans-serif;
  font-size:50px;
  text-align:center;
  color: #c3f7ff;
}

a:hover{
  cursor: url("/s.png"), auto;
}

p {
  text-align:center;
  color: black;
  font-size:14px;
}

.grid-container{
  grid-template-columns: 20% 80%;
  grid-template-rows: 100px 50px 900px;
  font-family: "Yorkville", sans-serif;
  display:grid;
  padding-bottom:10px;
  margin:0 auto;
  margin-top:20px;
  width:60%;
  max-width:100%;
  height:90%;
  box-sizing:border-box;
  gap:0;
  background-color:rgba(8,213,250,.45);
  border-radius: 20px;
}

.header{
  grid-column-start:1;
  grid-column-end:3;
  grid-row-start:1;
  grid-row-end:1;
  border-radius:20px 20px 0 0;
  display:flex;
  justify-content:center;
  --webkit-box-shadow: 0px 6px 5px 0px rgba(21,42,74,0.63);
  -moz-box-shadow: 0px 6px 5px 0px rgba(21,42,74,0.63);
  box-shadow: 0px 6px 5px 0px rgba(21,42,74,0.63);
  background: rgba(183,222,237,1);
  background: -moz-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(183,222,237,1)), color-stop(50%, rgba(113,206,239,1)), color-stop(51%, rgba(33,180,226,1)), color-stop(100%, rgba(183,222,237,1)));
  background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
  background: -o-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
  background: -ms-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
  background: linear-gradient(to bottom, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%);
}

.main{
  grid-column-start:2;
  grid-column-end:3;
  grid-row-start:2;
  grid-row-end:4;
  padding:20px;
  border-left: 1px blue solid;
}

#helpwanted{
  width:50%;
  height:auto;
  float:left;
}

.side{
  grid-column-start:1;
  grid-column-end:2;
  grid-row-start:2;
  grid-row-end:2;
  line-height:30px;
  padding-top:10px;
  font-family: "Yorkville", sans-serif;
}

 ul > li{
  display:block;
   padding-left:1em;
 }
 
 ul{
  padding:0;
  margin:0;
 }
 
 li{
  margin: 0 6px 16px 6px;
  padding-top:0.2em;
  background: rgb(213,255,254);
  -webkit-box-shadow: -2px 2px 2px 0px rgba(65,137,176,1);
  -moz-box-shadow: -2px 2px 2px 0px rgba(65,137,176,1);
  box-shadow: -2px 2px 2px 0px rgba(65,137,176,1);
  border-radius:20px;
 }


#sponge{
  position:fixed;
  top:400px;
  left:20px;
  width:18%;
}

#logo{
  position:fixed;
  top:2px;
  right:5px;
  width:20%;
}

@media only screen and (min-width: 1900px){ 
  #sponge{
    top:550px;
  }
  
  #logo{
    top:20px;
    right:5px;
  }
}

@font-face{
font-family:'FinkSans';
src: url(/fonts/FinkSans.ttf); 
}

@font-face{
  font-family:'Yorkville';
  src: url(/fonts/Yorkville.ttf);
}