body{
    background-image: url(images/Emojis\ rule\ the\ world!.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    
}
#logo{
    font-size: 150px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: black;
    background-color: #eed202;
    border: dotted, black;
    padding: 5px;
    width: fit-content;
    position:absolute;
    top: 40%;
    left: 5%;
    transform: rotateZ(2deg);
}
#musicplayer{
    position:absolute;
    top: 15.4%;
    left: 10%;
    border: solid, #53C9C9;
    rotate: -2.6deg;
}
#speakergif{
    position: absolute;
    top: 19%;
    left: 2.5%;
    rotate: -2deg;
}
#speakergif2{
    position: absolute;
    top: 20%;
    left: 29.5%;
    rotate: 1deg;
}
#scrollingtext{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 20px;
    color: red;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#buttontext{
    pointer-events: none;
}
#button1{
    position: absolute;
    left: 35%;
    top: 30%;
    --p: 50px;
    width: 64%;
    height: 20%;
    aspect-ratio: 2/3;
    clip-path: polygon(0 var(--p),0 calc(100% - var(--p)),100% 100%,100% 0);
    background: #33020f;
    transform: rotateZ(-5deg);
}
#button1text{
    position:absolute;
    top: 28%;
    right: 41%;
    color: white;
    font-size: 60px;
    font-family: "Rubik Spray Paint";
    transform: rotateZ(-7.7deg) scaleY(0.9);
    text-shadow: 5px 5px 3px#36101f;
}
#button2text{
    color: white;
    font-size: 60px;
    font-family: "Rubik Burned";
    position: absolute;
    top: 35%;
    right: 26%;
    transform: rotateZ(-3deg) scaleY(1.8);
    text-shadow: 5px 5px 3px#36101f;
}
#button3text{
    color: white;
    font-size: 60px;
    font-family: "Rubik Burned";
    position: absolute;
    right: 35%;
    bottom: 37%;
    transform: scaleY(1.7) rotateZ(3.5deg);
    text-shadow: 5px 5px 3px#36101f;
}
#button3img{
    position:absolute;
    right: 24%;
    bottom: 36.7%;
    transform: rotateZ(3deg) scaleY(1.2);
    border: solid #085023;
    background-color: #085023;
    border-width: 2%;
    border-radius: 3px;
    animation: 2s ease-in-out infinite wiggle;
}
@keyframes wiggle{
    from{transform: rotateZ(-3deg);}
    50%{transform: rotateZ(5deg);}
    to{transform: rotateZ(-3deg);}
}
#button2{
    position: absolute;
    left: 36.7%;
    top: 16%;
    --p: 50px;
    width: 62%;
    height: 20%;
    aspect-ratio: 2/3;
    clip-path: polygon(0 var(--p),0 calc(100% - var(--p)),100% 100%,100% 0);
    background: #33020f;
    transform: rotateZ(-11deg);
}
#button3{
 position: absolute;
    left: 35%;
    bottom: 31.5%;
    --p: 50px;
    width: 64%;
    height: 21%;
    aspect-ratio: 2/3;
    clip-path: polygon(0 var(--p),0 calc(100% - var(--p)),100% 100%,100% 0);
    background: #33020f;
    transform: rotateZ(3deg);   
}
a:link{
    color: black;
    text-decoration: none;
}
#yotsubaimg{
    position: absolute;
    top: 15.3%;
    left: 36%;
}
#disclaimer{
    position: absolute;
    bottom: 25%;
    left: 14%;
    border: dotted red;
    padding: 5px;
    border-radius: 5px;
    color: red;
    background-color: white;
    font-size: 27px;
}
#disimg{
    position: absolute;
    bottom: 15%;
    left: 5%;
    transform: rotateZ(-12deg);
}
#roundedtab {
  --r: 20px; /* control the radius */

  line-height: 1.8; /* control the height */
  padding-inline: .5em;
  border-inline: var(--r) solid #0000;
  border-radius: calc(2*var(--r)) calc(2*var(--r)) 0 0/var(--r);
  mask: 
    radial-gradient(var(--r) at var(--r) 0,#0000 98%,#000 101%)
      calc(-1*var(--r)) 100%/100% var(--r) repeat-x,
    conic-gradient(#000 0 0) padding-box;
  background: #bd5532 border-box; /* border-box is needed for a gradient coloration */
  width: fit-content;
  position: absolute;
  right: 26.5%;
  top: 20%;
  transform: rotateZ(-14deg);
  font-size: 18px;
  font-family: "Flavors";
  text-shadow: 2px 2px 2px darkorange;
}
#cdimg{
    position: absolute;
    top: 37.5%;
    right: 39%;
    animation: 2.5s linear infinite running CDSpin
}
@keyframes CDSpin{
    from{transform: rotateZ(0deg);}
    to{transform: rotateZ(360deg);}
}
#blogicon{
    position: absolute;
    top: 23%;
    right: 34.7%;
    animation: 2s  ease-in-out infinite running torakoSpin;
}
@keyframes torakoSpin{
    from{transform: rotateY(-30deg)}
    to{transform: rotateY(30deg);}
}