body {
    font-family: 'PT Sans', sans-serif;
}

b, strong {
    font-weight: 900;
}

h1, h2, h3, h4 {
    font-family: 'Geo', sans-serif;
}

.navbar-brand {
    font-family: 'Geo', sans-serif;
    font-size: 32px;
    color: aqua;
    text-shadow: 2px 2px 0 black;
}

.nav-link {
    font-family: 'Geo', sans-serif;
    font-size: 20px;
}

.mono, tt, code, pre {
    font-family: 'DM Mono', monospace;
}

code {
    color: inherit;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px 6px;
}

.display-1 {
    color: rgb(84, 210, 227);
    text-shadow: 3px 3px 0 black;
}

h1, h2, h3, h4 {
    text-shadow: 2px 2px 0 black;
}

.x-full-display {
    display: flex;
    width: 100%;
    height: 100vh;
    background-image: url('./bg.jpg');
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;

    @media screen and (max-width: 800px) {
        height: unset;
    }
}

.x-frost-card {
    border: 1px solid rgba(255, 255, 255, 0.147);
    outline: 1px solid rgba(0, 0, 0, 0.342);
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    padding: 32px;
}

.x-card {
    border: 1px solid rgba(255, 255, 255, 0.147);
    border-radius: 8px;
    padding: 12px;
    
    &.titled {
        padding: 0;
        overflow: hidden;
        
        h2:first-child {
            padding: 8px;
            margin: 0;
            background-color: rgba(0, 0, 0, 0.2);
        }
        
        .x-content {
            padding: 16px;
        }
    }
}

a:has(.x-server-list-entry) {
    text-decoration: none;
    color: inherit;
}

.x-server-list-entry {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content;
    overflow: hidden;
    position: relative;
    
    transition: all .15s ease-in-out;
    
    a {
        text-decoration: none;
        color: inherit;
    }
    
    .x-float {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2000;
        
        .badge {
            font-size: 16px;
            font-weight: normal;
        }
    }
    .x-lead {
        font-size: 80%;
    }
    .x-thumbnail {
        transition: all .15s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        aspect-ratio: 4 / 1;

        background-image: url('./entry.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        
        h1 {
            font-size: 80px;
            margin: 0;
        }
    }
    .x-details {
        display: grid;
        grid-template-columns: auto min-content;
        gap: 16px;
        align-items: center;
        box-sizing: border-box;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        padding: 12px;
        background: #6e6e6e;
        background: linear-gradient(180deg,rgb(73, 73, 73) 0%, rgba(28, 28, 28, 1) 100%);
        margin-top: -8px;
        z-index: 1000;
        
        .badge {
            font-size: 80%;
            
            &.text-bg-success {
                font-size: 90%;
            }
        }
    }
    
    &:hover {
        .x-thumbnail {
            filter: brightness(1.1);
            transform: scale(1.05);
        }
        .x-details {
            z-index: 1000;
        }
    }
}

.x-card-aside {
    border: 1px solid rgba(255, 255, 255, 0.147);
    border-radius: 8px;
    overflow: hidden;
    h4 {
        background-color: rgba(0, 0, 0, 0.2);
        padding: 12px;
        margin: 0;
    }
    .x-content {
        padding: 16px;
    }
}

.x-front-link-card {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.147);
    border-radius: 8px;
    border-bottom-right-radius: 16px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    
    --link-color: skyblue;
    
    &:nth-of-type(1) {
        --link-color: rgb(255, 176, 17);
    }
    &:nth-of-type(2) {
        --link-color: rgb(158, 255, 189);
    }
    &:nth-of-type(3) {
        --link-color: rgb(123, 204, 255);
    }
    
    &:not(:last-child) {
        margin-bottom: 8px;
    }
    
    h2 {
        position: relative;
        text-shadow: 2px 2px 0 black;
        margin-bottom: 0;
        color: var(--link-color);
        
        span {
            display: inline-block;
            &::before {
                content: '';
                position: absolute;
                display: inline-block;
                width: 100%;
                height: 2px;
                bottom: 0;
                left: 0;
                background-color: var(--link-color);
                transform-origin: left center;
                transform: scaleX(0);
                transition: transform 0.3s ease;
                box-shadow: 2px 2px 0 black;
            }
        }
    }
    
    &:hover {
        background-color: rgba(255, 255, 255, 0.1);
        h2 span::before {
            transform: scaleX(1);
        }
    }
}

i[class^="ri"], i[class^="ri-"] {
    display: inline-block;
    font-size: 0.8em;
    line-height: 100%;
    margin-top: -0.2em;
}

.x-copyright {
    font-size: 80%;
    a {
        color: white;
        text-decoration: underline;
        &:hover {
            color: orange;
        }
    }
}

.x-footer {
    margin-top: 64px;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 90%;
}

.x-server-info {
    
}

.x-file-upload {
    .x-preview {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        padding: 8px;
        display: flex;
        flex-wrap: wrap;
        user-select: none;
        
        img {
            aspect-ratio: 1 / 1;
            width: 100%;
            max-width: 100px;
            border-radius: 8px;
            object-fit: cover;
            object-position: center;
            cursor: pointer;
            margin: 4px;
        }
    }
}

.x-motd-display {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 8px;
}

.x-image-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    
    img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        cursor: pointer;
        transition: all .1s ease-in-out;
        
        &:hover {
            transform: scale(1.02);
        }
    }
    
    @media screen and (max-width: 1000px) {
        grid-template-columns: repeat(3, 1fr);
    }
    @media screen and (max-width: 600px) {
        grid-template-columns: repeat(2, 1fr);
    }
}