@font-face {
    font-family: 'BarlowCondensed';
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/BarlowCondensed-ExtraBold.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'BarlowCondensed';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/BarlowCondensed-Regular.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'BarlowCondensed';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/BarlowCondensed-Light.woff2) format('woff2');
    font-display: swap;
}


.social-links {
    max-width: 500px;
    justify-content: space-between;
}

.social-links li {
    font-size: 40px;
    transition: color, fill 0.4s;
}

h1 {
    font-family: 'BarlowCondensed', sans-serif;
    letter-spacing: 1px;
    font-size: 4.75rem !important;
}

p.text-lg.text-slate-400 {
    font-size: 2rem;
    font-family: 'BarlowCondensed', sans-serif;
    font-weight: 300;
}

.social-links li:hover {
    color: #fbfbfb;
    transform: scale(1.1);
}

.social-links li a span {
    display: block;
}

.social-links .subtitle {
    font-size: 0.75rem;
    transition: all .5s;
    opacity: 0;
    margin-top: 8px;
    font-family: 'BarlowCondensed';
    font-weight: 300;
}

.social-links li:hover .subtitle {
    opacity: 1;
}

.social-links li #section1,
.social-links li #section2 {
    transition: fill 0.4s;
}

.social-links li:hover #section1 {
    fill: #fbfbfb;
}

.social-links li:hover #section2 {
    fill: #D9DEE7;
}


.social-links .svg-icon path {
    transition: fill 0.4s;

}

.social-links li:hover .svg-icon path {
    fill: #fbfbfb;
}

span.svg-icon {
    margin: auto;
    width: fit-content;
}


@media (max-width: 768px) {

    h1 {
        letter-spacing: 0px;
        font-size: 3rem !important;
    }

    .social-links {
        flex-wrap: wrap;
    }

    .social-links li {
        width: 25%;
        margin-bottom: 48px;
    }

    .social-links li:nth-child(1) {
        order: 5;
    }

    .social-links li:nth-child(2) {
        order: 1;
    }

    .social-links li:nth-child(3) {
        order: 4;
    }

    .social-links li:nth-child(4) {
        order: 3;
    }

    .social-links li:nth-child(5) {
        order: 2;
    }

    .social-links li:nth-child(6) {
        order: 6;
    }

    .social-links li:nth-child(7) {
        order: 7;
    }

    .social-links li:nth-child(8) {
        order: 8;
    }

    .social-links .subtitle {
        display: none;
    }
}