:root {
    --bgColor: #000000;
    --brandingRed: #FF4F00;
}

.barcodeText {
    font-family: "Libre Barcode 39 Extended Text", system-ui;
    font-weight: 400;
    font-style: normal;
}
.barcode {
    font-family: "Libre Barcode 39 Extended", system-ui;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: rgb(35, 35, 35);
    overflow-y: scroll;
    margin:0;
    padding:0;
    font-family: 'Courier New', monospace;
    font-size: calc(15px + 0.390625vw);
    cursor: url("/Renders/KhaoManee/cursor.webp"), default;
}

body, a {
    text-decoration: none;
    color: #E0E2DB;
}

a {
    font-weight: bold;
}

.TitleText {
    font-size: calc(75px + 0.390625vw);
    color: var(--brandingRed);
    text-align: center;
    margin-top: 25px;
    margin-bottom: 0px;
}

.highlighted {
    color: var(--brandingRed);
}

/* holy grail 3-column layout */
/* grid container */
.holy-grail-bottom-footer-grid {
    display:grid;
    grid-template-rows:auto 1fr auto auto auto;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'footer';

    /* fallback height */
    min-height:100vh;

    /* new small viewport height for modern browsers */
    min-height:100svh;
}

/* general column padding */
.holy-grail-bottom-footer-grid > * {
    padding:1rem;
}

/* assign columns to grid areas */
.holy-grail-bottom-footer-grid > .header {
    grid-area:header;
}
.holy-grail-bottom-footer-grid > .main-content {
    grid-area:main-content;
}
.holy-grail-bottom-footer-grid > .left-sidebar {
    grid-area:left-sidebar;
}
.holy-grail-bottom-footer-grid > .right-sidebar {
    grid-area:right-sidebar;
}
.holy-grail-bottom-footer-grid > .footer {
    grid-area:footer;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-bottom-footer-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:auto 1fr auto auto;
        grid-template-areas:
            'header header'
            'main-content main-content'
            'left-sidebar right-sidebar'
            'footer footer';
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-bottom-footer-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows:auto 1fr auto;
        grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content right-sidebar'
            'footer footer footer footer';
    }
}

.machineList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.machineContainer {
    display: flex;
    flex-direction: column;
}

.machineContainer p {
    margin: 5px;
}

.artistList {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    width: 100%;
    height: 100%;
}

.artistList > .artistContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.artistContainer img {
    width: 176px;
    height: 176px;
    border-radius: 25%;
}

.mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mainYap {
    text-align: center;
}

#squishableElement {
    transition: transform 0.3s ease-out;
    cursor: pointer;
}

#squishableElement.squished {
    transform: scale(0.5);
}

.bgContainer {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

@keyframes pan {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 100% 0%;
    }
  }

.bgPattern {
    background-image: url("/Renders/KhaoManee/patternedBGCombined.webp");
    background-size: 10%;  
    position: absolute;
    left: 50%;
    top: 0px;
    translate: -50% 0%;
    height: 100%;
    width: 100%;
    min-width: 1200px;
    opacity: 0.10;
    animation: pan 180s linear infinite;
    will-change: background-position;
}

.bgPatternFade {
    background: radial-gradient(circle, transparent 75%, var(--bgColor));
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 1;
  }

.gr {
    --GradColor1: #000000;
    --GradColor2: var(--brandingRed);

    animation: bg-pan 3s linear infinite;
    background: linear-gradient(to right,
            var(--GradColor1),
            var(--GradColor2),
            var(--GradColor1));
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}