/* *{
    border: 1px solid red;
} */

:root {
    --border: rgb(13, 169, 13);
    --dots: rgba(20, 65, 20, 0.2);

    --g1: #33c583;
    --g2: #f98ef6;
    --g3: #fff600;
}

body{
    background-color: rgb(13,13,13);
    display: grid;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    place-items: center;
}

.card {
    aspect-ratio: 1/ 1.6;
    border: 0.5vmin solid var(--border);
    cursor: pointer;
    position: relative;
    width: 56vmin;
  }

.card::before{
    background: linear-gradient(
        135deg,
        transparent 0% 33%,
        var(--g1) 66%,
        var(--g2) 87.5%,
        var(--g3) 100%
    );
    background-position: 0% 0%;
    background-size: 300% 300%;
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 1;
    transition: background-position 350ms ease, transform 350ms ease;

}

.card:hover::before{
    background-position: 100% 100%;
    transform: scale(1.13, 1.07);
}


.card-content{
    height: calc(100% - 10vmin);
    width: calc(100% - 10vmin);
    padding: 5vmin;
    position: relative;
    /* adds a dot to the background, use the background-size attribute to fill the card with duplicates*/
    background-image: radial-gradient(
        var(--dots) 7%,
        transparent 7%
    );
    background-position: 0% 0%;
    background-size: 5vmin 5vmin;
    transition: background-position 350ms ease;
    z-index: 2;
}

.card:hover > .card-content {
    background-position: -10% 0%;
}




.card-title, .card-subtitle{
    color: white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 300;
    margin: 0px;
}

.card-title {
    font-size: 6vmin;
}
  
.card-subtitle {
    font-size: 3vmin;
    margin-top: 2vmin;
}

.card-subtitle-word{ 
    display: inline-block;
    margin: 0vmin 0.3vmin;
    position: relative;
    transform: translateY(40%);
    transition: none;
    opacity: 0;
}

.card:hover > .card-content > .card-subtitle > .card-subtitle-word{
    opacity: 1;
    transform: translateY(0%);
    transition: opacity 0ms, transform 200ms cubic-bezier(0.90, 0.06, 0.13, .90)
}