/* Basic reset and box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set up body to center content */
body {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Full-screen containers */
.INTRO {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: auto;
}

/* Scaling container */
.scaling-container {
    width: 100%;
    height: 100%;
    max-width: 430px;
    max-height: 932px;
    position: relative;
    transform-origin: top left;
}


/* Your existing font-face and other styles... */

/* Ensure the image is not distorted */
.INTRO .pills {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.dropdown {
    font-family: 'Neulis Alt-Regular';
}

#myInput {
    font-family: 'Neulis Alt-Regular';
}

.frame-wrapper1.selected {
    background-color: #efe8e3;
}

.skip {
    /* Add your existing styles here */
    cursor: pointer; /* Change cursor to pointer on hover */
}


/* Custom fonts */
@font-face {
    font-family: 'Neulis Alt-SemiBold';
    src: url('/assets/fonts/NeulisAlt-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Neulis Bold';
    src: url('/assets/fonts/NeulisAlt-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Neulis-SemiBold';
    src: url('/assets/fonts/Neulis-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Neulis Alt-Regular';
    src: url('/assets/fonts/NeulisAlt-Medium.otf') format('opentype');
    /* font-weight: 400; */
    font-weight: 600;

    font-style: normal;
}

@font-face {
    font-family: 'Neulis';
    src: url('/assets/fonts/Neulis-Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'Neulis Alt';
    src: url('/assets/fonts/NeulisAlt-Light.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}



/* Ensure the image is not distorted */
.INTRO .pills {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure the image maintains its aspect ratio */
}

.dropdown {
    font-family: 'Neulis Alt-Regular';
}

#myInput{
    font-family: 'Neulis Alt-Regular';

}

.frame-wrapper1.selected {
    background-color: #efe8e3;
}

body {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}
.fade-out {
    animation: fadeOut 0.5s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}