:root {
    --retro-color-blue: #18bbdb;
    --retro-color-orange: #fbba40;
    --retro-color-pink: #e339ca;
    --retro-color-purple: #662d90;
    --retro-color-green: #02b851;
}

@font-face {
    font-family: 'ShmupInTheZone';
    src: url('/static/fonts/shmup-in-the-zone/ShmupInTheZone.ttf') format("truetype");
}

@font-face {
    font-family: 'Xolonium';
    src: url('/static/retro/fonts/xolonium/Xolonium.ttf') format('truetype');
}

@font-face {
    font-family: 'Xolonium';
    src: url('/static/retro/fonts/xolonium/XoloniumBold.ttf') format('truetype');
    font-weight: bold;
}

.retro-section {
    position: relative;
    margin: 24px 8px 24px 8px;
    width: 100%;
    text-align: center;
}

.retro-title,
.retro-craft h2,
.btn-redsun-event-retro *:before,
.btn-redsun-event-retro *:after {
    display: inline-block;
    font-family: 'ShmupInTheZone';
    text-shadow: 2px 2px black, 4px 4px white;
}

.retro-text,
.retro-craft {
    font-family: 'Xolonium';
    color: white;
    text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
    font-weight: bold;
}

.retro-box, .retro-title {
    position: relative;
}

/* Settings for all boxes to set crazy shapes */
.btn-redsun-event-retro:before,
.retro-box,
.retro-box:before,
.retro-background:before {
    padding: 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
}

.retro-box {
    background-position: center;
    overflow: hidden;

    border-color: rgba(0, 0, 0, 0.5);
    border-style: solid;
    border-width: 15px;
}

.retro-title:has(> .retro-box) {
    padding: 10px 20px 10px 20px;
}

.retro-title > .retro-box {
    border-width: 5px;
}

.btn-redsun-event-retro:before,
.retro-box:before {
    left: -1000%;
    top: -1000%;
    width: 2100%;
    height: 2100%;
}

.retro-box[transform="0"] { transform: perspective(100px) rotate(1deg) rotateX(0.5deg) rotateY(0.5deg) translateX(2%); }
.retro-box[transform="1"] { transform: perspective(100px) rotate(1deg) rotateX(-0.5deg) rotateY(0.5deg) translateX(2%); }
.retro-box[transform="2"] { transform: perspective(100px) rotate(-1deg) rotateX(0.5deg) rotateY(0.5deg) translateX(2%); }
.retro-box[transform="3"] { transform: perspective(100px) rotate(-1deg) rotateX(-0.5deg) rotateY(0.5deg) translateX(2%); }
.retro-box[transform="4"] { transform: perspective(100px) rotate(1deg) rotateX(0.5deg) rotateY(-0.5deg) translateX(-2%); }
.retro-box[transform="5"] { transform: perspective(100px) rotate(1deg) rotateX(-0.5deg) rotateY(-0.5deg) translateX(-2%); }
.retro-box[transform="6"] { transform: perspective(100px) rotate(-1deg) rotateX(0.5deg) rotateY(-0.5deg) translateX(-2%); }
.retro-box[transform="7"] { transform: perspective(100px) rotate(-1deg) rotateX(-0.5deg) rotateY(-0.5deg) translateX(-2%); }

.retro-box[wallpaper="0"]:before { background-image: url('/static/retro/imgs/curves.png'); }
.retro-box[wallpaper="1"]:before { background-image: url('/static/retro/imgs/circles.png'); }
.retro-box[wallpaper="2"]:before { background-image: url('/static/retro/imgs/stripes.png'); }
.retro-box[wallpaper="3"]:before { background-image: url('/static/retro/imgs/rectangles.png'); }
.retro-box[wallpaper="amogus"]:before { background-image: url('/static/retro/imgs/amogus.png'); }

.retro-box[rotate="0"]:before { transform: rotate(5deg); }
.retro-box[rotate="1"]:before { transform: rotate(10deg); }
.retro-box[rotate="2"]:before { transform: rotate(15deg); }
.retro-box[rotate="3"]:before { transform: rotate(20deg); }
.retro-box[rotate="4"]:before { transform: rotate(25deg); }
.retro-box[rotate="5"]:before { transform: rotate(30deg); }
.retro-box[rotate="6"]:before { transform: rotate(35deg); }
.retro-box[rotate="7"]:before { transform: rotate(40deg); }
.retro-box[rotate="8"]:before { transform: rotate(45deg); }

.retro-box[background="0"], .retro-box-blue { background-color: var(--retro-color-blue); }
.retro-box[background="1"], .retro-box-orange { background-color: var(--retro-color-orange); }
.retro-box[background="2"], .retro-box-green { background-color: var(--retro-color-green); }
.retro-box[background="3"], .retro-box-pink { background-color: var(--retro-color-pink); }

[color="0"] h2, .retro-blue { color: var(--retro-color-blue) !important; }
[color="1"] h2, .retro-orange { color: var(--retro-color-orange) !important; }
[color="2"] h2, .retro-green { color: var(--retro-color-green) !important; }
[color="3"] h2, .retro-pink { color: var(--retro-color-pink) !important; }

.retro-section a { color: var(--retro-color-pink); }
.retro-section a:hover { color: var(--retro-color-purple); }

.btn-redsun-event-retro,
.retro-wallpaper-twoarrows {
    border-width: 0;
}

.btn-redsun-event-retro:before,
.retro-wallpaper-twoarrows:before {
    background-image: url('/static/retro/imgs/twoarrows.png'), url('/static/retro/imgs/twoarrows.png'), url('/static/retro/imgs/twoarrows.png'), url('/static/retro/imgs/twoarrows.png');
    background-color: var(--retro-color-purple);
    transform: rotate(35deg);
}

/* Crafts */

.retro-craft .category-block,
.retro-craft .category-block > * {
    background-color: transparent !important;
}

.retro-craft .opacity-25 {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 0, 0, 0.5);
}

.retro-craft .btn-primary,
.retro-craft .bg-secondary {
    padding: 2px 8px !important;

    border-color: rgba(0, 0, 0, 0.5);
    border-style: solid;
    border-width: 5px;
}

.retro-craft .btn-primary {
    background-color: #35b83c !important;
}

.retro-craft .bg-secondary {
    background-color: #ed4545 !important;
}

.retro-craft span,
.retro-craft .text-white {
    color: white !important;
}

.retro-craft .flex-wrap-start {
    justify-content: center;
}

/* Shadow background for groups */

.retro-background {
    position: relative;

    background-size: 0 0;   /* Prevent showing background image here, which is used for inherit below */
}

.retro-background:before {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: inherit;
    background-size: cover;
    background-position: center;
    mask-image: radial-gradient(closest-side, black, black 70%, rgba(0, 0, 0, 0.0) 100%);
    filter: brightness(1.5);

    aspect-ratio: 3 / 1;
    width: auto;
    max-width: 100%;

    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.retro-background > div {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.retro-background .retro-title,
.retro-background .retro-text {
    text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black;
}

/* Title/Sidebar */

.btn-redsun-event-retro {
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

.btn-redsun-event-retro,
.btn-redsun-event-retro:hover {
    color: transparent;
    text-shadow: none;
}

.btn-redsun-event-retro:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.btn-redsun-event-retro:before {
    z-index: -1;
    background-size: 48px 48px;
    background-position: center;
}

.btn-redsun-event-retro *:before,
.btn-redsun-event-retro *:after {
    padding: 0px 4px 4px 0px;

    position: absolute;
    z-index: 1;

    border-color: rgba(0, 0, 0, 0.5);
    border-style: solid;
    border-width: 5px;

    font-size: 32px;
    text-shadow: 1px 1px black, 2px 2px white;
}

.btn-redsun-event-retro *:before {
    content: "Warp";
    background-color: var(--retro-color-green);
    top: -5px;
}

.btn-redsun-event-retro *:after {
    content: "Zone";
    background-color: var(--retro-color-blue);
    top: -4px;
    transform: skew(-5deg, -6deg) !important;
    margin-left: 24px;
}

.retro-warp {
    top: -5px;
    right: -40px;
}

.retro-zone {
    top: 5px;
    left: -40px;
}

.retro-warp,
.btn-redsun-event-retro *:before {
    position: absolute;
    height: fit-content;
    line-height: normal;
    transform: skew(-20deg, -5deg);
    color: var(--retro-color-pink);
}

.retro-zone,
.btn-redsun-event-retro *:after {
    position: absolute;
    height: fit-content;
    line-height: normal;
    transform: skew(-5deg, -15deg);
    color: var(--retro-color-orange);
}

.retro-warp .retro-box,
.retro-zone .retro-box {
    border-width: 15px;
}

.retro-warp > *,
.retro-zone > * {
    font-size: 100px;
}

.blinking {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}