@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
*, html, body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    --bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1031%26quot%3b)' fill='none'%3e%3cpath d='M1450 929L1449 313' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M487 703L486 990' stroke-width='10' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M566 699L565 49' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1446 755L1445 312' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M355 121L354 -276' stroke-width='8' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M58 395L57 710' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1837 287L1836 1038' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M262 1014L261 1652' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M579 474L578 946' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M298 1072L297 1558' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1670 1063L1669 1865' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1047 647L1046 1153' stroke-width='6' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M662 1058L661 1818' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M571 160L570 -489' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M673 1063L672 770' stroke-width='8' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M538 222L537 -303' stroke-width='8' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1901 186L1900 -624' stroke-width='8' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M492 746L491 361' stroke-width='8' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1866 784L1865 1360' stroke-width='10' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1190 431L1189 1129' stroke-width='6' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1245 509L1244 -240' stroke-width='8' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M668 977L667 1638' stroke-width='10' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1801 155L1800 661' stroke-width='6' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1029 1001L1028 1737' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M82 492L81 839' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1434 83L1433 -521' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1748 307L1747 970' stroke-width='6' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M613 192L612 -454' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1670 368L1669 910' stroke-width='8' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M533 999L532 1676' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1026 958L1025 255' stroke-width='8' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M797 928L796 1554' stroke-width='10' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1188 520L1187 59' stroke-width='6' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M928 280L927 588' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1157 435L1156 -269' stroke-width='10' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M81 1068L80 673' stroke-width='8' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M43 237L42 -39' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1584 111L1583 -414' stroke-width='6' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1801 962L1800 319' stroke-width='8' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M286 185L285 993' stroke-width='8' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1757 715L1756 1460' stroke-width='10' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M711 904L710 1415' stroke-width='8' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M83 360L82 843' stroke-width='6' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1023 224L1022 -445' stroke-width='8' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1088 67L1087 814' stroke-width='10' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1758 95L1757 -712' stroke-width='6' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1472 1045L1471 1527' stroke-width='10' stroke='url(%23SvgjsLinearGradient1033)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M172 699L171 989' stroke-width='8' stroke='url(%23SvgjsLinearGradient1032)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1031'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient1032'%3e%3cstop stop-color='rgba(229%2c 229%2c 229%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(229%2c 229%2c 229%2c 0.09)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1033'%3e%3cstop stop-color='rgba(229%2c 229%2c 229%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(229%2c 229%2c 229%2c 0.09)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
}

:root {
    --main-color: #494949;
    --second-color: #DB9308;
}

main {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    overflow: hidden;
}

main::before,
main::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 20px;
    background-color: var(--main-color); 
    transition: width 0.3s ease;
}

main::before {
    left: 0;
    animation: borderAnimation 0.3s forwards;
}

main::after {
    right: 0;
    animation: borderAnimation 0.3s forwards;
}


main h1 {
    color: var(--main-color);
    font-size: 4.5rem;
}

main h2 {
    color: var(--second-color);
    font-weight: 700;
}

main h1,
main h2 {
    animation: fadeInUp 0.7s ease forwards;
}

.icons-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
}

.icons-container a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--main-color);
    margin: 0 2rem;
    width: 120px;
}

.icons-container img {
    height: 2.7rem;
    transition: transform 0.3s ease;
}

.icons-container span {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.icons-container a:hover img {
    transform: translateY(-10px);
    cursor: pointer;
}

.icons-container a:hover span {
    opacity: 1;
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes borderAnimation {
    to {
        width: 50%;
    }
}
