*{
    box-sizing:border-box;
}

::-webkit-scrollbar {
    display:none;
}

body {
    margin:0;
    background-image: url(img/background.jpg);
    background-size: 100%;
    
}





.flex {
    display:flex;
    width:100vw;
    height:100vh;
    align-items:center;
}

.squarelayer {
    width:825px;
    height: 525px;
    background-color:rgba(108, 105, 174, 0.98);
    border-radius: 50px;
    border-bottom-left-radius: 60px;
    border-top-right-radius: 60px;
    align-items:center;
    justify-content: center;
    animation: shake 1.3s infinite;
    border-color:gray 15px;
    position: absolute;
    left:320px;
    z-index: 3;
    
}

.square {
    width:800px;
    height: 500px;
    background-color:rgba(108, 105, 174, 0.705);
    border-radius: 40px;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    gap:30px;
    animation: color 4s infinite;
    
}

.screen {
    height:95px;
    width:700px;
    background-color:rgba(250, 235, 215, 0.416);
    border-radius: 25px;
    overflow: hidden;
    text-align:left;
    
}
.marquee-content {
    white-space: nowrap;
    display: inline-block;
    color:rgb(92, 92, 92);
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 65px;
    align-items: center;
    justify-content: center;
    animation: marqueeAnim 10s linear -2s infinite;
  }

  @keyframes marqueeAnim {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
}
  

.bigsquare {
    height:300px;
    width: 700px;
    background-color:transparent;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: center;
    gap:200px;

}

.circle1 {
    width:250px;
    height: 250px;
    background-color:rgba(108, 105, 174, 0.705);
    border-radius: 50%;
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
    animation: pop 0.1s infinite alternate ease-out;
    position:fixed;
    z-index:2;
    left:40px;
    bottom:75px;

}
.buttomkey {
    height:270px;
    width:130px;
    background-color:rgba(108, 105, 174, 0.484);
    position:fixed;
    bottom:70px;
    display:flex;
    flex-direction:column;
    

}


.buttomkey1 {
    height:40px;
    width:100px;
    background-color:rgba(119, 205, 255, 0.496);
    position:relative;
    margin:15px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:26px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.601);
    padding:3px;
    padding-left:40px;
    justify-content: center;
    
}

.buttomkey2 {
    height:40px;
    width:100px;
    background-color:rgba(137, 119, 255, 0.496);
    position:relative;
    margin:15px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:20px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.601);
    padding:6px;
    padding-left:40px;
    justify-content: center;
    font-weight:100px;
    
    
}

.buttomkey3 {
    height:40px;
    width:100px;
    background-color:rgba(187, 119, 255, 0.496);
    position:relative;
    margin:15px;
    
}

.buttomkey4 {
    height:40px;
    width:100px;
    background-color:rgba(255, 93, 223, 0.471);
    position:relative;
    margin:15px;
    
}


.circle3 {
    width:250px;
    height: 250px;
    background-color:rgba(108, 105, 174, 0.705);
    border-radius: 50%;
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
    animation: pop 0.1s infinite alternate ease-out;
    position:fixed;
    z-index:2;
    right:60px;
    bottom:75px;

}

.circle4 {
    width:180px;
    height: 180px;
    background-color:rgba(97, 61, 130, 0.705);
    border-radius: 50%;
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
    animation: pop1 0.2s infinite alternate ease-out;

}

.circle5 {
    width:100px;
    height: 100px;
    background-color:rgba(128, 17, 118, 0.196);
    border-radius: 50%;
    animation: pop2 0.09s infinite alternate ease-out;
}

.vinylrecord {
    width:750px;
    height: 750px;
    background-color:transparent;
    animation: rotate 5s infinite linear;
    z-index: 1;
    position: fixed;
    right:-350px;
    bottom:4px;
    filter: opacity(60%)
}

.vinylrecord1 {
    width:600px;
    height: 600px;
    background-color:transparent;
    animation: rotate 5s infinite linear;
    z-index: 1;
    position: fixed;
    left:-300px;
    bottom:-300px;
    filter: opacity(60%)
}


@keyframes pop {
    0% {
        background-color: rgba(108, 105, 174, 0.705);
        transform: scale(1);
    }
    
    100% {
        background-color:rgba(36, 31, 102, 0.705);
        transform:scale(1.3);

    }
}

@keyframes pop1 {
    0% {
        background-color: rgba(108, 105, 174, 0.705);
        transform: scale(1.3);
    }
    
    100% {
        background-color:rgba(36, 31, 102, 0.705);
        transform:scale(1);

    }
}

@keyframes pop2 {
    0% {
        background-color: rgba(157, 22, 146, 0.705);
        transform: scale(1) translateY(-5px);
    }
    
    100% {
        background-color:rgb(200, 110, 210);
        transform:scale(1.2) translateY(5px);

    }
}

@keyframes color {
    0% {
        background-color: rgba(108, 105, 174, 0.705);
    }
    
    20% {
        background-color:rgb(255, 163, 184) ;
    }

    40% {
        background-color: rgba(145, 208, 221, 0.481);
    }

    60%{
        background-color: rgba(145, 221, 208, 0.481);
    }
    80%{
        background-color: rgba(145, 221, 173, 0.481);
    }
    100% {
        background-color:rgba(170, 111, 207, 0.8);

    }
}

@keyframes shake {
    0% {-webkit-transform:scale(1);}
    
    10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);}

    30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(3deg);}

    40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(-3deg);}

    100%{-webkit-transform:scale(1) rotate(0);}
}

@keyframes rotate {
    0% {
        transform:rotate(0)
    }
    100% {transform:rotate(360deg)
    }
}