@font-face {
    font-family: 'ArmmaturaU';
    src: url('../fonts/ArmmaturaU.woff') format('woff'),
    url('../fonts/ArmmaturaU.woff2') format('woff2');
}

@font-face {
    font-family: 'BiainaBeta';
    src: url('../fonts/BiainaBeta.woff') format('woff'),
    url('../fonts/BiainaBeta.woff2') format('woff2');
}

@font-face {
    font-family: 'Yerevanyan Regular';
    src: url('../fonts/Yerevanyan_Regular.woff') format('woff'),
    url('../fonts/Yerevanyan_Regular.woff') format('woff2');
}

html {
    font-size: 16px;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.main-container {
    width: 100%;
    max-width: 500px; /* Set a max-width for larger screens */
    margin: 0 auto; /* Center it horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .main-container {
        width: 100%; /* Full width on mobile */
        max-width: none;
    }
}

.cardContainer {
    display: block;
    width: 100%;
    height: 35vh;
    min-height: 350px;
    position: relative;
    margin-bottom: 1rem;
}

.bgColorContainer_6yxnFEu5UO1 {
    background: linear-gradient(to top, #fcc4d3, #fee9f0);
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
    padding: 0;
}

.bgImageContainer_6yxnFEu5UO1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 90%;
    background-image: url('../images/Penguins.svg'), url('../images/Clouds.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

.bgColorContainer_Q9OXzpLR3Jj {
    background: linear-gradient(to top, #c6daf0, #f3f9fd);
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
    padding: 0;
}

.bgImageContainer_Q9OXzpLR3Jj {
    position: absolute;
    top: 0;
    width: 100%;
    height: 75%;
    background-image: url('../images/Penguins2.svg'), url('../images/Clouds.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

.headerContainer {
    color: #cb2027;
    text-align: center;
    width: 80%;
    margin: auto;
    padding-top: 1.8rem;
    display: flex;
    justify-content: center;
    font-family: ArmmaturaU, serif;
    z-index: 10;
}

.contentContainer_6yxnFEu5UO1 {
    width: 100%;
    max-width: 500px;
    justify-self: anchor-center;
    height: 76vh;
    position: absolute;
    top: 24vh;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FDD5E0 100%);
    -webkit-mask-image: url('../images/CloudBg.svg');
    mask-image: url('../images/CloudBg.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    z-index: 2;
    font-size: 1.2rem;
}

.contentContainer_Q9OXzpLR3Jj {
    width: 100%;
    max-width: 500px;
    justify-self: anchor-center;
    height: 76vh;
    position: absolute;
    top: 24vh;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #d2d3e9 100%);
    -webkit-mask-image: url('../images/CloudBg.svg');
    mask-image: url('../images/CloudBg.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    z-index: 2;
    font-size: 1.2rem;
}

.childContainer{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .contentContainer {
        width: 100%; /* Full width on mobile */
        max-width: none;
    }
}

.heading {
    margin-left: 1.2rem;
    margin-bottom: .5rem;
    font-family: BiainaBeta, serif;
    font-weight: bold;
}

.ageGroupContainer {
    display: flex;
    justify-content: space-around;
    align-items: start;
    font-family: BiainaBeta, serif;
    font-weight: bold;
}

.ageGroupOption {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wishCardContainer {
    display: flex;
    justify-content: center;
    opacity: 0;
}

.wishCard {
    width: 90%;
    text-align: center;
    background: #ec4468;
    color: whitesmoke;
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: space-around;
    border-radius: 1rem;
    z-index: 3;
    font-family: 'Yerevanyan Regular', serif;
    padding: 1rem;
}

.radioButton {
    padding: 3rem 2rem;
    text-align: center;
    text-wrap: nowrap;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    width: 80%;
    height: 50%;
    font-weight: 900;
    border-color: #d696ab;
    color: black;
    border-radius: 1rem;
    font-size: 2rem;
}

.rulesBtn{
    width: 90%;
    border-radius: 1rem;
    font-size: 1.5rem;
    font-family: BiainaBeta, serif;
    font-weight: bold;
}

.footer {
    width: 100%;
    height: 8vh;
    text-align: center;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    justify-self: anchor-center;
    margin-top: auto;
    /*margin-bottom: 1rem;*/
}

.company {
    display: flex;
    color: black;
    margin-left: 2rem;
}

.social {
    display: flex;
    margin-right: 2rem;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.fade-in {
    animation: fadeIn 1s ease-out;
    animation-fill-mode: forwards;
}

.fade-out {
    animation: fadeOut 1s ease-out forwards;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.cardLabel {
    opacity: 0;
}

.ageLabel{
    opacity: 1;
}