@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@font-face {
    font-family: Uncracked;
    src: url(/Uncracked.ttf);
}
:root {
    --theme-red-shadow: 
}
::selection {
    background-color: rgba(0, 0, 0, 0.13);
}
h1 {
    overflow:hidden;
    width: fit-content;
    padding-left: 8px;
    padding-right: 8px;
}
h1 a {
    color: inherit;
    text-decoration: none;
}
h1 a:hover {
    color: inherit;
}
body, html {
    background: #111111 !important;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body {
    overflow-x: hidden;
    font-family: 'Jost', 'Open Sans', sans-serif;

}
.text-input-dark {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}
.text-input-dark:focus {
    -webkit-box-shadow: 0 0 3px rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.2) !important;
}
.title {
    color: black;
    font-size: 5em;
    text-align: center;
    margin: 0;
    margin-bottom: 5px;
    user-select: none;
    font-family: Uncracked;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    transition: text-shadow 0.15s, transform 0.15s !important;
}
.title:hover {
    transform: rotate(-1deg);
    text-shadow: 0 1.25px 13px red;
}
.neon {
    text-shadow: 0 0 10px red;
    transition: text-shadow 0.15s;
}
.neon:hover {
    text-shadow: 0 1.25px 13px red;
}
nav {
    font-family: Uncracked;
    font-size: 2em;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
nav a {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    transition: transform 0.3s;
}
.brand {
    font-size: 0.9em !important;
    transform: rotate(-1.5deg);
}
.brand-blog {
    font-size: 0.9em !important;
    transform: rotate(-1deg);
}
header {
    user-select: none;
    margin-bottom: 55px;
}
footer {
    font-family: 'Jost';
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.dropdown-menu {
    font-size: 0.7em !important;
}
.sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
}
main {
    /* margin-top: 49.19px; */
    flex: 1
}
.cards-container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.homepage-card {
    font-family: Uncracked;
    box-shadow: 0 0 3px 3px rgba(255, 0, 0, 0.397);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(71, 71, 71, 0.158), rgba(255, 255, 255, 0)) !important;
    padding: 5px;
    margin-bottom: 25px;
    transition: box-shadow 0.15s;
}
.homepage-card:hover {
    box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.397)
}
.homepage-card:hover hr {
    margin-left: 8px;
    margin-right: 8px;
}
.homepage-card hr {
    color: red;
    box-shadow: 0 0 1px 1px red;
    margin-top: 0;
    transition: all 0.2s;
}
.homepage-card h3 {
    font-family: Uncracked;
    color: black;
    font-size: 4em;
    text-align: center;
    user-select: none;
}
.card-description {
    color: rgba(255,255,255,.55);
    font-size: 1.5em;
    letter-spacing: 1px;
    margin-left: 5px;
    margin-right: 5px;
}
.card-category {
    text-align: center;
    font-size: 2em;
    color: black;
    margin-top: -22px;
    margin-bottom: 0px;
    user-select: none;
}
.enter-btn {
    color: black;
    font-size: 1.8em;
    user-select: none;
}
.enter-btn:hover{
    color: black;
}
#top-navbar{
    z-index: 1;
}
@media screen and (max-height: 400px) {
    #footer {
        display: none
    }
}
@media screen and (min-width: 768px) { /* 731px */
    .show-small {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .title {
        font-size: 4em;
    }
}
@media screen and (max-width: 767px) { /* 730px */
    .title {
        font-size: 4em;
    }
    .show-big {
        display: none;
    }
    .title-main {
        display: block;
        margin-bottom: -25px;
    }
    .show-small {
        font-size: 3rem;
    }
}
@media screen and (max-width: 767px){
    #footer {
        max-height: 88px;
    }
}