/* ####### Variables ####### */
:root {
    /* --- Generic Variables --- */
    /* Colors */
    --color-blue-0: #6691F5;
    --color-blue-1: #3A72F2;
    --color-blue-2: #0E4EE4;
    --color-blue-3: #1847CD;
    --color-blue-4: #1D40B6;
    --color-blue-5: #1F39A0;
    --color-white-0: #fdfdfd;
    --color-white-1: #f6f6f6;
    --color-white-2: #efefef;
    --color-white-3: #e8e8e8;
    --color-white-4: #e1e1e1;
    --color-white-5: #d3d3d3;
    --color-gray-0: #AAAAAA;
    --color-gray-1: #999999;
    --color-gray-2: #898989;
    --color-gray-3: #787878;
    --color-gray-4: #696969;
    --color-gray-5: #595959;
    --color-black-0: #3F3F3F;
    --color-black-1: #333333;
    --color-black-2: #282828;
    --color-black-3: #1D1D1D;
    --color-black-4: #121212;
    --color-black-5: #000000;
    --color-modrinth-0: #1BD96A;
    --color-modrinth-1: #20C360;
    --color-modrinth-2: #23AE57;
    --color-modrinth-3: #24994D;
    --color-modrinth-4: #238444;
    --color-modrinth-5: #22713B;
    --color-mc-red: #FF5555;
    --color-mc-dark-red: #AA0000;
    --color-mc-gold: #FFAA00;
    --color-mc-yellow: #FFFF55;
    --color-mc-green: #55FF55;
    --color-mc-dark-green: #00AA00;
    --color-mc-blue: #5555FF;
    --color-mc-dark-blue: #0000AA;
    --color-mc-aqua: #55FFFF;
    --color-mc-dark-aqua: #00AAAA;
    --color-mc-light-purple: #FF55FF;
    --color-mc-dark-purple: #AA00AA;
    --color-mc-gray: #AAAAAA;
    --color-mc-dark-gray: #555555;
    --color-mc-white: #FFFFFF;
    /* Spacing */
    --spacing-tiny: 4px;
    --spacing-small: 10px;
    --spacing-medium: 20px;
    --spacing-large: 30px;
    /* Borders */
    --border-tiny: 3px;
    --border-small: 6px;
    --border-medium: 9px;
    --border-large: 12px;
    --border-xtrlarge: 15px;
    /* Font Size */
    --font-tiny: 14px;
    --font-small: 18px;
    --font-medium: 20px;
    --font-large: 24px;
    --font-xtrlarge: 36px;
}

/* ####### Global Styling ####### */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/google_icons.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-blue-2);
}

li {
    margin-left: 24px;
    margin-bottom: 2px;
}

table {
    width: 50%;
    border-collapse: collapse;
    color: var(--color-black-5);
    width: 100%;
    margin: 12px 0px 0px 0px;
}

th,
td {
    border: 1px solid var(--color-black-5);
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.item {
    cursor: grab;
}

.item:active {
    cursor: grabbing;
}

/* ####### Vitally Important Site Styles ####### */
.gb-header-logo {
    display: inline-block;
}

@media screen and (max-width: 1200px) {
    .gb-header-logo {
        display: none;
    }
}

.logged-in {
    cursor: default;
    color: var(--color-blue-2);
    font-size: 48px;
}

.status-message.fail {
    background-color: lightcoral;
    color: white;
    padding: 7px;
    margin-left: 90px;
    margin-right: 90px;
    max-width: 100%;
    border-radius: 12px;
    font-size: 30px;
    text-align: center;
    margin-bottom: 30px;
}

.status-message.success {
    background-color: lightgreen;
    color: white;
    padding: 7px;
    margin-left: 90px;
    margin-right: 90px;
    max-width: 100%;
    border-radius: 12px;
    font-size: 30px;
    text-align: center;
    margin-bottom: 30px;
}


.error-header {
    text-align: center;
    font-size: 200px;
    color: black;
    margin-bottom: -40px;
}

.error-body {
    text-align: center;
    font-size: 50px;
    color: cornflowerblue;
    margin-bottom: 100px;
}


/* ####### Elements ####### */
/* --- Cards --- */
.gb-card {
    font-size: var(--font-small);
    color: var(--color-black-5);
    background-color: var(--color-white-0);
    border: var(--border-tiny) solid var(--color-white-1);
    border-radius: var(--border-tiny);
    padding: var(--spacing-medium);
    margin-top: var(--spacing-medium);
}

.gb-mc-card {
    font-size: var(--font-small);
    color: var(--color-black-5);
    background-color: #170817;
    border: var(--border-medium) solid #290560;
    border-radius: var(--border-small);
    padding: var(--spacing-medium);
    margin-top: var(--spacing-medium);
}

/* --- Text --- */
.gb-text {
    font-size: var(--font-small);
    color: var(--color-black-5);
}

.gb-text-tiny {
    font-size: var(--font-tiny);
    color: var(--color-black-5);
}

.gb-text-medium {
    font-size: var(--font-medium);
    color: var(--color-black-5);
}

.gb-text-large {
    font-size: var(--font-large);
    color: var(--color-black-5);
}

.gb-text-xtrlarge {
    font-size: var(--font-xtrlarge);
    color: var(--color-black-5);
}

.gb-mc-red {
    color: var(--color-mc-red);
}

.gb-mc-dark-red {
    color: var(--color-mc-dark-red);
}

.gb-mc-gold {
    color: var(--color-mc-gold);
}

.gb-mc-yellow {
    color: var(--color-mc-yellow);
}

.gb-mc-green {
    color: var(--color-mc-green);
}

.gb-mc-dark-green {
    color: var(--color-mc-dark-green);
}

.gb-mc-blue {
    color: var(--color-mc-blue);
}

.gb-mc-dark-blue {
    color: var(--color-mc-dark-blue);
}

.gb-mc-aqua {
    color: var(--color-mc-aqua);
}

.gb-mc-dark-aqua {
    color: var(--color-mc-dark-aqua);
}

.gb-mc-light-purple {
    color: var(--color-mc-light-purple);
}

.gb-mc-dark-purple {
    color: var(--color-mc-dark-purple);
}

.gb-mc-gray {
    color: var(--color-mc-gray);
}

.gb-mc-dark-gray {
    color: var(--color-mc-dark-gray);
}

.gb-mc-white {
    color: var(--color-mc-white);
}

.command-code {
    color: var(--color-black-5);
    background-color: var(--color-white-3);
    padding: 2px;
    font-family: monospace;
}

/* --- Buttons --- */
/* Regular Buttons */
.gb-btn-small {
    font-size: var(--font-small);
    color: var(--color-white-0);
    background-color: var(--color-blue-2);
    border-radius: var(--border-medium);
    padding: var(--spacing-small);
    margin: var(--spacing-small);
    border: none;
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-small:hover {
    color: var(--color-white-1);
    background-color: var(--color-blue-3);
}

.gb-btn-medium {
    font-size: var(--font-large);
    color: var(--color-white-0);
    background-color: var(--color-blue-2);
    border-radius: var(--border-large);
    padding: var(--spacing-medium);
    margin: var(--spacing-small);
    border: none;
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-medium:hover {
    color: var(--color-white-1);
    background-color: var(--color-blue-3);
}

.gb-btn-large {
    font-size: var(--font-xtrlarge);
    color: var(--color-white-0);
    background-color: var(--color-blue-2);
    border-radius: var(--border-xtrlarge);
    padding: var(--spacing-large);
    margin: var(--spacing-small);
    border: none;
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-large:hover {
    color: var(--color-white-1);
    background-color: var(--color-blue-3);
}

/* Alt Buttons */
.gb-btn-alt-small {
    font-size: var(--font-small);
    color: var(--color-white-0);
    background-color: var(--color-gray-2);
    border-radius: var(--border-medium);
    padding: var(--spacing-small);
    margin: var(--spacing-small);
    border: none;
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-alt-small:hover {
    color: var(--color-white-1);
    background-color: var(--color-gray-3);
}

.gb-btn-alt-medium {
    font-size: var(--font-large);
    color: var(--color-white-0);
    background-color: var(--color-gray-2);
    border-radius: var(--border-large);
    padding: var(--spacing-medium);
    margin: var(--spacing-small);
    border: none;
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-alt-medium:hover {
    color: var(--color-white-1);
    background-color: var(--color-gray-3);
}

.gb-btn-alt-large {
    font-size: var(--font-xtrlarge);
    color: var(--color-white-0);
    background-color: var(--color-gray-2);
    border-radius: var(--border-xtrlarge);
    padding: var(--spacing-large);
    margin: var(--spacing-small);
    border: none;
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-alt-large:hover {
    color: var(--color-white-1);
    background-color: var(--color-gray-3);
}

/* Icon Buttons */
.gb-btn-icon-small {
    font-size: calc(var(--font-small) + 2px);
    color: var(--color-gray-3);
    background-color: var(--color-white-4);
    border-radius: var(--border-small);
    padding: 0;
    margin: var(--spacing-tiny);
    border: var(--border-tiny) solid var(--color-gray-0);
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-icon-small:hover {
    color: var(--color-gray-4);
    background-color: var(--color-white-5);
    border-color: var(--color-gray-1);
}

.gb-btn-icon-medium {
    font-size: calc(var(--font-large) + 2px);
    color: var(--color-gray-4);
    background-color: var(--color-gray-0);
    border-radius: var(--border-medium);
    padding: 0;
    margin: var(--spacing-tiny);
    border: var(--border-tiny) solid var(--color-gray-2);
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-icon-medium:hover {
    color: var(--color-gray-5);
    background-color: var(--color-gray-1);
    border-color: var(--color-gray-3);
}

.gb-btn-icon-large {
    font-size: calc(var(--font-xtrlarge) + 2px);
    color: var(--color-gray-4);
    background-color: var(--color-gray-0);
    border-radius: var(--border-medium);
    padding: 0;
    margin: var(--spacing-tiny);
    border: var(--border-tiny) solid var(--color-gray-2);
    cursor: pointer;
    transition-duration: 0.25s;
}

.gb-btn-icon-large:hover {
    color: var(--color-gray-5);
    background-color: var(--color-gray-1);
    border-color: var(--color-gray-3);
}

/* --- Inputs --- */
.gb-input {
    background-color: var(--color-white-1);
    border: var(--border-tiny) solid var(--color-white-3);
    color: var(--color-black-5);
    margin-bottom: var(--spacing-small);
    width: 50%;
}

.gb-input-wide {
    background-color: var(--color-white-1);
    border: var(--border-tiny) solid var(--color-white-3);
    color: var(--color-black-5);
    margin-bottom: var(--spacing-small);
    width: 100%;
}

.gb-input-thin {
    background-color: var(--color-white-1);
    border: var(--border-tiny) solid var(--color-white-3);
    color: var(--color-black-5);
    margin-bottom: var(--spacing-small);
    width: 25%;
}

.gb-input[type="checkbox"] {
    margin-bottom: calc(var(--spacing-medium) - 8px);
    accent-color: var(--color-blue-2);
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    transition-duration: 0.25s;
}

textarea.gb-input {
    height: 64px;
    margin-bottom: calc(var(--spacing-medium) - 14px);
}

textarea.gb-input-wide {
    height: 64px;
    margin-bottom: calc(var(--spacing-medium) - 14px);
}

/* --- Special/Unique Elements --- */
.gb-info-button {
    font-size: var(--font-small);
    color: var(--color-blue-2);
    background-color: var(--color-white-1);
    border-radius: var(--border-medium);
    cursor: pointer;
    transition-duration: 0.2s;
}

.gb-info-button:hover {
    background-color: var(--color-white-3);
    color: var(--color-blue-3);
}

.gb-info-button-active {
    font-size: var(--font-small);
    color: var(--color-blue-4);
    background-color: var(--color-white-5);
    border-radius: var(--border-medium);
    cursor: pointer;
    transition-duration: 0.2s;
}

.gb-command-output {
    font-size: var(--font-small);
    color: var(--color-black-5);
    background-color: var(--color-blue-0);
    border: var(--border-small) solid var(--color-blue-1);
    padding: var(--spacing-tiny);
    margin: var(--spacing-small);
    font-family: monospace;
    overflow-wrap: break-word;
    overflow: hidden;
    height: 114px;
}

.gb-command-copy {
    background-color: var(--color-blue-2);
    color: var(--color-white-0);
    border-radius: var(--border-small);
    bottom: var(--spacing-small);
    right: var(--spacing-small);
    padding: 3px 6px 3px 6px;
    position: absolute;
    right: 20px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition-duration: 0.2s;
}

.gb-command-copy:hover {
    background-color: var(--color-blue-3);
    color: var(--color-white-4);
}

.gb-info-tooltip {
    width: 340px;
    position: absolute;
    top: 25px;
    left: 260px;
    font-size: 16px;
    color: black;
    background-color: #f8f8f8;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;
    border-color: #f0f0f0;
    padding: 10px;
    z-index: 100;
}

/* --- Notifier Styles --- */
.notifier {
    position: fixed;
    bottom: 50px;
    right: 90px;
    width: 300px;
    font-size: 22px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-left: 6px;
    padding-top: 6px;
    border-radius: 8px;
    height: 50px;
    max-height: 300px;
}

.success {
    background-color: #94FFAC;
    border: 4px solid #64E780;
    color: #358947;
    height: 125px;
}

.failure {
    background-color: #FF6D6D;
    border: 4px solid #DF5C5C;
    color: #A03434;
    height: 125px;
}

.warning {
    background-color: #FFBB61;
    border: 4px solid #DFA04D;
    color: #8A5817;
    height: 125px;
}

.info {
    background-color: #A6E9FD;
    border: 4px solid #91CDDF;
    color: #4D7D8C;
    height: 125px;
}

/* --- Images --- */
.gb-description-image {
    height: auto;
    width: auto;
    border-radius: 6px;
}

.gb-icon-image {
    height: 20px;
}

img.gb-promotional-img {
    transition: filter 0.5s ease;
}

img.gb-promotional-img:hover {
    filter: brightness(1.2) contrast(1.2);
}

/* --- Misc --- */
.gb-no-highlight {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.gb-hr {
    color:var(--color-gray-1);
    border-radius: var(--border-medium);
}