body{
background-color:#191917;
position: absolute;
}
.container1{
display: flex;
justify-content: space-between;
margin: 250px;
background-image: url(.../descarga.jpg);
}
.h1{
color: #494FC1;
font-family: 'Open Sans';
font-size: 4em;
left: 0px;
top: 444px;
transform: translateY(-100%) translateX(0%);
text-align: center;
}
.h3{
color: #494FC1;
font-family: 'a dripping marker';
font-size: 4em;
left: 0px;
top: 444px;
transform: translateY(-100%) translateX(0%);
text-align: center;
}
.h2{
color: #A0FEFB;
font-family: 'BIGMACCA Regular';
left: 200px;
top: 200px;
font-size: 2em;
}
.button{
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: #FD084A;
outline: 2px solid #FD084A;
padding: 30px 60px;
position: relative;
overflow: hidden;
transition: color 1s;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
font-family: 'Cascadia Code Regular', sans-serif;
text-align: center;
font-size: 12px;
}
.button:hover{
color: #191917;
}
.button::before{
content: '';
top: 0;
left: -50px;
width: 0;
height: 100%;
background-color: #494FC1;
transform: skewX(30deg);
z-index: -1;
position: absolute;
transition: width 1s;
}
.button:hover::before{
width: 150%;
}
.grid-container{
display: grid;
grid-template-columns: repeat(5, 1fr);
text-align: center;
justify-content: center;
gap: 20px;
}