/* ========================
   Fonts
   ======================== */
@font-face {
    font-family: 'Press Start 2P';
    src: url('/assets/fonts/PressStart2P-Regular.ttf') format('truetype');
}

/* ========================
   Base / Body
   ======================== */
html body {
    color            : white !important;
    min-height       : 100vh;
    background       : linear-gradient(#00081C, #540088) fixed;
    position         : relative;
    font-size        : 20px;
    overflow-y       : scroll;

    /* sticky footer: header + main + footer stacked, main
       grows to fill so the footer is always at the bottom */
    display          : flex;
    flex-direction   : column;
}

html body > header,
html body > footer {
    flex-shrink : 0;
}

html body > .main-container {
    flex : 1 0 auto;
}

.noselect {
    -webkit-touch-callout : none; /* iOS Safari */
    -webkit-user-select   : none; /* Safari */
    -khtml-user-select    : none; /* Konqueror HTML */
    -moz-user-select      : none; /* Old versions of Firefox */
    -ms-user-select       : none; /* Internet Explorer/Edge */
    user-select           : none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

body a,
body a:hover {
    text-decoration : none !important;
    color           : cyan;
}

/* ========================
   Custom Scrollbar
   ======================== */
html {
    /* firefox only supports auto, thin or none, thin was barely visible on linux */
    scrollbar-width : auto;
    scrollbar-color  : rgba(122, 0, 194, 0.85) rgba(0, 8, 28, 0.5);
}

::-webkit-scrollbar {
    width  : 14px;
    height : 14px;
}

::-webkit-scrollbar-track {
    background : rgba(0, 8, 28, 0.5);
}

::-webkit-scrollbar-thumb {
    background   : rgba(122, 0, 194, 0.85);
    border-radius: 10px;
    border       : 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background : cyan;
}

::-webkit-scrollbar-corner {
    background : transparent;
}

/* ========================
   Header
   ======================== */
header {
    border-bottom : white solid 3px;
    height        : 100px;
}

.header-logo {
    margin-left : 20px;
    font-size   : 45px;
}

.header-logo a {
	font-family : 'Press Start 2P';
    color       : #fff;
}

.header-logo a {display : flex;}

.letter {
    display   : inline-block;
    animation : bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from {
        transform : translateY(0);
    }
    to {
        transform : translateY(-5px);
    }
}

.letter:nth-child(odd) {animation-delay : 0s;}
.letter:nth-child(even) {animation-delay : 0.2s;}

/* ========================
   Header Navigation
   ======================== */
.nav-menu {
    font-size     : 30px;
    padding-right : 20px !important;
}

.mobile-nav-icon {
    font-size    : 50px;
    margin-right : 30px;
}

.nav-menu a:not(:last-of-type) {
    margin-right : 10px;
}

.nav-menuitem {
    color : #fff;
}

/* ========================
   Mobile Navigation Modal
   ======================== */
.nav-menu-mobile .modal-body {
    display               : grid;
    grid-template-columns : 50% 50%;
}

.nav-menu-mobile .modal-body .nav-menuitem {
    margin-top    : 15px;
    margin-bottom : 15px;
    font-size     : 30px;
}

.nav-menu-mobile .modal-body .nav-menuitem i {
    margin-right : 5px;
    min-width    : 35px;
}

/* ========================
   Footer
   ======================== */
footer {
    text-align : center;
    padding : 10px;
}

/* ========================
   Main Content
   ======================== */
.main-container {
    padding-top    : 30px;
    padding-bottom : 30px;
}

.headline {
    text-align : center;
}

h1.headline,
h2.headline {
    font-size     : 50px;
    margin-top    : 10px;
    margin-bottom : 30px;

}

h3.headline {
    margin-top    : 50px;
    margin-bottom : 30px;
}

.desc {}

/* ========================
   Userscripts
   ======================== */
.userscript:not(:last-of-type) {
    padding-bottom : 30px !important;
    border-bottom  : solid #fff 3px;
}

.userscript:not(:first-of-type) {
    padding-bottom : 30px !important;
    padding-top    : 30px !important;
}

.userscript.deprecated,
.userscript.deprecated a {
    color : red;
}

.userscript-title {
    font-size   : 30px;
    font-weight : bold;
}

.userscript-desc {}

/* ========================
   Projects
   ======================== */
.projects {margin-bottom : 50px;}

.project-title {font-size : 40px; margin-bottom : 30px;}

.project-desc {}

.project-img {width : 100%; margin-bottom : 30px;}

/* ========================
   YouTube / Soundtracks
   ======================== */
.soundtracks {
    margin-top      : 30px;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
}

.soundtrack {
    margin-left       : auto;
    margin-right      : auto;
    margin-bottom     : 30px;
    padding           : 10px;
    border            : #fff solid 1px;
    border-radius     : 25px;
    width             : 300px;
    height            : 200px;
    background-size   : cover;
    background-repeat : no-repeat;
    position          : relative;
}

.soundtrack-title {
    display          : block;
    font-weight      : bold;
    padding          : 5px 10px;
    border-radius    : 15px;
    background-color : rgba(0, 0, 0, .5);
    backdrop-filter  : blur(3px);
    font-size: 16px;
}

.soundtrack-download {
    color             : #fff;
    border            : #fff solid 1px;
    border-radius     : 25px;
    padding           : 10px 25px;
    font-weight       : bold;
    text-transform    : uppercase;
    backdrop-filter   : blur(5px);
    position          : absolute;
    bottom            : 10px;
    left              : 50%;
    background-color  : rgba(0, 0, 0, .5);
    transform         : translateX(-50%);
    -moz-transform    : translateX(-50%);
    -webkit-transform : translateX(-50%);
}

/* ========================
   Anime
   ======================== */
.anime {
    margin-top    : 30px !important;
    margin-bottom : 30px;
}

.anime-col {
    margin-bottom : 30px;
}

.anime-title {
    font-size   : 30px;
    font-weight : bold;
    text-align  : center;
}

.anime-img {
    text-align : center;
    height     : 340px;
}

.anime-img > img {
    text-align : center;
    width      : auto;
}

#hentai-section {
    position: relative;
}

/* blurring effect for the hentai section */
#hentai-section .blurred {
    filter: blur(15px);
    pointer-events: none;
    opacity: 0.5;
    user-select: none;
}

/* container for the age confirm button */
#confirm-button-container {
    position: absolute;
    height: 100%;
}

/* styling for the age confirm button */
#confirm-button {
    position: sticky;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border: 2px solid cyan;
    background-color: #00081C;
    color: cyan;
    border-radius: 5px;
    transition: all 0.7s ease;
	margin-top: 150px;
	top: 50%;
    left: 50%;
    transform: translateX(-50%);
	z-index: 1;
}

/* hover effect for the age confirm button */
#confirm-button:hover {
    background-color: cyan;
    color: #00081C;
}

/* ========================
   Discord Widget
   ======================== */
#discord-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================
   Imprint
   ======================== */
.imprint p {
    font-size : 15px;
}

/* ========================
   Games Component
   ======================== */
.games-container {
    display         : flex;
    justify-content : center;
    width           : 100%;
}

.games-container a {
    position   : relative;
    display    : inline-block;   /* shrink-wrap tightly around the GIF */
    max-width  : 100%;
}

.games-container #games-img {
    display      : block;
    margin-left  : auto;
    margin-right : auto;
    max-width    : 100%;
}

#bored-bubble {
    pointer-events : none;
    position       : absolute;

    /* Anchored to the top-right corner of the GIF and sized relative to
       the GIF itself, so it scales with the image and can never reach
       outside it (and therefore never outside the container or window).
       No breakpoints needed. */
    top            : 20%;
    right          : 3%;
    left           : auto;
    margin         : 0;
    width          : clamp(120px, 42%, 200px);
    font-size      : clamp(8px, 3.2vw, 16px);
    padding        : clamp(4px, 1.6vw, 12px);
    overflow-wrap  : anywhere;

    opacity        : 0;
    visibility     : hidden;
    transition     : opacity 0.5s, visibility 0.5s;
}

#bored-bubble.show {
    opacity    : 1;
    visibility : visible;
    animation  : pop 0.5s;
}

@keyframes pop {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* ========================
   Cookie Consent Toggle Switch
   ======================== */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: #555;
    border-radius: 24px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.2s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.switch input:checked + .slider {
    background-color: #0d6efd;
}

.switch input:checked + .slider:before {
    transform: translateX(20px);
}