* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #96CDF0;
}

.screen {
    position: relative;
    width: 768px;
    height: 1024px;
    background-color: #96CDF0;
    overflow: hidden;
}

.decorative-circle {
    position: absolute;
    top: 327px;
    left: 137px;
    width: 1505px;
    height: 1505px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.decorative-circle-2 {
    position: absolute;
    top: -802px;
    left: -659px;
    width: 1505px;
    height: 1505px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.logo {
    position: absolute;
    top: 119px;
    left: 165px;
    width: 437px;
    height: 71px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.paris {
    position: absolute;
    top: 204px;
    left: -264px;
    width: 1133px;
    height: 403px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.button {
    position: absolute;
    top: 798px;
    left: 200px;
    width: 369px;
    height: 109px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 10px 6px #0000001A;
    border-radius: 999px;
    cursor: pointer;
    opacity: 1;
}

.textbuton {
    position: absolute;
    top: 820px;
    left: 293px;
    width: 183px;
    height: 65px;
    text-align: left;
    font-family: 'DM Sans';
    font-weight: bold;
    font-size: 50px;
    line-height: 65px;
    letter-spacing: 0px;
    color: #003DA5;
    cursor: pointer;
    opacity: 1;
}

.tepurtam {
    position: absolute;
    top: 419px;
    left: 50px;
    width: 460px;
    height: 79px;
    text-align: center;
    font-family: 'DM Sans';
    font-weight: bold;
    font-size: 60px;
    line-height: 79px;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-shadow: 6px 5px 6px #00000029;
    opacity: 1;
}

.big-text {
    position: absolute;
    top: 465px;
    left: 49px;
    width: 390px;
    height: 160px;
    text-align: center;
    font-family: 'GC Club Brand Demo';
    font-weight: normal;
    font-size: 160px;
    line-height: 208px;
    letter-spacing: 0px;
    color: #F32735;
    opacity: 1;
}

.elipse {
    position: absolute;
    top: 594px;
    left: 479px;
    width: 295px;
    height: 26px;
    background: #F32735 0% 0% no-repeat padding-box;
    box-shadow: inset 16px 10px 10px #68FF7C29, 0px 3px 6px #00000029;
    border: 1px solid #DC3232;
    border-radius: 50%;
    opacity: 1;
}

.subtext {
    position: absolute;
    top: 626px;
    left: 50px;
    width: 605px;
    height: 39px;
    text-align: left;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 30px;
    line-height: 39px;
    letter-spacing: 0px;
    color: #003DA5;
    text-shadow: 10px 7px 8px #00000029;
    opacity: 1;
}

.slanted-text {
    position: absolute;
    top: 464px;
    left: 403px;
    width: 89px;
    height: 200px;
    transform: matrix(0.97, 0.22, -0.22, 0.97, 0, 0);
    text-align: center;
    font-family: 'DM Sans';
    font-weight: bold;
    font-size: 150px;
    line-height: 195px;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-shadow: 6px 5px 6px #00000029;
    opacity: 1;
}

.question {
    position: absolute;
    top: 226px;
    left: 74px;
    width: 622px;
    height: 104px;
    text-align: center;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: 0px;
    color: #003DA5;
    text-shadow: 6px 5px 6px #00000029;
    opacity: 1;
}

.card {
    position: absolute;
    top: 58px;
    left: 45px;
    width: 678px;
    height: 668px;
    background: transparent radial-gradient(closest-side at 50% 50%, #79C3F2 0%, #96CDF0 100%) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    opacity: 1;
}

.menu-btn {
    position: absolute;
    width: 301px;
    height: 74px;
    background: #B7E3FE 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #6EB9E8;
    border-radius: 9px;
    cursor: pointer;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 25px;
    line-height: 23px;
    color: #003DA5;
    text-align: center;
    padding: 0 15px;
}

.menu-btn-text {
    position: absolute;
    height: 47px;
    text-align: center;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 0px;
    color: #003DA5;
    opacity: 1;
}

.menu-btn-wide {
    position: absolute;
    top: 652px;
    left: 73px;
    width: 623px;
    height: 74px;
    background: #B7E3FE 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #6EB9E8;
    border-radius: 9px;
    cursor: pointer;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'DM Sans';
    font-weight: 600;
    font-size: 25px;
    line-height: 22px;
    color: #003DA5;
    text-align: center;
}

.menu-btn-wide-text {
    position: absolute;
    top: 678px;
    left: 275px;
    width: 220px;
    height: 33px;
    text-align: left;
    font-family: 'DM Sans';
    font-weight: 600;
    font-size: 25px;
    line-height: 22px;
    letter-spacing: 0px;
    color: #003DA5;
    opacity: 1;
}

.confirm-btn {
    position: absolute;
    top: 839px;
    left: 225px;
    width: 320px;
    height: 82px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 10px 6px #0000001A;
    border-radius: 999px;
    cursor: pointer;
    opacity: 1;
}

.confirm-btn-text {
    position: absolute;
    top: 859px;
    left: 312px;
    width: 146px;
    height: 39px;
    text-align: left;
    font-family: 'DM Sans';
    font-weight: bold;
    font-size: 30px;
    line-height: 39px;
    letter-spacing: 0px;
    color: #003DA5;
    cursor: pointer;
    opacity: 1;
}
.confetti {
    position: absolute;
    top: -185px;
    left: -262px;
    width: 1075px;
    height: 602px;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    background-size: contain;
    background-repeat: no-repeat;
    mix-blend-mode: darken;
    opacity: 1;
}
.basca {
    position: absolute;
    top: 307px;
    left: 621px;
    width: 34px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.menu-btn.selected {
    background: #7BB8E0 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #4A90B8;
}

.menu-btn-wide.selected {
    background: #7BB8E0 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #4A90B8;
}

#error-popup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 768px;
    height: 1024px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

#popup-box {
    background: #FFFFFF;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    width: 500px;
    box-shadow: 0px 10px 20px #00000040;
}

#popup-box p {
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 30px;
    color: #003DA5;
    margin-bottom: 30px;
}

#popup-box button {
    font-family: 'DM Sans';
    font-weight: bold;
    font-size: 25px;
    color: #FFFFFF;
    background: #003DA5;
    border: none;
    border-radius: 999px;
    padding: 15px 60px;
    cursor: pointer;
}

.baguette {
    position: absolute;
    top: 18px;
    left: 438px;
    width: 285px;
    height: 220px;
    transform: matrix(0.98, 0.21, -0.21, 0.98, 0, 0);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.form-input {
    position: absolute;
    width: 302px;
    height: 80px;
    background: #B7E3FE 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #6EB9E8;
    border-radius: 27px;
    border: none;
    outline: none;
    padding: 0 25px;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 25px;
    color: #003DA5;
}

.form-input::placeholder {
    color: #003DA5;
    opacity: 0.6;
}

.form-checkbox {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #B7E3FE 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #6EB9E8;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.form-checkbox:checked {
    background: #003DA5;
}

.checkbox-label {
    position: absolute;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 14px;
    color: #003DA5;
    opacity: 0.92;
    cursor: pointer;
}

#error-list {
    list-style: none;
    margin-bottom: 20px;
}

#error-list li {
    font-family: 'DM Sans';
    font-size: 20px;
    color: #F32735;
    margin-bottom: 8px;
}

#checkbox-popup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 768px;
    height: 1024px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.logo-small {
    position: absolute;
    top: 80px;
    left: 72px;
    width: 151px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.end-circle-1 {
    position: absolute;
    top: -786px;
    left: -659px;
    width: 1505px;
    height: 1505px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.end-circle-2 {
    position: absolute;
    top: 297px;
    left: 134px;
    width: 1505px;
    height: 1505px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

.end-card {
    position: absolute;
    top: 150px;
    left: 45px;
    width: 678px;
    height: 668px;
    background: #79C3F2 0% 0% no-repeat padding-box;
    border-radius: 15px;
    opacity: 1;
}
.home-btn {
    position: absolute;
    top: 80px;
    left: 20px;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 20px;
    color: #003DA5;
    cursor: pointer;
    background: #FFFFFF;
    border-radius: 999px;
    padding: 10px 25px;
    box-shadow: 0px 5px 6px #0000001A;
    z-index: 10;
}
.toc-container {
    position: absolute;
    top: 58px;
    left: 45px;
    width: 678px;
    height: 900px;
    background: #FFFFFF;
    border-radius: 15px;
    overflow-y: scroll;
    padding: 30px;
}

.toc-content {
    font-family: 'DM Sans';
    font-size: 16px;
    color: #003DA5;
    line-height: 1.6;
}

.toc-content h1, .toc-content h2, .toc-content h3 {
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 25px;
}

.toc-content p {
    margin-bottom: 10px;
}
.logo-bottom {
    position: absolute;
    top: 857px;
    left: 214px;
    width: 339px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}
.confetti-2 {
    position: absolute;
    top: 339px;
    left: -188px;
    width: 1075px;
    height: 602px;
    background-size: contain;
    background-repeat: no-repeat;
    mix-blend-mode: darken;
    opacity: 1;
}

.end-subtext {
    position: absolute;
    top: 654px;
    left: 94px;
    width: 392px;
    height: 33px;
    text-align: center;
    font-family: 'DM Sans';
    font-weight: 600;
    font-size: 25px;
    line-height: 22px;
    letter-spacing: 0px;
    color: #003DA5;
    opacity: 1;
}