/* ==========================
   Variables
========================== */

:root {
    --background: #12161d;
    --card: #1d232d;
    --code: #001229;

    --white: #ffffff;
    --muted: #cccccc;

    --blue: #2c8cff;

    --green: #4caf50;
    --green-hover: #45a049;

    --copied: #35b84a;

    --border: rgba(255,255,255,.1);
}


/* ==========================
   Fonts + Reset
========================== */

@font-face {
    font-family: 'Gilland';
    src: url('../fonts/Gilland-Regular.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Gilland';
    src: url('../fonts/Gilland-Bold.otf') format('opentype');
    font-weight: 700;
}


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


body {

    background: var(--background);

    color: var(--white);

    font-family: 'Gilland', sans-serif;

    line-height: 1.6;
}


/* ==========================
   Layout
========================== */

main {

    max-width: 1400px;

    margin: auto;

    padding: 30px;

}


.layout {

    display: grid;

    grid-template-columns: minmax(0,1fr) 300px;

    gap: 24px;

    padding:20px;

}


.main-content {

    min-width:0;

}


.sidebar {

    position:sticky;

    top:20px;

    height:fit-content;

}


/* ==========================
   Hero
========================== */

.hero {

    height:620px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.65)
        ),
        url("../images/library_hero.png");


    background-size:cover;

    background-position:center;

}


.overlay h1 {

    font-size:6rem;

}


.overlay p {

    margin-top:10px;

    color:#ddd;

}


.release {

    display:inline-block;

    margin-top:25px;

    padding:12px 25px;

    background:var(--blue);

    border-radius:12px;

}


/* ==========================
   Cards
========================== */

.card {

    background:var(--card);

    padding:25px;

    margin-bottom:25px;

    border-radius:14px;

}


.card h2 {

    margin-bottom:20px;

}


/* ==========================
   Server
========================== */

.server-item {

    margin-bottom:25px;

}


.server-item:last-child {

    margin-bottom:0;

}


.server-item h3 {

    margin-bottom:10px;

    color:var(--muted);

    font-size:1rem;

}


/* ==========================
   Copy Box
========================== */

.copyBox {

    position:relative;

}


pre {

    background:var(--code);

    border:1px solid #3d3d3d;

    border-radius:8px;

    padding:12px 55px 12px 12px;

    overflow-x:auto;

    white-space:pre-wrap;
    overflow-wrap:anywhere;
}


code {

    font-family:'Gilland';

    color:white;

    font-size:1.1rem;

    letter-spacing:1px;

    word-break:break-all;

}


/* ==========================
   Copy Button
========================== */

.copyButton {

    position:absolute;

    right:10px;

    top:50%;

    transform:translateY(-50%);


    width:32px;

    height:32px;


    display:flex;

    justify-content:center;

    align-items:center;


    padding:0;


    background:rgba(255,255,255,.05);


    color:#9ca3af;


    border:

        1px solid rgba(255,255,255,.12);


    border-radius:8px;


    cursor:pointer;


    transition:

        background .15s ease,

        color .15s ease,

        border-color .15s ease,

        transform .1s ease;

}


.copyButton:hover {

    background:rgba(255,255,255,.12);

    color:white;

}


.copyButton:active {

    transform:

        translateY(-50%)

        scale(.92);

}


.copyButton svg {

    width:16px;

    height:16px;

    fill:currentColor;

}


.copyButton.copied {

    color:var(--copied);

    background:

        rgba(53,184,74,.15);

}


/* ==========================
   Support
========================== */

.support {

    text-align:center;

}


.supportButton {

    display:inline-block;

    margin-top:15px;

    padding:12px 24px;


    background:var(--green);

    color:white;


    border-radius:8px;

    text-decoration:none;

    font-weight:bold;


    transition:.2s ease;

}


.supportButton:hover {

    background:var(--green-hover);

    transform:translateY(-2px);

}


/* ==========================
   Settings
========================== */

.settings-list {

    padding:0;

}


.settings-list > div,
.setting {

    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:12px 0;


    border-bottom:

        1px solid var(--border);

}


.settings-list:last-child {

    border-bottom:none;

}


.settings-list dd {

    margin:0;

    font-weight:bold;

}


/* ==========================
   Footer
========================== */

footer {

    margin:40px 0;

    text-align:center;

    opacity:.6;

}


/* ==========================
   Mobile
========================== */

@media(max-width:768px) {


    main {

        padding:15px;

    }


    .layout {

        grid-template-columns:1fr;

        padding:10px;

    }


    .sidebar {

        position:static;

    }


    .hero {

        height:350px;

    }


    .overlay h1 {

        font-size:2.5rem;

    }


    .card {

        padding:18px;

    }

    pre {

        padding-right:50px;

        font-size:.95rem;

    }

    .copyButton {

        right:8px;

        width:28px;

        height:28px;

    }


    .setting {

        flex-direction:column;

        align-items:flex-start;

        gap:5px;

    }

}