/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    background:#000;
    color:#fff;
    overflow:hidden;
    font-family:
        Inter,
        Arial,
        sans-serif;
}

a{
    text-decoration:none;
    color:white;
}

img{
    display:block;
}

main{
    width:100%;
    height:100%;
    position:relative;
}
/* ==========================================
   DESKTOP
========================================== */

.desktop{

    width:100%;
    height:100vh;

    display:grid;
    grid-template-columns:1fr 1fr;

}

.panel{

    position:relative;
    overflow:hidden;

}

.panel img{

    width:100%;
    height:100%;

    object-fit:cover;

}
.platforms{

    position:absolute;

    top:8%;
    bottom:10%;

    left:42px;
    right:42px;

    display:flex;
    flex-direction:column;
    justify-content:space-evenly;

    z-index:20;

}
/* Левая колонка */

.anime-links{

    left:45px;
    right:auto;

    width:320px;

}

/* Правая колонка */

.real-links{

    right:45px;
    left:auto;

    width:320px;

}

.real-links .platform{

    justify-content:flex-end;

}

.platform{

    display:flex;
    align-items:center;

    gap:18px;

    font-size:30px;

    font-weight:600;

    color:#fff;

    opacity:1;

    text-shadow:
        0 0 12px rgba(0,0,0,.95);

    transition:.25s;

}

.platform:hover{

    transform:translateX(10px);

}
.platform img{

    width:36px;
    height:36px;

    object-fit:contain;

    filter:brightness(0) invert(1);

    opacity:1;

}
/* ==========================================
   MOBILE
========================================== */

.mobile{

    display:none;

    position:relative;

    width:100%;
    height:100vh;

    overflow:hidden;

}

.mobile img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.mobile .platforms{

    left:24px;
    right:24px;
    bottom:120px;

}

.mobile .platform{

    font-size:20px;

}

.mobile .platform img{

    width:30px;
    height:30px;

}
/* ==========================================
   SOCIAL
========================================== */

.social{

    position:fixed;

    left:0;
    right:0;
    bottom:28px;

    display:flex;

    justify-content:center;

    gap:26px;

    z-index:100;

}

.social a{

    transition:.25s;

}

.social a:hover{

    transform:translateY(-5px);

}

.social img{

    width:34px;
    height:34px;

    filter:brightness(0) invert(1);

    opacity:.9;

}

    filter:brightness(0) invert(1);

    opacity:.75;

}
/* ==========================================
   BOTTOM GRADIENT
========================================== */

.panel::after,
.mobile::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:28%;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.92),
        rgba(0,0,0,.65),
        rgba(0,0,0,0)
    );

    pointer-events:none;

}
/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:900px){

    body{

        overflow:auto;

    }

    .desktop{

        display:none;

    }

    .mobile{

        display:block;

    }

    .social{

        bottom:18px;

        gap:18px;

    }

    .social img{

        width:24px;
        height:24px;

    }

}