@charset "UTF-8";
@import url("../../assets/fonts/ArchivoBlack-Regular.ttf");
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap");

html {
    background: transparent;
    color: #fff;
    font-family: Raleway, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    overflow: hidden
}

body,
html {
    height: 100%
}

body {
    background-image: url('../../assets/img/fans/cyberpunk.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* 검은색 반투명 오버레이 */
    z-index: -1;
}

h1 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 2rem
}

p {
    word-spacing: .1rem
}

a {
    color: #ff073a;
    text-decoration: none
}

a:hover {
    color: #fff
}

@keyframes a {

    0%,
    to {
        transform: translate(0)
    }

    25% {
        transform: translate(160%)
    }

    50% {
        transform: translate(160%, 160%)
    }

    75% {
        transform: translateY(160%)
    }
}

.footer {
    background: transparent;
    color: #ffffff;
    text-align: center
}

.footer .footer-container {
    background-color: #3533331e;
    padding: 8px;
    max-width: 100%;
}

.footer p {
    margin: 0.2rem 0;
    font-weight: bold;
    color: #ffffff
}

#landing {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    text-align: center
}

#landing,
.landing-title {
    margin: .5rem;
    padding: .5rem
}

.landing-title {
    left: 0;
    position: absolute;
    right: 0;
    top: 40%
}

.landing-icons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.landing-icons .social-link {
    color: #ffffff;
    position: relative;
    height: 3rem;
    line-height: 3rem;
    margin: .25rem;
    width: 3rem;
}

.landing-icons .social-link .circle {
    animation: c 1s ease-in-out forwards;
    fill: none;
    stroke-dasharray: 40;
    transition: all .2s ease-in-out
}

.landing-icons .social-link .social {
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    transition: all .5s ease-in-out;
    width: 100%
}

.landing-icons .social-link .social-svg {
    fill: #fff
}

.landing-icons .social-link .label {
    display: none;
    white-space: nowrap;
    position: absolute;
}

.landing-icons .social-link:hover {
    cursor: pointer
}

.landing-icons .social-link:hover .circle {
    animation: b 1s ease-in-out forwards, d 1s linear forwards;
    fill: #fff;
    fill-opacity: 1
}

.landing-icons .social-link:hover .social-svg {
    fill: #000
}

.landing-icons .social-link:hover .label {
    display: unset !important;
    bottom: -2.5rem;
    left: 50%;
    transform: translate(-50%)
}

.landing-icons .carat:hover .circle {
    animation: b 1s ease-in-out forwards, g 1s linear forwards
}

.landing-icons .carat:hover .social-svg {
    fill: url(#hover-gradient);
}

#toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    padding: 15px 20px;
    transform: translate(-50%, 10px);
    border-radius: 30px;
    overflow: hidden;
    font-size: .8rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s, transform .5s;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    z-index: 10000;
    font-weight: bold;
}

#toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0)
}

@keyframes b {
    to {
        stroke-dasharray: 510;
        stroke-width: .5rem
    }
}

@keyframes c {
    0% {
        stroke: #fff;
        stroke-dasharray: 510;
        stroke-width: .5rem
    }

    to {
        stroke: #fff;
        stroke-dasharray: 83;
        stroke-width: .5rem
    }
}

@keyframes d {
    to {
        stroke: #000
    }
}

@keyframes e {
    to {
        stroke: #b23121
    }
}

@keyframes f {
    to {
        stroke: #007bb6
    }
}

@keyframes g {
    to {
        stroke: #1da1f2
    }
}

@keyframes h {
    to {
        stroke: #f48224
    }
}

@media only screen and (min-width: 48em) {
    .landing-title h1 {
        font-size: 3rem
    }

    .landing-icons .social-link {
        width: 4rem;
        height: 4rem;
        line-height: 4rem
    }

    .landing-icons .social-link .social {
        font-size: 2rem
    }
}

@keyframes i {
    0% {
        bottom: 0
    }

    50% {
        bottom: .5rem
    }

    to {
        bottom: 0
    }
}