*{
    background-color:#000000;
    font-family: caveat ; cursiva; 
}

#logo{
    width: 70%;
    margin-left: 15%;
    border-radius: 20%;
}

#logo2{
    width: 70%;
    margin-left: 15%;
    border-radius: 20%;
}


.button{
    background-color: darkgray;
    height: 60px;
    width: 300px;
    color: #f5bb48;
    border: 0px;
    border-radius: 15px;
    margin-top: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 35px;
    text-align: center;
    cursor: pointer;
    border: 0px;
    text-decoration: none;
}
.button{
width: 220px;
height: 50px;
border: none;
outline: none;
color: #000000;
background: #f5bb48;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}

.button:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}

.button:active {
color: #f5bb48
}

.button:active:after {
background: transparent;
}

.button:hover:before {
opacity: 1;
}

.button:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #f5bb48;
left: 0;
top: 0;
border-radius: 10px;
}

@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
.markent{
    color: #f5bb48;
    height: 50px;
    width: 200px;
    margin-top: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}