html:
   .bitcount-prop-single- {
  font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
  }
  body {
    min-height: 100vh;
    width:100%;
    background-image:url(https://h2.gifposter.com/bingImages/RainbowRiver_1920x1080.jpg);
    background-size:cover;
    font-family: MS UI gothic, sans-serif;
    font-size:18px;
  }
  .wrapper{
    display:grid;
    grid-template-columns:repeat3(1fr);
    grid-template-areas:
    "header header header"
    "sidebar content rightbar"
    "footer footer footer";
    vertical-align:middle;
    margin:100px auto;
    max-width:1200px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 
        0 16px 45px rgba(0, 30, 60, 0.35), 
        inset 0 1px 2px rgba(255, 255, 255, 1),
        inset 0 -2px 5px rgba(0, 80, 150, 0.15);
    background-color: rgba(217, 249, 246, 0.63);
    backdrop-filter:blur(5px);v 
  }
 
  .wrapper > *{
    align-items:start;
    box-sizing:border-box;
    margin:15px 15px;
  }
     
  .header{
    grid-area:header;
    background-image: url("https://64.media.tumblr.com/0a74c9e48fd6dd09db3583e0d0726d54/6cf2e67124dd57e0-f5/s2048x3072/8dd862b9b408f9d6cd6c2cee20ac1d024291f6f4.gif");
    background-color:#fcebd5;
    background-position:center center;
    background-size:cover;
    margin:10px;
    border:1px solid #0F5B5E;
    border-radius:15px;
  }
  .website-img{
  display:block;
  margin:10px auto;
  width:100px;
  background:rgba(16,214,225, 0.5);
  box-shadow:2px 1px 2px #242424 inset;
  border-radius:50%;
  padding:10px;
  backdrop-filter:blur(15px);
  }
  .website-title{
    text-align:center;
    font-family:Bitcount Prop Single, sans-serif;
    color:#f5ad58;
    text-shadow:2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000;
    font-size:18px;
    margin:-10px 0px 0px;
     }
  .ransomizer{
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:50%;
  }

/* buttons */
.tablinks{
  font-family:MS UI gothic;
  font-size:14px;
  text-transform:lowercase;
  padding: 7px 15px;
  border:1px solid #0F5B5E;
  border-radius:15px;
  background-image:linear-gradient(0deg,rgba(201, 252, 184, 1) 0%, rgba(117, 240, 197, 1) 12%, rgba(101, 226, 235, 1) 32%, rgba(51, 190, 214, 1) 60%, rgba(166, 234, 245, 1) 85%, rgba(222, 251, 255, 1) 100%);
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.dropdown-btn{
  font-family:MS UI gothic;
  font-size:14px;
  text-transform:lowercase;
  padding: 7px 15px;
  border:1px solid #0F5B5E;
  border-radius:15px;
  background-image:linear-gradient(0deg,rgba(201, 252, 184, 1) 0%, rgba(117, 240, 197, 1) 12%, rgba(101, 226, 235, 1) 32%, rgba(51, 190, 214, 1) 60%, rgba(166, 234, 245, 1) 85%, rgba(222, 251, 255, 1) 100%);
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
  .arrow {
  float:right;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin:0px 5px;
  }
  .down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  }
     
/*top navigation*/
  .nav{
  display:flex;
  text-align:center;
  justify-content:center;
  margin-bottom:30px;
}

  .nav a{
  text-decoration:none;
}

  .nav .tablinks{
  width:80px;
  margin:0px 10px;
}

     
/*left sidebar*/
  .sidebar{
  grid-area:sidebar;
  max-width:200px;
}
  
  .sidebar button {
  margin:5px 0px;
  width:100%;
  text-align:left;
}
     
.sidebar button:hover {
  letter-spacing:5px;
  filter: brightness(1.05);
  font-style:oblique;
}
.sidebar button:active{
filter:brightness(120%);
}
     
.dropdown-container {
  display: none;
}
.dropdown-container button{
  animation-name: slideDownAnimation;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
  background:#91BFB;
  background:linear-gradient(0deg,rgba(194, 189, 86, 1) 0%, rgba(224, 175, 94, 1) 37%, rgba(255, 202, 117, 1) 72%, rgba(148, 190, 117, 1) 100%);
  }

  /*main content*/
     
  .main-container{
  grid-area:content;
  height:520px;
  overflow-y:scroll;
  }
    
  .tabcontent{
  display:none;
  padding:20px;
  text-align:justify;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 
        0 5px 10px rgba(0, 30, 60, 0.35), 
        inset 0 1px 2px rgba(255, 255, 255, 1),
        inset 0 -2px 5px rgba(0, 80, 150, 0.15);
  background-color: rgba(217, 249, 246, 0.63);
  backdrop-filter:blur(5px);v 
  }  

  /*updates*/
  
  .card{
  border:;
  border-radius:0px 15px 15px 15px;
  padding: 15px 15px;
  margin:15px 0px;
  border:1px solid #738FBA;
  background:linear-gradient(0deg,rgba(225, 237, 240, 1) 1%, rgba(245, 255, 255, 1) 100%); 
  }

/*left bars*/
.rightbar{
grid-area:rightbar;
max-width:200px;
padding:0px 15px 0px 0px;

img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
box-shadow:0 0 20px 1px white;
}
}

.funbox{
padding:5px;
position:relative;
border-radius:15px;
background: #91BFB4;
background: linear-gradient(0deg,rgba(201, 252, 184, 1) 0%, rgba(117, 240, 197, 1) 12%, rgba(101, 226, 235, 1) 32%, rgba(51, 190, 214, 1) 60%, rgba(166, 234, 245, 1) 85%, rgba(222, 251, 255, 1) 100%);
border:1px solid #0F5B5E;
}

.marq{
widht:100%;
margin:auto;
overflow:hidden;
display:flex;
height:20px;
white-space:nowrap;
}
  
.marq img{
box-shadow:none;
margin:0px 5px;
transform: translateX(100%);
animation: scroll-left 15s infinite linear;
}
 

/* footer */
#footer{
grid-area:footer;
max-height:60px;
font-size:14px;
max-width:1170px;
}

/*animation*/
@keyframes scroll-left {
  0% {transform: translateX(0%);}
  100% {transform: translateX(-2340px);}
}

@keyframes slideDownAnimation {
  0% { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
  }