:root {
    --pink: #f14e95;
    --bg: #0a0a0a;
    --shadow: 0 2px 2px rgb(0 0 0 / 0.5);
    --gradd: linear-gradient(135deg, rgba(120, 240, 255, 0.8), rgba(255, 90, 220, 1))
}

body {
    font-size: 1.2rem;
    font-family: 'Work Sans', sans-serif;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(img/background-amplop.png);
    z-index: -1;
    filter: grayscale();
}

.hero {
    position: relative;
    min-height: 100vh;
}

.hero p, .hero h1, .hero h4 {
    text-shadow: var(--shadow);
}

.hero h1 {
    font-family: 'Sacramento', cursive;
    font-size: 6rem;
}

.hero h4 {
    font-size: 1.6rem;
}

.hero p {
    font-size: 1.4rem;
}

.hero a {
    /* overflow: visible; */
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 0.5rem;
    display: inline-flex;
    padding: 0.5rem 1rem;
    color: white;
    background: linear-gradient(135deg, rgba(120, 240, 255, 0.8), rgba(255, 90, 220, 1));
}

.hero a:hover {
    /* background-color: var(--pink); */
    color: var(--gradd);
    transform: translateY(-4px) translateZ(10px) rotateX(5deg);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(120, 240, 255, 0.2), 0 0 0 1px rgba(120, 240, 255, 0.1);
}



/* Laptop */
@media (max-width:992px) {
    html {
        font-size: 75% ;
    }
}
/* tablet */
@media (max-width:768px) {
    html {
        font-size: 65% ;
    }
}
/* phone */
@media (max-width:576px) {
    html {
        font-size: 50% ;
    }
}