/* Font definition */

@font-face {
    font-family: 'Vela Sans';
    src: url('font/VelaSans/VelaSans-Medium.woff') format('woff'),
         url('font/VelaSans/VelaSans-Medium.woff') format('woff2');
}

body {
    font-family: 'VelaSans', sans-serif;
    background-image: url(svg/bg-dots.svg);
}

.logo-container
{
    display: flex;
    position: absolute;
    height: auto;
    left: 0%;
    right: 0%;
    top: calc(50% - 587px/2);
    max-width: 1472px;
    max-height: 476px;

    background: #FFFFFF;
}

.logo-container img
{
    max-width: 100%;
    height: auto;
}


.links-container
{
    position: absolute;
    width: 353px;
    height: 246px;
    left: 0px;
    top: calc(70% - 49px/2);

    margin: 0;
}

.links-list
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0px;
    
}

.links-list li
{
    width: 353px;
    height: 41px;
    padding: 0;
    background-size: 200% 100%;
    background-image: linear-gradient(to right, #ffffff00 50%, #3E3E3E 50%);
    transition: background-position 50ms linear;
}

.links-list li:hover
{
    background-position: -100% 0;
}

.links-list li a
{
    position: absolute;
    left: 44.19%;
    

    font-family: 'Vela Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    color: #3E3E3E;
    text-decoration: none;

    transition: transform 50ms linear;
}

.links-list li:hover .link-icon
{
    filter: brightness(0) invert(1);
    transform: translateX(58px);

}



.links-list li:hover a
{
    color: #FFFFFF;
    transform: translateX(58px);

    display: inline-block;
    padding: 0 20% 2% 61%;
    margin: 0 -20% -2% -61%;
    
}

.link-icon
{
    position: relative;
    left: 99px;
    right: 226px;
    top: 2px;
    bottom: 6px;
    transition: transform 50ms linear;
}

.arrow
{
    position: absolute;
    left: 99px;
    right: 226px;

    font-family: 'Vela Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    color: #FFFFFF;
    display: none;

    transition: display 50ms linear;
}

ul.links-list li:hover span.arrow
{
    display: inline;
}


@media (prefers-color-scheme: dark) {
    body {
        background-image: url(svg/bg-dots-dark.svg);
        background-color: #000000;
    }

    .logo-container {
        background: #00000000;
    }

    .links-list li {
        background-image: linear-gradient(to right, #ffffff00 50%, #FFFFFFFF 50%);
    }

    .links-list li a
    {
        color: #FFFFFF;
    }

    .links-list li .link-icon
    {
        filter: brightness(0) invert(1);
    }

    .links-list li:hover .link-icon
    {
        filter: none;
    }

    .links-list li:hover a
    {
        color: #3E3E3E;
    }

    .arrow {
        color: #3E3E3E;
    }
}