html, body {
    margin: 0;
}

/* .canva::before {
    background-image: url("../../assets/fondos/fondo1_1.PNG");
    position: fixed;
    align-content: center;
    height: 100vh;
    width: min(100vw, 600px); 
    content: '';
    top: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
} */

input::placeholder{
    color: white;
}

body { 
    color: black;
    font-size: min(4vw, 24px);
}

.canva {
    margin: 0 auto;
    overflow: hidden;
    width: min(100%, 600px);
}
.canva > div {
    overflow: hidden;
    position: relative;
}
.canva > section {
    overflow: hidden;
    position: relative;
}

.item-center {
    display: flex;
    justify-content: center;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}

section > div[name="block"] {
    position: absolute;
}
section > div[name="text"] {
    position: absolute;
}
section > img[name="image"] {
    position: absolute;
}
section > a[name="button"] {
    position: absolute;
}

.item-center > div[name="block"] {
    position: absolute;
}
.item-center > div[name="text"] {
    position: absolute;
}
.item-center > img[name="image"] {
    position: absolute;
}
.item-center > a[name="button"] {
    position: absolute;
}


a[name="button"] {
    text-decoration: none;
}


/* =========================== ANIMATIONS =========================== */
/* TRANSLATE */
.gif-move {
    opacity: 0;
    transform: translateX(100px);
    transition: 1s;
    transition-timing-function: ease-in-out;
}
.gif-move-x {
    opacity: 1 !important; 
    transform: translateX(0) !important;
}

/* SCALE */
.gif-scale {
    opacity: 0; 
    transform: scale(0.5);
    transition: 1s;
    transition-timing-function: ease-in-out;
}
.gif-scale-x {
    opacity: 1 !important; 
    transform: scale(1) !important;
}

/* SCALE */
.gif-grow {
    opacity: 1;
    width: 0px !important; 
    transition: 2s;
    transition-timing-function: ease-in-out;
}
.gif-grow-x {
    opacity: 1 !important;
    width: 25% !important;
}
.gif-grow-y {
    width: 0px !important;
} 

/* LEFT */
.gif-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: 1s;
    transition-timing-function: ease-in-out;
}
.gif-left-x {
    opacity: 1 !important; 
    transform: translateX(0) !important;
}

/* =========================== WRAP =========================== */
div[data-direction="vertical"] {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div[data-direction="horizontal"] {
    position: absolute;
    display: flex;
    justify-content: center;
}

div[name="wrap"] > div {
    position: relative;
    text-align: center;
}
div[name="wrap"] > img {
    position: relative;
}
div[name="wrap"] > a {
    position: relative;
    text-align: center;
}

div[name="wrap"] > .item-center > div {
    position: relative;
    text-align: center;
}
div[name="wrap"] > .item-center > img {
    position: relative;
}
div[name="wrap"] > .item-center > a {
    position: relative;
    text-align: center;
}

/*=============================== FORM ===============================*/
form > div { text-align: center; }

form > div[name="wrap"] {
    position: relative;
    text-align: center;
}

button:hover {
    cursor: pointer;
}


/* =========================== MUSIC =========================== */
.play-button {
    border-radius: 50%;
    background-color: rgb(201, 168, 168 / 10%);
    text-align: center;
    justify-content: center;
    border: 1px solid black;
    box-shadow: 3px 3px 7px 1px;
    width: min(10vw, 60px);
    height: min(10vw, 60px);
    position: fixed !important;
    top: 70%;
    margin-left: min(85vw, 510px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../../assets/button_icon/play.png');
    background-size: 55%;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 60%;
    transition: .3s ease;
}

.play-button:hover {
    cursor: pointer;
}

.playing {
    background-image: url('../../assets/button_icon/pause.png');
    background-position-x: 50%;
    background-size: 65%;
    cursor: pointer;
}