@import url('https://fonts.googleapis.com/css2?family=Fredoka:wdth,wght@75..125,300..700&display=swap');

:root {
  --bg-image: url('https://64.media.tumblr.com/5acf93b2e45082146eae084e0efb1ed6/9df9b764bcd6ed48-bc/s2048x3072/cb4aaac817adb5d696918e0f018bbfdc6855d74c.jpg');
  
  /* body!! */
  
}
body{
background-color: #fff7fb;
font-family:'Fredoka', sans-serif;
background-image:var(--bg-image);
background-size:cover;
background-attachment: fixed;
background-position:center;
  
/* container and spacers!! */
  
}
#webcontain {
  max-width: 900px;
  margin: 0 auto;
}
#websiteSpacerTop,#websiteSpacerBottom {
  height: 14px;
  
  /* Container!! */
}
#header, #footer, .subheader {
  border-top: 1px solid #4dalda;
  border-left: 1px solid #4dalda;
  border-right: 1px solid #4dalda;
}
#glass {
  background: url('https://64.media.tumblr.com/57b48e8ae405cbe9de65623833bdd8b8/9df9b764bcd6ed48-e0/s2048x3072/866a40c0b3b50f86c7ba9a3dffbc5d409a977681.pnj')
rgba (209, 243, 253, .6);
  backdrop-filter: blur(1px) saturate(150%);
  box-shadow: rgba(0, 0, 0, .25) 0 14px 28px, rgba(0, 0, 0, .22) 0 10px 10px;
  padding:4px;
  border-right: 1px solid #b8b8b8;
  border-bottom: 1px solid #b8b8b8;
}
#header{
background:top / cover url('https://64.media.tumblr.com/d159cf1a0e098232701a5543efedc440/9df9b764bcd6ed48-4c/s2048x3072/d3cdce48bfe408fe8a64edb8752df607045bcc8b.jpg');
  background-repeat: no-repeat;
  height:100px;
  position:relative;
  padding:5px;
  border-radius:50px 5px 0px 0px;
  display:flex;
  justify-content:center;
  align-items:center;
  letter-spacing: 1px;
}

#header h1{
margin: 0px;
padding:10px;
font-size:xx-large;
font-weight:bold;
color:#fff;

}
#footer{
  clear: both;
  border-radius: 0px 0px 50px 5px;
  height:auto;
  min-height:30px;
  padding:10px;
  text-align:center;
  align-content:center;
  font-size:15px;
  font-weight:bold;
  color:#fff;
  border: 1px solid #81e1fa;
  background: linear-gradient(to bottom, #9ad1fc 0, #83c6f3 10%, #128ddf 50%, #0f75b9 50%, #137bc0 70%, #5bade4 100%);
}
#footer p{
margin: 0px;
}
.flex {
  display: flex;
  gap: 10px;
}

#side{
width: 150px;
padding: 0px 0px 5px 10px;
overflow: hidden;
}
.lilbox {
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    box-shadow: 2px 2px 3px rgba(0,0,0,.8);
    display: block;
    padding: 2px;
    margin-bottom: 6px
}
#main{
width: 100%;
overflow: hidden;
padding: 0px 10px 5px 0px;
Height:auto;
}
.sideboxes{
margin: 0px 0px 5px 0px;
align-items: center;
background:#fff;
padding: 7px;
}
.sideboxes a{
    text-decoration:none;
    font-size:12.5px;
    width: 100%;
    color:black;
    display: flex;
    justify-content: left;
    align-items: center;
    background: linear-gradient(to bottom, rgba(230, 230, 230, .2) 0, rgba(238, 238, 238, .2) 60%, rgba(173, 173, 173, .3) 60%, rgba(110, 110, 110, .3) 100%);
  border: 1px solid #bbb;
  border-radius:3px;
  margin-bottom:2px;
}
.sideboxes iframe{
  border:none;
  height:30%;
  width:100%;
  padding:0px;
}
.sideboxes a:hover{
  cursor:point;
background: linear-gradient(to bottom,rgba(196,194,194,.2) 0,rgba(194,193,193,.2) 60%,rgba(214,214,214,.3) 60%,rgba(55,192,255,.8) 100%)!important;
border: 1px solid #bbb !important;
color: #006deb !important;
}
.subheader{
  border-radius:5px;
  border: 1px solid #81e1fa;
  background: linear-gradient(to bottom, #9ad1fc 0, #83c6f3 10%, #128ddf 50%, #0f75b9 50%, #137bc0 70%, #5bade4 100%);
  text-align:center;
  align-content:center;
  font-wight:bold;
  padding: 3px;
  color: #fff;
  letter-spacing: 1px;
}

.subheader h1,h2,h3,h4{
margin: 0px;
}
iframe{
  border:none;
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
}
::-webkit-scrollbar{
width: 10px; 
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
border-left: 1px solid #888;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, rgba(27,66,122,1) 0%, rgba(194,224,255,1) 28%, rgba(138,194,238,1) 55%, rgba(202,227,252,1) 87%);
  border-left: 1px solid #888;
}

/*horizontal scroll*/

::-webkit-scrollbar:horizontal {
height: 14px
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
 border-top: 1px solid #888;
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg, rgba(27,66,122,1) 0%, rgba(194,224,255,1) 28%, rgba(138,194,238,1) 55%, rgba(202,227,252,1) 87%);
  border-top: 1px solid #888;
}
/* Mobile Version */
@media only screen and (max-width: 1200px) {
  .flex {
    display: flex;
  }
@media only screen and (max-width: 600px) {
  .flex{
    display: block;
  }
  #side{
    padding: 0px;
    display:block;
    width:100%;
  }
  #main{
    width:100%;
  }
  #main img{
  max-width:320px;
  height: auto;
  }
  .glass{
  height:auto;
  }
#websiteSpacerTop,#websiteSpacerBottom {
  display: none;
}
#webcontain {
  width: 100%;
}
iframe{
  height:850px;
}
@media only screen and (max-width: 320px) {
  .flex{
    display: block;
  }
  #side{
    padding: 0px;
    display:block;
    width:100%;
  }
  #main{
     width:100%;
  }
  #main img{
  max-width:320px;
  height: auto;
  }
  .glass{
  height:auto;
  }
    #websiteSpacerTop,#websiteSpacerBottom {
  display: none;
}
  #webcontain {
  width: 100%;
}