body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #333;
    
}
#menu{
    
    padding-top: 8%;
    height: 18vw;
    width: 80vw;
    
}
#menubuts{
    
    position: relative;
    background: #ffffffce;
    color: #000;
    font-size: 2vw;
    letter-spacing: 0.1vw;
    font-weight: 100;
    padding: 1vw;
    transition: 0.3s;
    border-radius: 0.5vw;
    margin: 2vw;
}
#menubuts:hover{
    background: rgb(123,31,162);
    letter-spacing: 0.8vw ;
    box-shadow: 0 0 35px rgb(123,31,162);
}
#menubuts::before{
    content: '';
    position: absolute;
    inset: 2px;
    background: #27282c;
    
}
#contains_buttons{
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 15vw;
        width: 80vw;
        margin: 1vw;

}

:root{
    --purple:rgb(123,31,162);
    --violet:rgb(103,58,183);
    --pink:rgb(244,143,177);
}
@keyframes background-pan{
    from{
        background-position: 0% center;

    }
    to{
        background-position: -200% center;
    }
}
#magic {
    animation: background-pan 3s linear infinite;
    color: white;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 10vw;
    font-weight: 900;
    margin:2vh;
    padding: 1vh;
    text-align: center;
    background: linear-gradient(
        to right,
        var(--purple),var(--violet),var(--pink),var(--purple)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}