/* __Style Global Accueil__ */
.mask__content {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    background: var(--primary-color-meddark)
}

#mask {
    text-align: center;
    line-height: 1;
    color: transparent;
    /* padding-top: 10vh; */
    background-image: url(https://media.giphy.com/media/yoJC2tDYwQQSYnRlVm/giphy.gif);
    -webkit-background-clip: text;
    background-size: contain;
}

.huge__title {
    font-size: 30vh;
}

.huge__title,
.small__title {
    font-family: 'Fregan Serif', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
}


/* __Style Link Circle__ */
.link {
    width: 8rem;
    height: 8rem;
    font: 300 1.2rem/1.4 "Roboto Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.0850em;
    word-spacing: 0.3em;
    display: inline-block;
    padding-top: 2.5rem;
    text-decoration: none;
}

.link__svg {
    width: 100%;
    height: auto;
    transform-box: fill-box;
    fill: #DAB3A2;
    stroke: #fcf8f6;
    stroke-width: 0.05em;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.link__arrow {
    transform-origin: 50% 50%;
    transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0);
}

.link:hover .link__arrow {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.link__arrow {
    stroke-width: 0.075em;
}

.link__text {
    -webkit-animation: rotateReverse normal infinite 20s linear;
    animation: rotateReverse normal infinite 20s linear;
    transform-origin: 50% 50%;
}

.link:hover .link__text {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.link--alt {
    font-size: 1.15rem;
    letter-spacing: 0;
    word-spacing: 0;
}


/* __Keyframes__ */
@-webkit-keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotateReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes rotateReverse {
    to {
        transform: rotate(-360deg);
    }
}


/* __Media Queries__ */

/* Extra small devices (phones, 600px and -) */
@media screen and (max-width: 600px) {

    .title__1,
    .huge-title {
        display: none;
    }

    .title__2,
    .small__title {
        font-size: 14vh;
        line-height: 1.2em;
        letter-spacing: 0.1em;
        text-align: center;
        margin: 0 auto;
    }

    .title__2 {
        padding-top: 0;
        height: auto;
    }

    .main__content .navbar-brand span {
        margin: 0 0 0 1.5rem;
    }
}

/* Small devices (portrait tablets and large phones, 600px and +) */
@media screen and (min-width: 600px) {
    .huge__title {
        font-size: 14vh;
    }

    .title__2,
    .small__title {
        display: none;
    }
}

/* Large devices (laptops/desktops, 992px and +) */
@media screen and (min-width: 992px) {
    .huge__title {
        font-size: 18vh;
    }

    .title__2,
    .small__title {
        display: none;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and +) */
@media screen and (min-width: 1200px) {
    #mask {
        background-image: url(https://media.giphy.com/media/yoJC2tDYwQQSYnRlVm/giphy.gif);
        -webkit-background-clip: text;
        background-size: contain;
    }

    .title__2,
    .small__title {
        display: none;
    }
}