@font-face {
    font-family: 'WeddingFont';
    src: url('/static/wedd.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Shows fallback until font loads */
}
html,body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: #FFE4E8;
}

.main-wrapper {
    display: grid;
    grid-auto-flow: column;
    text-align: center;
    width: 100vw;
    height: 100vh;
    grid-template-rows: 1fr auto auto auto;
    
    margin: 0 auto;
    
}
.anketa {
    max-width: 90%;
    margin: 0 auto;
    display: none;
}

.hello {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top:0;
    left: 0;
    display: grid;
    justify-content: center;
    align-content: center;
        position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: grid;
    justify-content: center;
    align-content: center;
    background: url(/static/hello.jpg);
    background-size: contain;

}

.hello-friend {
    /* color: white; */
    text-transform: uppercase;
    background: #FFE4E8;
    border-radius: 60px;
    width: 90%;
    font-size:20px;
    display: grid;
    font-family: WeddingFont;
    justify-content: center;
    align-content: center;
    text-align: center;
    width: 350px;
    height: 200px;
}
.bye {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top:0;
    left: 0;
    display: grid;
    justify-content: center;
    align-content: center;
        position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    justify-content: center;
    align-content: center;
    background: url(/static/hello.jpg);
    background-size: contain;

}

.bye-friend {
    /* color: white; */
    text-transform: uppercase;
    background: #FFE4E8;
    border-radius: 60px;
    width: 90%;
    width: 350px;
    max-width: 90%;
    height: 350px;
    font-size: 22px;
    display: grid;
    font-family: WeddingFont;
    justify-content: center;
    align-content: center;
    text-align: center;
    margin: 0 auto;

}

.but {
    border: 2px solid pink;
    text-decoration: underline;
    background:pink;
    border-radius: 60px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.end {
    border: 2px solid pink;
    text-decoration: underline;
    background:pink;
    border-radius: 60px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 30px;
    margin-bottom: 20px;
    height: 50px;
    display: grid;
    justify-content: center;
    align-content: center;
    
}


p {
    font-family: WeddingFont;
}
img {
    width: 90%;
    height: auto;
}
.header {
    font-size: 27px;
}
.desc {
    font-size: 25px;
}

        .custom-select {
            /* Фон */
            background-color: #FFE4E8;

            /* Убираем стандартную рамку */
            border: none;

            /* Только нижнее подчеркивание */
            border-bottom: 2px solid #000; /* цвет можно поменять */

            /* Внутренние отступы для комфорта */
            padding: 8px 12px 6px 12px;

            /* Шрифт */

                font-family: WeddingFont;

            font-size: 22px;
            color: #222;

            /* Убираем стандартную стрелку в Firefox */
            -moz-appearance: none;
            /* Убираем стандартную стрелку в Chrome/Safari/Edge */
            -webkit-appearance: none;
            appearance: none;

            /* Добавляем свою стрелку (опционально, но без неё тоже норм) */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            background-size: 16px;

            /* Чтобы текст не наезжал на стрелку */
            padding-right: 32px;

            /* Радиус для мягкости (опционально) */
            border-radius: 0;

            /* Плавный переход */
            transition: border-color 0.2s ease;
            width:100%;
        }

        /* Фокус — подчеркивание меняет цвет (по желанию) */
        .custom-select:focus {
            outline: none;
            border-bottom-color: #b30047; /* чуть ярче */
        }

        /* Убираем стандартную стрелку в IE (если надо) */
        .custom-select::-ms-expand {
            display: none;
        }

        /* Дополнительно: стили для опций (шрифт наследуется) */
        .custom-select option {
            font-family: WeddingFont;

            background-color: #fff;
            color: #222;
        }

                .custom-select option {
            background-color: #FFE4E8 !important;  /* Тот же фон */
            color: #222 !important;
            font-family: WeddingFont !important;
            font-size: 23px !important;
            padding: 8px 12px !important;
        }

        /* Для Firefox - стилизация выпадающего списка */
        .custom-select:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 #222;
        }

        /* Дополнительно: при наведении на опцию */
        .custom-select option:hover {
            background-color: #d4c0c4 !important;
        }

        /* Стили для Chrome/Edge (через атрибут) */
        .custom-select option:checked {
            background-color: #d4c0c4 !important;
        }

        .custom-input {
            
            background-color: #FFE4E8;
            border: none;
            border-bottom: 2px solid #000;
            padding: 8px 12px 6px 12px;
            font-family: WeddingFont;
            font-size: 22px;
            color: #222;
            width: 100%;
            transition: border-color 0.2s ease;
            outline: none;
            max-width: 90%;
        }

        /* Фокус — подсвечиваем нижнее подчёркивание */
        .custom-input:focus {
            border-bottom-color: #b30047;
        }

        /* Плейсхолдер — тоже стилизуем */
        .custom-input::placeholder {
            color: #999;
            font-family: WeddingFont;
            font-size: 22px;
        }

        /* ---- Дополнительно: textarea в том же стиле ---- */
        .custom-textarea {
            background-color: #FFE4E8;
            border: none;
            border-bottom: 2px solid #000;
            padding: 8px 12px 6px 12px;
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            color: #222;
            width: 200px;
            min-height: 60px;
            resize: vertical;
            transition: border-color 0.2s ease;
            outline: none;
        }

        .custom-textarea:focus {
            border-bottom-color: #b30047;
        }

        .custom-textarea::placeholder {
            color: #999;
            font-family: 'Inter', sans-serif;
            font-size: 16px;
        }
p {
    max-width: 90%;
}
video {
    max-width: 350px;
}