@font-face {
    font-family: 'Kiona Light';
    src: url('/media/Kiona-Light.ttf') format('truetype');
    font-display: swap; /* Ensures text remains visible during font loading */
}
@font-face {
    font-family: 'Gotham Light';
    src: url('/media/Gotham/Gotham Light/Gotham Light.otf') format('opentype');
}
:root {
  --turquoise-dark: #13acd6;
  --turquoise-light: #10ffdc;
  --dark-blue: #0D2739;
}
body {
    font-family: 'Gotham Light', Geneva, monospace;
    color: white;
    margin: 0;
    background-color: #0d2739;
    font-weight: lighter;
    font-style: normal;
    font-size: 1.5rem;
}
h1 {
    color: white; 
    font-family: 'Kiona Light', Geneva, sans-serif;
    font-weight: 100;
    letter-spacing: 0.1em;
    font-size: 7rem;
    /* #10ffdc #13acd6 #ffffff  #0d2739 */
    text-align: center;
    padding: 60px 0 20px 0;
    margin: 0;
}
h2 {
    font-family: 'Gotham Light', Geneva, sans-serif;
    color: #10ffdc;
    text-align: center;
    font-weight: lighter;
    font-size: 3rem;
    margin: 0;
}
a {
    color: #13acd6;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.rounded-link {
    background-color: white; /* White background */
    color: #13acd6; /* Text color */
    padding: 15px 50px; /* Padding for the link */
    border-radius: 50px; /* Rounded corners set to high value to be always round*/
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Ensure the padding is applied */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
    font-size: 2rem;
    /* font-weight: bold; */
    margin: 15px;
    /* margin-left: 15px; */
    font-family: 'Gotham Light', Geneva, sans-serif;
}   
.rounded-link:hover {
    background-color: #13acd6; /* Change background color on hover */
    color: white; /* Change text color on hover */
    text-decoration: none;
}
ul {
    list-style-type: none;
    /* margin: 0 2vw 0 2vw; */
    text-align: center;
    padding-left: 0px;
}
.content-container { /*used to have a small margin around everything under the title, especially the cards in added_cards*/
    padding: 2vw; /*Adjust the padding as needed*/
    margin: 0 auto; /* Center the container */
    max-width: 1000px; /* Set a maximum width for the container */
}

.qr-code-container {
    text-align: center; /* Center the QR code container */
    margin: 20px 0; /* Add some margin for spacing */
}
.qr-code-container img {
    display: inline-block; /* Center the image within the container */
    height: auto; /* Set the height of the QR code */
    width: 50%;
}

.scroll-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent line breaks */
    margin-bottom: 30px;
}
    
.rectoverso-container {
    display: inline-flex; /* Use inline-flex to keep the container inline */
    justify-content: space-around; /* Adjusts the spacing between the cards */
    align-items: stretch; 
    gap: 20px; /* Adds space between the cards */
    width: 160%; /* Set the width to be wider than the page */
}


.container {
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
}
.header, .footer {
    background-color: #0D2739;
    color: white;
    text-align: center;
    /* padding: 20px 0; */
}
.section {
    padding: 20px 0;
    text-align: center;
    width: 100%;
    /* max-width: 1200px; */
}
.section img {
    max-width: 100%;
    height: auto;
}
.section p {
    margin: 10px 0;
}
.section a {
    color: #34D1B6;
    text-decoration: none;
}
.section-white {
    background-color: white;
    color: #0D2739;
    text-align: center;
    /* padding-top: 20px; */
}
.section-dark {
    background-color: var(--dark-blue);
    color:white;
    text-align: center;
    /* padding-top: 20px; */
}
.maxwidth {
    max-width: 1200px;
    margin: 0 auto;
}

.fixed-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 1000; /* Ensure the nav stays on top of other elements */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visibility */
}


.section-white h3 {
  color: var(--turquoise-dark);
}
.section-dark h3 {
  color: var(--turquoise-light);
}