*,
::before,
::after {
    box-sizing: border-box;
}

body {
    opacity: 1;
    width: auto;
    height: auto;
    background: url("/static/images/bg.jpg");
}

.titles {
    color: #f4f4f4;
}

.scrolls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.25em;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2rem;
    color: #f4f4f4;
}

.scrolls .center {
    font-size: 0.825rem;
}

.header {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: center;
}

.header ul li {
    margin: 0 1em;
    padding: 1em;
}

.header ul li a {
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    color: #f4f4f4;
}

.header ul li a::after {
    position: absolute;
    bottom: -3px;
    left: 0;
    content: "";
    width: 0;
    height: 3px;
    transition: all 0.2s linear;
}

.header ul li a:hover::after {
    width: 100%;
    background-color: #f4f4f4;
}

section {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100vh;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background-color: #f4f4f4;
    background-image: url("/static/images/bg.jpg");
    background-size: cover;
    scroll-snap-align: center;
    text-transform: uppercase;
}

section h2 {
    text-transform: uppercase;
    font-size: 2.25rem;
    font-weight: 900;
    padding: 0.5em 1em;
    color: #1d1e22;
    background-color: #f4f4f4;
    mix-blend-mode: screen;
    border-radius: 0.25em;
    pointer-events: none;
    user-select: none;
}

section:nth-child(2) {
    background-image: url("/static/images/bg.jpg");
}

section:nth-child(3) {
    background-image: url("/static/images/bg.jpg");
}

section:nth-child(4) {
    background-image: url("/static/images/bg.jpg");
}

#game-photos {
    text-align: center;
    margin-top: 50px;
}

.photo-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.photo-item {
    margin: 50px;
}

.photo-item img {
    width: 1200px; /* Adjust as needed */
    height: 600px; /* Adjust as needed */
    border-radius: 10px; /* Add rounded corners */
}

.photo-item p {
    margin-top: 10px;
    font-size: 16px;
}


.cards-container {
    display: flex;
    justify-content: space-around; /* Adjust as needed */
    align-items: center; /* Align items vertically */
    flex-wrap: wrap; /* Allow wrapping */
}

.card {
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    background: rgba(0, 0, 0, 0.43);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 3px 3px 12px 2px rgba(black, 0.6);
    transition: 0.2s;
    width: calc(33.33% - 2rem); /* Adjust width based on the number of cards */
    margin: 1rem; /* Adjust margin as needed */
}

.card:hover,
.card:focus-within {
    transform: translateY(-1rem);
}

.fancy {
    @supports (background-clip: text) or (-webkit-background-clip: text) {
        background-image: url("https://media.istockphoto.com/id/1130968781/vector/elegant-light-and-shine-vector-gold-blurred-gradient-style-background-texture-abstract-metal.jpg?s=612x612&w=0&k=20&c=S0h1mnW4K05RhgsIXxROyt_6T8kIVqMabUYYUTWj2wY=");
        background-size: 100%;
        background-position: center;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }
}

.participant-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
}

.participant {
    text-align: center;
    margin: 10px;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
}

.participant a img {
    width: 30px; /* Adjust the width as needed */
    height: 30px; /* Adjust the height as needed */
}


.participant img {
    margin-bottom: 10px;
    margin-right: 10px;
    width: 200px;
    height: 200px;
}

.participant p {
    margin: 0; /* Remove default margin */
}


.about-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px;
}

.about-item {
    font-weight: 900;
    padding: 0.5em 1em;
    color: #ffffff;
    background-color: #00000000;
    mix-blend-mode: screen;
    border-radius: 0.25em;
    border-color: black;
    pointer-events: none;
    user-select: none;
    width: 400px;
    height: 200px;
}

.technology-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px;
}

.technology-item {
    text-align: center;
    margin: 20px;
}

.technology-item img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    /* Removed border and border-radius */
}