@font-face {
    font-family: Roboto-Regular;
    src: url("../fonts/roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: Roboto-Thin;
    src: url("../fonts/roboto/Roboto-Thin.ttf");
}

@font-face {
    font-family:                   RobotoCondensed-Bold;
    src: url('/static/fonts/roboto/RobotoCondensed-Bold.ttf');
}

:root {
    background-color: #ffffff;
    font-family: "Roboto-Thin", sans-serif;
}

body {
    background-color: #ffffff;
    font-family: "Roboto-Thin", sans-serif;
    font-size: 6.5vw;
    width: 90vw;
    margin: auto;
    max-width: 90vw;
}

pre {
    font-size: 4vw;
}

.download_on_the_app_store {
    height: 61px;
}


button {
    font-family: 'RobotoCondensed-Bold';
    font-size: 20px;
    height: 61px;
    padding: 2px 30px;
    background-color: #e91e63;
    color: #ffffff;
    border-radius: 16px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border: solid #000000 2px;
}

.container {
    width: 50%;
    margin: 0 auto;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
    
.qr-code {
    width: 100%;
    height: 100%;
    /* Ensure crisp rendering */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.header_1 {
    font-size: 6.5vw;
    color: #000000;
}

.small_1 {
    font-family: RobotoCondensed-Bold;
    font-size: 1.3vw;
}

h1 {
    font-family: RobotoCondensed-Bold;
    font-size: 7.5vw;
}

h2 {
    font-size: 6.5vw;
}

h3 {
    font-size: 5vw;
}

h4 {
    font-size: 4vw;
}

h5 {
    font-size: 3.5vw;
}

h6 {
    font-size: 3vw;
}

p {
    font-size: 6vw;
}

.right-align {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: flex-end; /* Align items to the right */
}

.right-align a {
    margin-right: 2vw; /* Adjust spacing between links */
}

.right-align select,
.right-align img {
    margin-right: 2vw; /* Adjust spacing between select and image */
}
.boxed {
    border: #e91e63 solid 1px; 
    padding: 0vw 2vw;
}

.title_section {
    display: flex;
    align-items: center; /* Vertically centers the items */
    padding: 0; /* Adjust padding as needed */
}

.minimal img {
    width: 20vw;
    height: auto; /* Maintains aspect ratio */
}

.header_text {
    font-family: "Roboto-Thin", sans-serif;
    font-size: 8vw;
    margin: 0; /* Removes default margin */
    padding-left: 10px; /* Space between logo and text */
}

.red-line {
  display: block;
  height: 1px;
  background-color: #e91e63;
}

.text_centered {
    text-align: center;
}   

.full-width {
    width: 100%;
}

.no_style {
}

.email-wrapper {
    display: flex;
    justify-content: flex-start;  /* Aligns the content to the left */
    margin: 0;
    padding: 0;
}

.email-image {
    width: 50vw;
    object-fit: contain;  /* Ensures the image retains its aspect ratio */
    margin: 0;  /* Remove any default margins */

}

/* unvisited link */
a:link {
    color: #0000ff;
    border: transparent solid 1px;
    text-decoration: none;
    font-family: Roboto-Regular;
    font-size: 6.5vw;
    text-align: center;
    padding: 2px 2px 2px 2px;
    margin: 0px;
}

/* visited link */
a:visited {
    color: #0000ff;
    border: transparent solid 1px;
    text-decoration: none;
    font-family: Roboto-Regular;
    font-size: 6.5vw;
    text-align: center;
    padding: 2px 2px 2px 2px;
    margin: 0px;
}

/* mouse over link */
a:hover {
    color: #ff0033;
    border: #ff0033 solid 1px;
    text-decoration: none;
    font-family: Roboto-Regular;
    font-size: 6.5vw;
    text-align: center;
    padding: 2px 2px 2px 2px;
    margin: 0px;
}

/* selected link */
a:active {
    color: #0000ff;
    border: #f0f5ff solid 1px;
    text-decoration: none;
    font-family: Roboto-Regular;
    font-size: 6.5vw;
    text-align: center;
    padding: 2px 2px 2px 2px;
    margin: 0px;
}

select {
    font-family: 'Roboto-Thin';
    font-size: 20px;
    margin: 5px;
    border: solid 1px #000000; 
    background-color: #ffffff;
    border-radius: 16px;
    color: #000000;
}

/*
.video_centered {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

video {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
*/

/* Ensure the video container is responsive */
.video-container {
    max-width: 100%; /* Make sure it doesn’t overflow the container */
    height: auto; /* Maintain the aspect ratio */
    display: flex;
    justify-content: center; /* Center the video horizontally */
    align-items: center; /* Center the video vertically */
    overflow: hidden; /* Prevents the video from overflowing the container */
}

/* The video itself */
video {
    max-width: 100%; /* Ensure the video width adjusts within the container */
    max-height: 90vh; /* Limit the video height to 90% of the viewport height */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Allow video to scale with aspect ratio */
}

@media (min-width: 600px) {

    :root {
        font-family: "Roboto-Thin", sans-serif;
        --font-size-multiplier: 0.5;
    }

    body {
        font-family: "Roboto-Thin", sans-serif;
        font-size: calc(6.5 * var(--font-size-multiplier) * 1vw);
        width: 90vw;
        margin: auto;
        max-width: 90vw;
    }

    .header_1 {
        font-size: calc(6.5 * var(--font-size-multiplier) * 1vw);
        color: #000000;
    }

    pre {
        font-size: calc(4 * var(--font-size-multiplier) * 1vw);
    }

    .small_1 {
        font-family: RobotoCondensed-Bold;
        font-size: calc(1.3 * var(--font-size-multiplier) * 1vw);
    }

    h1 {
        font-family: RobotoCondensed-Bold;
        font-size: calc(7.5 * var(--font-size-multiplier) * 1vw);
    }

    h2 {
        font-size: calc(6.5 * var(--font-size-multiplier) * 1vw);
    }

    h3 {
        font-size: calc(5 * var(--font-size-multiplier) * 1vw);
    }

    h4 {
        font-size: calc(4 * var(--font-size-multiplier) * 1vw);
    }

    h5 {
        font-size: calc(3.5 * var(--font-size-multiplier) * 1vw);
    }

    h6 {
        font-size: calc(3 * var(--font-size-multiplier) * 1vw);
    }

    p {
        font-size: calc(6 * var(--font-size-multiplier) * 1vw);
    }

    .minimal img {
        font-size: calc(20 * var(--font-size-multiplier) * 1vw);
        height: auto; /* Maintains aspect ratio */
    }

    .header_text {
        font-family: "Roboto-Thin", sans-serif;
        font-size: calc(16 * var(--font-size-multiplier) * 1vw);
        margin: 0; /* Removes default margin */
        padding-left: 10px; /* Space between logo and text */
    }

    /* unvisited link */
    a:link {
        font-size: calc(6.5 * var(--font-size-multiplier) * 1vw);
        text-align: center;
        padding: 2px 2px 2px 2px;
        margin: 0px;
        color: #0000ff;
        border: transparent solid 1px;
        text-decoration: none;
        font-family: Roboto-Regular;
    }

    /* visited link */
    a:visited {
        font-size: calc(6.5 * var(--font-size-multiplier) * 1vw);
        text-align: center;
        padding: 2px 2px 2px 2px;
        margin: 0px;
        color: #0000ff;
        border: transparent solid 1px;
        text-decoration: none;
        font-family: Roboto-Regular;
    }   

    /* mouse over link */
    a:hover {
        font-size: calc(6.5 * var(--font-size-multiplier) * 1vw);
        text-align: center;
        padding: 2px 2px 2px 2px;
        margin: 0px;
        color: #0000ff;
        border: transparent solid 1px;
        text-decoration: none;
        font-family: Roboto-Regular;
    }

    /* selected link */
    a:active {
        font-size: calc(6.5 * var(--font-size-multiplier) * 1vw);
        text-align: center;
        padding: 2px 2px 2px 2px;
        margin: 0px;
        color: #0000ff;
        border: transparent solid 1px;
        text-decoration: none;
        font-family: Roboto-Regular;
    }

}