@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&display=swap');



:root{
    --color1: #b8962e ;
    --color2: #c7c23c ;
    --color3: #0a0a0a ; 
}



*{
    margin: 0;
    padding: 0;
    font-family: "Baloo Bhaijaan 2", sans-serif;
    user-select: none;
}
body{
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    user-select: none;
}
.container{
    width: 70%;
    max-width: 500px;
    height: 350px;
    text-align: center;
    border: solid 3px;
    padding: 5px;
    background: var(--color3);
    border-radius: 10px;
    animation: rotate .6s linear infinite ;
    transition: .3s ;

}
.container:hover{
    color: var(--color2);
    transform: scale(1.05)
}
@keyframes rotate{
    0%{
        transition: ease-in-out 1s;
        border-color: var(--color2);
        box-shadow: 2px 2px 5px var(--color2) , -2px -2px 5px var(--color2);
    }
    25%{
        border-color: var(--color1);
        box-shadow: 2px 2px 10px var(--color1) , -2px -2px 10px var(--color1);
        transition: ease-in-out 1s;
    }
    50%{
        border-color: var(--color1);
         box-shadow: 2px 2px 10px var(--color1) , -2px -2px 10px var(--color1);
        transition: ease-in-out 1s;
    }
    100%{
        border-color: var(--color2) ;
        box-shadow: 2px 2px 5px var(--color2) , -2px -2px 5px var(--color2);
        transition: ease-in-out 1s;
    }

}
.container .content{
    margin-top: 20px;
}
.container .content img{
    width: 90px;
    margin-bottom: 5px;
}
.container .content h2{
    color: var(--color2);
    letter-spacing: 4px;
    font-weight: 700;
    font-size: 30px;
    text-shadow: 1px 1px var(--color1) , -1px -1px var(--color1);
}
.container .discord{
    width: 80%;
    height: 70px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
    padding: 5px;
    margin-top: 50px;
    border: solid 2px var(--color2);
    border-radius: 30px;
    text-decoration: none ;
    color: #f1f1f1;
    box-shadow: 3px 3px 10px var(--color2) , -2px -2px 9px var(--color1);
    font-size: 15px;
    transition: .3s;
}
.container .discord:hover{
    scale: 1.05;
}
.container .discord .icon{
    width: 70px;
}
@media (max-width:480px){
    .container .discord p{
        font-size: 10px;
    }
    .container .discord .icon{
        width: 50px;
    }
}