/*||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||DEFAULTS||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||*/
body {
  background-color: #1d1d1d;
}

body, h1, p {
    font-family: "Oswald", monospace;
    font-weight: 500;
    font-style: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}
p {
  margin: 0 0 10px;
}

a {
  color: #7f7f7f;
  text-decoration: none;
}
h1 {
  font-size: 48px;
  font-weight: 300;
  margin: 0 0 20px 0;
  color:#4f4f4f;
}
.lead {
  font-size: 21px;
  font-weight: 200;
  margin-bottom: 20px;
  color: #7e7e7e;
}
.navbar img
{
        max-width: 75px;
}
.footer{
    min-height:250px;
}
/*||||||||||||||||||||||||||||||||||||||||*/
/*|||||||||||||ANIMATION STUFF||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||*/
.lineup-carousel{
    margin: 10px auto;
    width:100%;
    border:none;
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    background: #ffe1bd;
    /*background: linear-gradient(355deg, rgba(255, 225, 189, 1) 0%, rgba(255, 244, 227, 1) 15%, rgba(255, 255, 255, 1) 100%);*/
    background-image: linear-gradient(0deg, #000000 6.52%, #fffaf0 6.52%, #fffaf0 50%, #000000 50%, #000000 56.52%, #fffaf0 56.52%, #fffaf0 100%);
    background-size: 46.00px 46.00px;
}
.carousel::-webkit-scrollbar{
    display:none;
}

.group{
    display:flex;
    align-items:center;
    justify-content:center;
}
.suspect{
    background-image: url('/assets/placeholderlineup.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 1 1 0;
    height:270px;
    padding:0;
    margin:0 2em 0 0;
    min-width:100px;
    animation-name:lineupsus;
    animation-delay: .5s;
    animation-duration:.4s;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
    align-content:center;
    opacity:0;
    filter: drop-shadow(5px -10px 5px rgba(90, 90, 90, 0.9));
}
.sushover{
    transition: transform .2s ease-in;
}
.sushover:hover{
    transform: scale(1.3);
}
@keyframes lineupsus{
    0%{
        transform: translateX(120px);
        opacity:0;
    }
    100%{
        transform: translateX(0px);
        opacity:1;
    }
}

#bookingForm{
    width:100%;
    margin:0;
    padding:0;
}
.booking-viewport {
    width: 100%;
    overflow: hidden; /* Hides the pages not in view */
    position: relative;
}
.booking-stage{
    display: flex;
    width: 300%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform; /* Pre-optimizes for GPU */
}
.field-div{
    width: 33.3%;
    flex:0 0 33.3%;
    margin:0;
    padding:0;
}
#bookingForm form .field-div textarea{
    width:100%;
    padding:0;
    margin:0;
}
.sushover input[type="radio"]:checked + .suspect {
    opacity: 1;
}

/* Optional: add a 'check' mark or text via pseudo-element */
.sushover input[type="radio"]:checked + .suspect::after {
    content: '✓ SELECTED';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    background: #000;
    color: #fff;
}
/*||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||CUSTOM FONTS||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||*/
/*
Robot Slab modern standard font
DM MONO is type-writer style
Oswald has a gotham batman series vibe
Ramabhadra makes a good h1 font
*/
.dm-mono-light {
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: normal;
}

.dm-mono-regular {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.dm-mono-medium {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
}

.dm-mono-light-italic {
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: italic;
}

.dm-mono-regular-italic {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.dm-mono-medium-italic {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: italic;
}

.rama-regular {
  font-family: "Ramabhadra", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.oswald-regular {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-slab-regular {
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  font-style: normal;
}