@font-face {
    font-family: "Vanilla-Whale";
    font-style: normal;
     src: url(f9dc527f2417333d9616.otf);
}

@font-face {
    font-family: "Curly";
    font-style: normal;
    src: url(25db81b8054ea00773ac.otf);
}

@font-face {
    font-family: 'Cabin Sketch';
    font-style: normal;
    src: local('Cabin Sketch Regular'), local('CabinSketch-Regular'), url(2d4524fa96d4485f0907.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
    font-family: 'Kreon';
    font-style: normal;
    src: local('Kreon Regular'), local('Kreon-Regular'), url(c901f10d0c91a1b50d5c.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
    font-family: 'ds-term';
    font-style: normal;
    src: local('ds terminal'), local('DS-TERM'), url(de4989403599dd156386.TTF);
}

@font-face {
    font-family: 'larissa';
    font-style: normal;
    src: local('Larissa'), local('larissa'), url(a7996dca4fba4399bf54.ttf);
}

@font-face {
    font-family: 'll-pixel';
    font-style: normal;
    src: local('LL Pixel'), local('ll-pixel'), url(2e5d04eb2cbd829a61b1.ttf);
}

@font-face {
    font-family: "fell";
    src: url(fd9b51251ef83712c852.ttf);
}

@font-face {
    font-family: "fell";
    src: url(8a50eaa509964303ca3f.ttf);
    font-weight: bold;
}

@font-face {
    font-family: "fell";
    src: url(06d18cf88bfd6d2eb544.ttf);
    font-weight: bold;
    font-style: italic;
}

.vanilla {
    font-family: Vanilla-Whale;
}

.curly {
    font-family: "Curly";
}

.larissa {
    font-family: "larissa";
}

.pixel-font {
    font-family: 'll-pixel' !important;
}

.fell-font {
    font-family: 'fell';
}

.cabin {
    font-family: "Cabin Sketch";
}

.kreon {
    font-family: "Kreon";
}

html {
    --font-scale: 1;
}

body#bodyWithBackground {
    background-image: url(9909d53f79b8750c8c70.png);
    height: 100%;
    margin: 0;
    font-family: fell serif;
    color: white;
}

a {
    text-decoration: none;
    color: #99c9ff;
    text-shadow: #000 1px 1px 2px;
}

a:hover {
    color: #ffb06b;
    text-shadow: 1px 1px 3px black, 0px 0px 10px black;
    text-decoration: underline;
}

#page-build-metadata {
    font-size: 5px;
}

#vowel-sounds a {
    color: #83d0ff;
}

#vowel-sounds a:hover {
    color: black;
}

.person-bio, .bio-caption, .bio-title, h1, #about-text, .text-shadow {
    text-shadow: -1px -1px 2px black, 1px 1px 3px black, 0px 0px 10px black;
}

.person-info img {
    max-height: 300px;
    object-fit: contain;
    max-width: 100%;
}

#cryptograss-nav-link {
    margin-top: -2px;
}

#cryptograss-content blockquote {
    font-family: 'Cabin', sans-serif;
    font-style: italic;
    color: #f2c6ae;
    text-shadow: 1px 1px 0px black;
    margin-left: 40px;
    margin-right: 40px;
}

.aside1 {
    margin-top: 20px;
    background-color: antiquewhite;
    padding: 5px;
    font-family: 'Kreon', serif;
    font-size: .7em;
}

#footer {
    background-color: rgba(16, 0, 0, 0.59);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

#footer a img {
    margin-bottom: 10px;
    margin-top: 5px;
    width: 30px;
}

#top-nav {
    border-top: 1px solid #383b67;
}

#slogan {
    font-size: calc(1rem + .6vw);
    color: black;
    -webkit-text-stroke: 1px #424032;
    text-shadow: white -1px -1px 0px, white 1px 1px 0px, white 1px -1px 0px, white -1px 1px 0px;
    min-height: 32px;
}

nav#top-nav a.nav-link {
    font-size: 1.2em;
    color: #99c9ff;
    text-shadow: 0px 0px 1px black, 0px 0px 3px #1f0432, 0px 0px 2px #2f17ce;
    text-align: center;
}

.subnav button.nav-link {
    color: white;
    font-size: 1.2em;
}

.subnav button.nav-link:hover {
    color: #99c9ff;
}

nav#top-nav a.nav-link:hover {
    color: white;
}

nav#top-nav a.nav-link.active {
    color: #bd86ff;
}

/*These are the arrows*/
nav#top-nav a.nav-link span {
    display: none;
    color: #f2c6ae;
}

nav#top-nav a.nav-link.active span {
    display: inline;
}

#top-nav a:hover {
    text-shadow: 0px 0px 2px red, 0px 0px 9px #6a95cc, 0 0 20px #714400;
    color: white;
}

nav a img {
    max-height: 40px;
}

/*Looking for a way to implement this without the entire row triggering the hover.*/
/*#home-link-at-top:hover {*/
/*    filter: invert(100%) drop-shadow(1px 1px 1px white);*/
/*    color: black;*/
/*}*/

#immutable-string-band {
    text-shadow: none;
}

#listen-container iframe {
    width: 100%;
    min-height: 240px;
}

.section-heading {
    color: #f2c6ae;
    text-shadow: 1px 1px 0px #323232, 0px 0px 3px #343434
}

.timeframe {
    margin: auto;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-family: cabin;
    font-size: 1.6em;
}

.detail {
    font-family: 'Inconsolata', monospace;
    font-size: 1.4em;
}

.detail-bright-back {
    font-family: 'Inconsolata', monospace;
    width: 800px;
    margin: auto;
    margin-top: 30px;
    background-color: #cfcfcf;
    border: 5px ridge #5683bf;
    padding: 10px;
    font-size: 1.4em;
}

.detail-bright-back :is(h1,h2,h3,h4,h5) {
    margin: auto;
}

.detail-bright-back a {
    color: #9191ff;
    text-shadow: 1px 0px 0px black, 0px -1px 0px black
}

.detail-bright-back a:hover {
    color: gray;
}

.detail p {
    margin: 0;
    margin-top: 20px;
}

.detail-bright-back strong {
    text-shadow: 1px 1px 0px #2c00ff;
}

.media-item .detail-bright-back {
    margin: 0;
}

.detail h1 {
    margin: 0;
    font-size: 1.5em;
}

.orange-glow, .orange-glow a {
    text-shadow: #db7b46 0em 2px 3px;
}

.deep-stroke, .deep-stroke a {
    text-shadow: #000 1px 2px 1px, #000 -2px -1px 1px;
}

.bright {
    color: white;
    text-shadow: #7b6b15 0px 0px 1px, black 1px 1px 3px, black -1px -1px 3px, black 2px 2px 2px;
}

.page-headline {
    font-family: 'Cabin', sans-serif;
    width: 60%;
    margin: auto;
    margin-top: 80px;
    background-color: #cfcfcf;
    border-left: 2px dashed black;
    border-right: 1px dashed black;
    padding: 10px;
    font-size: 1.5em;
    text-align: center;
}

.small {
    font-size: .6em;
}

.big {
    font-size: 1.5em;
}

.center {
    margin: auto;
    text-align: center;
}

.media-share {
    background-color: rgba(156, 156, 156, 0.4);
    width: 600px;
    margin-top: -5px;
    padding: 10px 0 10px 0;
}

.media-share a img {
    /* width: 110px; */
    vertical-align: middle;
    margin-left: 10px;
    max-height: 40px;
    max-width: 135px;
    margin-right: 10px;
}

.media-item {
    border-bottom: 1px solid white;
    padding-bottm: 10px;
}

.media-item iframe {
    display: block;
    clear: left;
}

.small-credit {
    color: white;
    font-size: 15px;
    font-family: larissa;
}

.lower-photo {
    display: block;
    margin-top: 20px;
    margin: auto;
}

.sorta-background {
    position: absolute;
    z-index: 0;
    opacity: .4;
    width: 90%;
}

.very-bottom {
    position: fixed;
    bottom: 58px;
    width: 100%;
    background: #9390b7;
    font-size: 20px;
    text-align: center;
}

/*Mostrly Music and POAP stuff below*/

#right-of-puzzle {
    position: relative;
    left: 490px;
}

#puzzle-array {
    position: relative;
    float: left;
}

#puzzle-area {
    height: 525px;
    width: 500px;
}

#puzzle-area li {
    color: white;
    font-size: 1.8em;
    filter: drop-shadow(5px 2px 2px black);
    text-shadow: 1px 1px black;
}

#puzzle-array img {
    position: absolute;
}

#puzzle-array .top-left {
    top: 0;
    left: 0;
}

#puzzle-array .top-right {
    top: 0;
    left: 205px;
}

#puzzle-array .bottom-left {
    top: 229px;
    left: 0;
}

#puzzle-array .bottom-right {
    top: 167px;
    left: 205px;
}

.desaturated {
    filter: saturate(0);
}

.shadowed {
    filter: drop-shadow(-8px 8px 1px black) saturate(0);
}

.artFrame {
    height: 0;
    width: 0;
    filter: drop-shadow(3px 3px 2px black);
    border: 6px dashed;
    float: left;
    clear: left;
    margin-bottom: 30px;
}

#ensemble-intro {
    padding: 20px;
}

#productionArea, #ensembleArea {
    width: 1200px;
    display: none;
}

#productionArtFrame {
    opacity: 0;
    border-color: #a67b75;
}

#ensembleArtFrame {
    opacity: 0;
    border-color: black;
}

.purpleBox {
    background: rgba(90, 0, 131, 0.49) !important;
    color: white;
    text-shadow: 1px 1px 1px black;
    width: 450px;
    height: 405px;
    padding: 15px;
}

.box-to-the-right {
    height: 405px;
    padding: 15px;
    background: #908d86a3;
    float: left;
    width: 585px;
    margin-left: 75px;
    border: 1px solid white;
}

#poap-check-dialog .button {
    margin-left: 10px;
    font-size: 20px;
    background-color: #3c3cff;
    color: white;
    padding: 15px;
}

#POAPloadanimation {
    width: 160px;
    left: 155px;
    top: 188px;
    opacity: 0;
}

#poap-checking-now {
    opacity: 0;
    margin-left: 10px;
    width: 450px;
    height: 405px;
    display: none;
}

#found-poaps {
    opacity: 0;
    margin-left: 70px;
    display: none;
}

.tracklist {
    font-family: ll-pixel;
    font-size: 16px;
    width: 400px;
    margin-bottom: 15px;
}

#ursa-minor-actual-album {
    width: 100%;
    background: #592929d9;
    padding: 30px;
    border: 2px solid black;
    height: 0;
    opacity: 0;
    display: none;
}

#ursa-minor-actual-album iframe {
    float: left;
    clear: left;
}

#actual-download-link {
    color: #7a76fb;
}

.as-slice {
    height: 100px;
}

.as-slice .logo {
    position: fixed;
    height: 150px;
    width: 150px;
    top: 0;
    filter: drop-shadow(2px 3px 2px rgb(0 0 0 / 1));

}

.as-slice .logo:hover {
    filter: drop-shadow(2px 1px 12px rgb(0 0 0 / 1));
}

/* For video background */


.bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    background-size: cover;
}

.contentOnTopOfVideo {
    position: relative;
    z-index: 200;
    margin-bottom: 100px;
}

.media-metadata-above-video {
    height: 200px;
}

.index-0 {
    background-color: rgba(162, 198, 243, 0.18);
    border: 1px solid rgb(162, 198, 243);
}

.index-1 {
    background-color: rgba(106, 88, 119, 0.33);
    border: 1px solid rgb(58, 34, 75);
}

.index-2 {
    background-color: rgba(244, 199, 156, 0.33);
    border: 1px solid rgb(58, 34, 75);
}

.index-3 {
    background-color: rgba(133, 7, 144, 0.22);
    border: 1px solid rgb(162, 198, 243);
}

.all-shows-list h1 {
    font-size: 1.8em;
}

.all-shows-list h4 {
    font-size: 1.2em;
}

.semi-transparent-bg {
    background: linear-gradient(90deg, rgba(64, 70, 84, 0.7) 0%, rgba(58, 58, 62, .84) 100%);
}

#setlist .songPlay a {
    font-size: 1.1em;
    color: #b4beb0;
}

#setlist .tease-mode {
    margin-left: 1em;
    font-size: 12px;
}

#setlist .original-detail {
    color: #7692ff;
}

/* TODO: Settle on one convention for this. */
#setlist .video-game-detail,
#setlist .video_game-detail {
    color: rgb(192, 4, 4);
}

#setlist .cover-detail {
    color: rgba(206, 159, 6);
}

#setlist .traditional-detail {
    color: rgb(91, 198, 0);
}

.set-stones-available {
    color: #ff8989;
    font-family: Vanilla-Whale;
    font-size: 2em;
    text-shadow: 1px 1px black;
}

.single-set-list {
    background-color: #1e1e1e;
    color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
}

#rabbithash {
    font-weight: bold;
    font-size: 2em;
    text-shadow: 1px 1px black;
}

.stone-in-long-list {
    height: 25px;
}

.stone-data {
    background-color: rgba(60, 53, 92, 0.69);
}

.ensemble {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: rgba(248, 235, 216, 0.36);
    font-family: fell serif;
}

.ensemble a {
    color: #070836;
    text-shadow: #818181 1px 1px 2px;
}

.kuba-tribute {
    background-color: black;
}

.long-form h1 {
    font-family: ll-pixel;
    font-size: 3em;
}

.long-form h2 {
    font-family: ll-pixel;
    font-size: 2em;
}

.long-form h2.vanilla {
    font-family: Vanilla-Whale;
    font-size: 3.5em;
}

.long-form h3 {
    font-family: Kreon;
    font-size: 1.5em;
}

.long-form blockquote {
    font-style: italic;
    margin-left: 40px;
    margin-right: 40px;
}

.long-form-aside {
    float: right;
    margin-left: 20px;
    width: 25%;
    background-color: rgba(106, 88, 119, 0.33);
    border: 1px solid rgb(58, 34, 75);
}

.long-form-aside img {
    width: 100%;

}

.long-form-aside .caption {
    font-size: .8em;
}


.blue-railroad-section {
    padding: 2rem;
}

.blue-railroad-intro {
    border-radius: 8px;
    margin-top: 1rem;
}

.blue-railroad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

.blue-railroad-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.blue-railroad-card:hover {
    transform: translateY(-5px);
}

.blue-railroad-card .card-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.blue-railroad-card .video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.blue-railroad-card video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blue-railroad-card .btn {
    margin: 1rem;
}

.owner-section {
    padding: 1rem;
    text-align: center;
}

.owner-address {
    font-family: 'Inconsolata', monospace;
    font-size: 1.1em;
    color: #7692ff;
    word-break: break-all;
    margin-bottom: 0.5rem;
}

.video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
}
.show-poster {
    width: auto;
}
/* NES color picker */
.color-grid {
    display: grid;
    grid-template-columns: repeat(14, 40px);
    gap: 4px;
    max-width: 600px;
    margin: 20px auto;
}

.color-cell {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: transform 0.1s;
    position: relative;
}

.color-cell:hover {
    transform: scale(1.1);
    border: 1px solid #000;
    z-index: 2;
}

.color-cell:hover .tooltip {
    display: block;
}

.selected {
    border: 2px solid #000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.tooltip {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

#selected-color {
    margin: 20px;
    text-align: center;
    font-family: monospace;
}