html, body{
    border:0;
    outline:0;
    margin:0;
    padding:0;
    overflow:hidden;
}
html{
    background-color:red;
    width:100%;
    height:100%;
}
/*----------------------------------*/
body{
    background-color:white;
    height:fit-content;
    width:fit-content;
    display:flex;
    flex-direction:column;
}
#wrapper{
    margin-bottom:20px;
    height:530px;
    display:flex;
    flex-direction:row;
}
/*----------------------------------*/
aside, #widget, main, header{
    display:flex;
    flex-direction:column;
}
aside, #widget, main, #decor{
    margin-right:20px;
}
aside{
    height:100%;
    width:250px;
    overflow-y:scroll;
    overflow-x:hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-left:20px;
    background-color:lightgray;
}
aside::webkit-scrollbar{
    display:none;
}
aside > button {
    width:110%;
    position:relative;
    left:-10px;
}
/*----------------------------------*/
#widget{
    width:250px;
    height:100%;
}
#widget > div{
    background-color:lightgray;
}
#widget > div:not(:last-child){
   margin-bottom:20px;
}
/*----------------------------------*/
#iFrame{
    height:455px;
    width:955px;
    border:0;
    background-color:lightgray;
}
#wrapper, #cool{
    margin-top:20px;
}
/*----------------------------------*/
#cool{
    display:flex;
    flex-direction:row;
    height:calc(20% - 45px);
}
#butt > button{
    width:60px;
    height:100%;
    padding:0;
    border-radius:100%;
    overflow:hidden;
    border:0;;
}
#butt > button:not(:first-child){
    margin-left:14px;
}
#stat{
    height:100%;
    overflow:hidden;
    border-radius:100%;
}
#decor{
    padding:8.5px;
    padding-left:0;
    padding-right:0;
    overflow:hidden;
    width:50%;
    background-color:lightgray;
}
#stamps{
    margin-top:7px;
    width:515px;
    overflow:hidden;
}
#stamps > iframe{
    width:100%;
    position:relative;
    height:100px;
    border:0;
}
/*----------------------------------*/
header{
    height:fit-content;
    width:auto;
    background-color:grey;
    display:flex;
    flex-direction:row;
}
#headwrap{
    display:flex;
    flex-direction:column;
    margin:20px;
}
#headrow1, #headrow2{
    display:flex;
    flex-direction:row;
}
#headrow1{
    margin-bottom:20px;
}
#headrow1 > img{
    margin-right:20px;
    border-radius:100%;
}
#headrow1 > div{
    background-color:dimgray;
    width:100%;
    height:75px;
}
#headrow2 > img{
    height:20px;
}
#headrow2 > img:not(:last-child){
    margin-right:20px;
}
#icon{
    height:auto;
    width:100%;
    background-color:black;
    padding:20px;
}
#icon > img{
    margin-left:5px;
}
/*----------------------------------*/
body {overflow-y: hidden;} /*Hides the scrollbar while loading.*/
#loadingScreen {
    position: fixed; /*Keeps the loading screen fixed on the screen */
    inset: 0; /*Makes loading screen wrap full screen.*/
    z-index: 999999; /*Makes loading screen stay on top.*/
    user-select: none; /*Disables user interaction with loading screen.*/
    transition: opacity 300ms; /*Adds a nice fading effect.*/
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7rem;
}
#loadingScreen::after {
    content: '';
    animation: loadingDots 1s linear infinite;
}
@keyframes loadingDots {
    0%, 100% {content: '';}
    25% {content: '.';}
    50% {content: '..';}
    75% {content: '...';}
}
/*----------------------------------*/
.css-loader {
  display: flex;
  gap: 9px;
  align-items: center;
}
.css-loader div {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  animation: bounce 1.2s ease-in-out infinite both;
}
.css-loader div:nth-child(1) { animation-delay: -0.32s; }
.css-loader div:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}