:root {

    font-size: 62.5%;

    --main-font: sans-serif;
    --main-color: #333;

    /* Add subtitle font weight and color variables */
    --subtitle-font-weight: light;
    --subtitle-color: #555;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--main-font);
    color: var(--main-color);
}
.container {
    /* Set fixed width for container */
    width: 60vw;

    /* Add top margin to push content down */
    margin: 15vh auto 0 auto;

    padding: 40px 0 40px 40px;
    text-align: left;

    /* Center container horizontally */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 600px) {
    .container {
        /* Set fixed width for container */
        width: 70vw;

        /* Add top margin to push content down */
        margin-top: 15vh;

        top: calc(25% - 20px);

        transform: translate(-50%, -50%);

        .title {
            font-size: 36px;
        }
        .subtitle {
            font-size: 16px;
        }
        .link {
            font-size :18px ;
        }

    }
}



.title {
    font-size: 36px;

    /* Reduce bottom margin to bring subtitle closer to title */
    margin-bottom: 0px;

    animation: fadeIn 1s ease-in-out;
}
.subtitle {
    font-size: 16px;
    margin-bottom: 20px;
    animation: fadeIn 2s ease-in-out;

    /* Use subtitle font weight and color variables */
    font-weight: var(--subtitle-font-weight);
    color: var(--subtitle-color);
}
.link {
     font-size :18px ;
     text-decoration :none ;
     font-kerning: normal;
     

     /* Set link color to always be main color */
     color :var(--main-color) ;

     /* Add arrow indicator on hover */
     position :relative ;
     padding-left :0px ;
     transition :all .60s ease-in-out ;
}


@media screen and (min-width: 1400px) {
    .title {
        font-size: calc(36px + (48 - 36) * ((100vw - 1400px) / (1800 - 1400)));
    }
    .subtitle {
        font-size: max(calc(10px + (24 - 16) * ((100vw - 1400px) / (1800 - 1400))), calc(36px * 10 / 16));
        margin-bottom: 1.5em;
    }
    .link {
        font-size: calc(18px + (24 - 18) * ((100vw - 1400px) / (1800 - 1400)));
    
        line-height: calc(42px + (48 - 48) * ((100vw - 1400px) / (1800 - 1400)));

    }


}




.link:hover{
     padding-left :45px ;
         /* Add padding-right to prevent overlap */
    padding-right: 30px
}

.link::before {
    content: "→";
    position: absolute;
    margin-top: -3px;
    top: 50%;
    transform: translateY(-50%);
    left: -45px;
    opacity: 0;
    transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}


.link:hover::before {
    left: 0;
    opacity: 0.9;
    padding-right: 5px;
    
}

/* Add mask and hide classes */
.mask {
  overflow:hidden;
}

.hide {
  transform: translateY(-200%);
  animation-name: slideDown;
  animation-duration: 1.7s;
  animation-timing-function:cubic-bezier(0.165,0.84,0.44,1);
  animation-fill-mode: forwards;
}

/* Remove left padding on ul element */
ul {
     list-style-type:none ;
     padding-left :0 ;
}

@keyframes fadeIn {
from {opacity :0;}
to {opacity :1;}
}

/* Add slide-down keyframes */
@keyframes slideDown {
to {transform :translateY(0);}
}