@import url('https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&display=swap');
body{
    background-color:lavender;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    letter-spacing:1px;
    text-align:justify;
    font-size:13px;
    line-height:20px;
    font-family:'Dawning of a New Day', cursive;
    margin:0 auto;
    color:black;
    overflow:hidden;
}

#main{
    position:relative;
    width:800px;
    margin:75px auto;
    display:flex;
}

.mainbox{
    position:relative;
    width:100%;
    height:auto;
    padding:6px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

.buttonreturntoindex{
    position:fixed;
    height:auto;
    width:auto;
    left:1%;
    top:1%;
    font-size:15px;
}

.title{
    position:relative;
    width:100%;
    height:150px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
}

.actualisolde{
    position:relative;
    height:300px;
    width:300px;
    cursor:pointer;
    background-image:url('https://files.catbox.moe/tt0cad.webp');
    background-position:center;
    background-size:cover;
    margin:0 auto;
}

.actualisolde.animate{
    animation:shakelikeababy 1s ease;
}

@keyframes shakelikeababy{
    0% {transform:rotate(0deg);}
    20% {transform:rotate(8deg);}
    40% {transform:rotate(-8deg);}
    60% {transform:rotate(8deg);}
    80% {transform:rotate(-8deg);}
    100% {transform:rotate(0deg);}
}

.scorecounter{
    position:relative;
    width:100%;
    height:150px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:25px;
}

.shop{
    position:fixed;
    width:200px;
    height:300px;
    padding:10px;
    justify-content:space-between;
    align-items:center;
    border:1px solid pink;
    background-color:white;
    border-bottom-left-radius:10px;
    border-top-left-radius:10px;
    left:100%;
    top:40%;
    transition:transform 1s ease-in-out;
}

.shop::before{
    content:'<';
    width:25px;
    height:50px;
    position:absolute;
    left:-27px;
    top:20px;
    border:1px solid pink;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    background-color:white;
    display:flex;
    justify-content:center;
    align-items:center;
}

.shop:hover{
    transform:translateX(-100%);
}

.shopmaincontent{
    height:auto;
    width:200px;
    position:relative;
    display:flex;
    justify-content:flex-start;
}

.shopitems{
    height:100%;
    width:200px;
    position:relative;
    display:flex;
    flex-direction:column;
    
}

.shopitem{
    position:relative;
    height:90px;
    width:190px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:5px;
    border:1px solid lavender;
    cursor:pointer;
    background-color:white;
}

.shopitemtext{
    position:relative;
    height:auto;
    width:auto;
}

.spinnything{
    width:250px;
    height:250px;
    top:12%;
    left:12%;
    position:absolute;
    z-index:950;
    animation:orbit 20s linear infinite;
    pointer-events:none;
}

@keyframes orbit{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.kakania, .kakania2, .kakania3{
    width:40px;
    height:40px;
    position:absolute;
    top:170px;
    left:260px;
    pointer-events:none;
    animation:slide 20s linear infinite;
    z-index:1000;
}

@keyframes slide{
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(260px, 0); }
    50%  { transform: translate(260px, 260px); }
    75%  { transform: translate(0, 260px); }
    100% { transform: translate(0, 0); }
}

.kakania{
    background-image:url('https://files.catbox.moe/rctavo.webp');
    background-position:center;
    background-size:cover;
}

.kakania2{
    background-image:url('https://files.catbox.moe/njea0p.webp');
    background-position:center;
    background-size:cover;
}

.kakania3{
    background-image:url('https://files.catbox.moe/bys5wd.webp');
    background-position:center;
    background-size:cover;
}