body {
    background-image: url(assets/bg.gif);
    color: white;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    cursor: url(/assets/mario1.png), default;
    animation: cursor 2.5s infinite;
    position:relative;
    z-index:-1;
    overflow-x: hidden;
    transition-duration: 2s;
}

  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background-image: url(assets/bg.gif); 
  }

  ::-webkit-scrollbar-thumb {
    background: #4A41AF; 
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #e30ffb; 
  }

#topbox {
    margin-top:30px;
    width: 750px;
    height:130px;
    border: 6px ridge #4A41AF;
    background-color:#04040b;
    padding: 50px;
  }

#leftbox {
    float:left;
    margin-top:30px;
    width: 120px;
    height: 470px;
    border: 6px ridge #4A41AF;
    background-color:#04040b;
    padding: 50px;
    z-index: 0;
    position:absolute;
}

#mainbox {
    margin-top:30px;
    margin-right:-270px;
    width: 480px;
    height: 180px;
    border: 6px ridge #4A41AF;
    background-color:#04040b;
    padding: 50px;
}

#bottombox1 {
    margin-top: 10px;
    margin-right: 70px;
    width: 140px;
    height: 100px;
    border: 6px ridge #4A41AF;
    background-color:#04040b;
    padding: 50px;
    background-image: url(/assets/bg.gif)
}

#bottombox2 {
    margin-top: -212px;
    margin-right: -550px;
    width: 200px;
    height: 100px;
    border: 6px ridge #4A41AF;
    background-color:#04040b;
    padding: 50px;
    background-image: url(/assets/bg.gif);
}
#bottombox3 {
    overflow: hidden;
    margin-top: 60px;
    margin-right: 100px;
    width: 130px;
    height: 100px;
    border: 6px ridge #4A41AF;
    background-color:#04040b;
    padding: 40px;
    background-image: url(/assets/bg.gif);
}

.chantier {
    cursor: url(/assets/smario.png), default;
    text-align: left;
    font-family: 'Comic Mono';
    float:left;
    font-size:15px;
    margin-left:-45px;
    margin-top:-85px;
    max-width: 270px;
}

.calendr {
    position:absolute;
    margin-right: 0px;
    margin-top: 40px;
}

#ban {
    margin-top: -14px;
    margin-left:270px;
    width: 580px;
    height: 35px;
    border: 6px ridge #4A41AF;
    background-color:#04040b;
    background-image: url(/assets/bg.gif);
    z-index:1;
}

.pubchild {
    margin-left:5px;
    margin-top:1px;
    border: 1px dashed #4A41AF;
}

.h:hover {
    width:95px;
    margin-top:-3px;
}

.blinkie {
    position:absolute;
    margin-top:-50px;
}

.chieng {
    max-width: 180px;
    margin-left:330px;
    border: 6px ridge #4A41AF;
    transition-duration: 1s;

}
.chieng:hover {
    animation: shake 0.4s infinite;
    opacity:0%;
    transition-duration: 2s;
}

.shifter {
    margin-left:-460px;
    margin-top:-20px;
    animation: resp 8s ease-in-out infinite;
}

.bvn {
    margin-top:-190px;
    margin-left: 350px;
    text-align: left;
    font-family: 'Comic Mono'
}

.fmt {
    position:absolute;
    text-align: left;
    font-family: 'Comic Mono';
    float:left;
    margin-left:-40px;
    max-width:140px;
    margin-top:-35px;
    z-index:-1
}

a {
    cursor: url(/assets/smario.png), default;
    text-decoration:none;
    color:white
}

.glb {
    text-align: left;
    font-family: 'Comic Mono';
    float:left;
    margin-left:-35px;
    margin-top:-20px;
}

.glbm {
    font-size:large;
    text-align: left;
    font-family: 'Comic Mono';
    float:left;
    margin-left:-35px;
    margin-top:-20px;
    text-decoration:underline wavy;
}

#coolgif {
    max-width: 120px;
    user-select: none;
    border: 6px ridge #4A41AF;
    background-image: url(/assets/bg.gif)
}

.sep {
    position:relative;
    text-align: left;
    font-family: 'Comic Mono';
    float:left;
    margin-left:-35px;
    margin-top:60px;
    margin-bottom:20px;
}
.sep2 {
    text-align: left;
    font-family: 'Comic Mono';
    float:left;
    margin-left:-35px;
    margin-bottom:20px;
}

#twitch-embed {
    position:absolute;
    margin-top:87px;
    margin-left:-35px;
    border: 5px ridge #4A41AF;
    padding:2px;
    background-color: #4A41AF;
}

.so {
    float:left;
    position:absolute;
    margin-left:-35px;
    border: 7px ridge #4A41AF;
    background-image: url(/assets/bg.gif);
    
}

.social {
    max-width:60px;
    margin:10px;
    user-select: none;    
    z-index:1;
}
.social:hover {
    cursor: url(/assets/smario.png), default;
    animation: social .65s infinite;
}

.cover {
    position:relative;
    z-index:2;
    float:right;
    max-width: 75px;
    border: 4px ridge #4A41AF;
    margin-right:-45px;
    margin-top:-40px;
}

.fmc {
    animation: float 4.5s linear infinite;
    z-index:3;
}

.gay {
    position:absolute;
    margin-top:-40px;
    z-index: 2;
    margin-left:60px;
    animation: gay .8s infinite;
}

.appl {
    position:asolute; 
    animation: appl 8s linear infinite;
}

.btn-toggle {
    position:absolute;
    margin-top:155px;
    margin-left:280px;
}

#myForm{
    position:absolute;
    margin-top:-611px;
    transform: rotate(90deg);
}
input[type="text"], textarea {
    background-image: url(assets/bg.gif);
    border: 4px ridge #4A41AF;
    color:cyan;
  }
input[type="button"] {
    transition:10s;
    background-color:cyan
}
input[type="button"]:hover {
    transition:1s;
    background-color:red
}
input[type="button"]:focus {
    animation: spin .5s linear
}

@keyframes spin {
    0% { transform: rotate(90deg)}
    50% { transform: rotate(270deg)}
    100% { transform: rotate(90deg)}
}


@keyframes scroll {
    0% { transform: translateX(323px)}
    100% {transform: translateX(-40px)}
}

@keyframes appl {
    0%, 100% { transform: translateX(400px)}
    50% {transform: translateX(-140px)}
}

@keyframes gay {
    0%, 100% { transform: translateY(0px)}
    50% {transform: translateY(-20px)}
}

@font-face {
    font-family: "Comic Mono";
    src: url("/assets/ComicMono.ttf");
    }
    
@keyframes social {
    0% { transform: translateY(0)}
    20% { transform: translateY(-2px); }
    30% { transform: translateY(-2px); }
    40% { transform: translateY(-3px); }
    50% { transform: translateY(-4px); }
    60% { transform: translateY(-6px); }
    80% { transform: translateY(-4px); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%{ transform: translateY(-8px); }
    }
@keyframes resp {
    0% {transform: rotate(-2deg)}
    25% {transform: rotate(2deg)}
    50% {transform: rotate(-2deg)}
    75% {transform: rotate(2deg)}
    100% {transform: rotate(-2deg)}
}
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
  @keyframes cursor {
    0% {cursor: url(/assets/mario1.png), auto;}
    80% {cursor: url(/assets/mario1.png), auto;}
    100% {cursor: url(/assets/mario2.png), auto;}
  }