@font-face{
    font-family:dinpro;
    font-style:normal;
    font-display:swap;
    src:url(/font/dinpro.woff2);
}
:root {
    --color-1: #07f468;
    --color-2: #20ff78;
    --color-3: #b7f5cd;
    --color-4: #00cffc;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-opacity-1: #2e2e2ea1;
    --color-opacity-2: #96969669;
}
* {
    font-family: 'dinpro', sans-serif;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
html, body {
    background-color: #161420;
    background-image: url(/img/links-bg.png?v26072025);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 2.5vh;
}
button {
    outline:0;
    border:0;
}
a {
    text-decoration: none;
}
.hidden {
    display: none !important;
}
.ani-duration-30ms {
    animation-duration: 0.3s !important;
}
.ani-duration-50ms {
    animation-duration: 0.5s !important;
}
.brightness-dark {
    filter: brightness(0%);
}
.rotate90 {
    transform: rotate(90deg);
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.btn:hover,
.btn:active {
    filter: brightness(0.8) !important;
}
.disabled {
    pointer-events: none !important;
}
.disabled-fade {
    pointer-events: none !important;
    opacity: 0.5;
}
*::-webkit-scrollbar {
    width: 0;
}

/* MAIN */
.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    max-width: 55vh;
    margin: auto;
    padding: 9vh 1.5vh 2vh 1.5vh;
    overflow-x: hidden;
    position: relative;
}

/* BUTTONS */
.main > .buttons {
    position: absolute;
    top: 2vh;
}
.main > .buttons.left {
    left: 1.5vh;
}
.main > .buttons.right {
    right: 1.5vh;
}
.main > .buttons > .btn {
    background-color: var(--color-white);
    width: 11vh;
    height: 5vh;
    gap: 1vh;
}
.main > .buttons > .btn.copy {
    border-radius: 3vh;
}
.main > .buttons > .btn.share {
    width: 5vh;
    border-radius: 50%;
}

/* INFO */
.main > .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1vh;
    width: 100%;
    height: 20vh;
}
.main > .info > .logo {
    background-color: var(--color-2);
    background-image: url(/img/NHDsports-avt.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 9vh;
    width: 9vh;
    border-radius: 50%;
}
.main > .info > .name {
    color: var(--color-2);
    font-size: 3.3vh;
}
.main > .info > .socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5vh;
    height: 3.5vh;
    width: 100%;
}
.main > .info > .socials > a {
    color: var(--color-white);
    font-size: 3.5vh;
}
.main > .info > .socials > a:hover {
    transform: scale(1.1);
}

/* LINKS */
.main > .links {
    width: 100%;
    max-height: calc(100% - 20vh - 5vh);
    overflow: auto;
    margin-top: 5vh;
}
.main > .links > .hr {
    background: linear-gradient(90deg, rgba(48, 48, 48, 0) 0%, rgb(255 255 255 / 75%) 50%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 0.2vh;
    margin: 2vh auto 0 auto;
}
.main > .links > .item {
    background-color: var(--color-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1vh;
    width: 100%;
    height: 7vh;
    padding: 0 1vh;
    margin-top: 2vh;
    cursor: pointer;
    font-size: 2.5vh;
    white-space: nowrap;
    text-overflow: clip;
}
.main > .links > .item > .ic {
    display: flex;
    align-items: center;
    width: 8vh;
}
.main > .links > .item > .ic > img {
    width: 5vh;
    border-radius: 1.5vh;
}
.main > .links > .item:first-child {
    margin: 0;
}
.main > .links > .item:hover,
.main > .links > .item:active {
    background-color: var(--color-opacity-1);
    border: 0.3vh solid var(--color-2);
    color: var(--color-2);
}
.main > .links > .item > .name {
    text-align: center;
}
.main > .links > .item > .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vh;
    width: 8vh;
}
.main > .links > .item > .buttons > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5vh;
    width: 3.5vh;
    font-size: 2vh;
    opacity: 0.3;
    border-radius: 50%;
}
.main > .links > .item > .buttons > .btn:hover,
.main > .links > .item > .buttons > .btn:active {
    background-color: var(--color-opacity-2);
    opacity: 1;
    transform: scale(1.1);
}
.main > .links > .item > .buttons > .btn.disabled {
    opacity: 1;
}
.main > .links > .item > .buttons > .txt {
    font-size: 2vh;
    opacity: 0.5;
    text-wrap: nowrap;
}