@font-face {
    font-family: 'TeleNeoWeb';
    src: url('TeleNeoWeb-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'TeleNeoWeb';
    src: url('TeleNeoWeb-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'TeleNeoWeb';
    src: url('TeleNeoWeb-ExtraBold.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

* { font-family: 'TeleNeoWeb', sans-serif; color: #fff; outline: none !important; scrollbar-color: #fff #e20074; scrollbar-width: thin; }
body { background: #e20074; margin: 0; padding: 0; }
p { font-size: clamp(20px, 3.5vw, 40px); }
input, .moreLinks { font-size: clamp(20px, 3vw, 32px); }
p { line-height: 1.4; }

emoji-picker { --background: #e20074; --border-color: #e20074; --indicator-color: #fff; width: 100%; height: 310px; margin-top: 30px; }

.slogan { width: 96%; max-width: 1000px; margin-top: clamp(16px, 3vw, 32px); }

.hide { display: none; }

.main { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; min-height: 100dvh; }

.banner { text-align: center; padding: clamp(24px, 6vmin, 60px) 20px clamp(16px, 3vw, 32px) 20px; }

.footer { display: flex; gap: 20px; justify-content: space-between; align-items: center; padding: 20px; border-top: clamp(4px, 1vh, 12px) solid #181818; }
.footer p { padding: 20px; text-wrap: balance; font-size: clamp(16px, 2.5vw, 24px); }
.footer img { padding: 20px; width: 40px; height: auto; }

h1 { font-size: clamp(38px, 10vmin, 120px); font-weight: 900; margin: 0; }
h1 a { border-bottom: clamp(4px, 1vh, 12px) solid #181818; display: inline-block; text-decoration: none; line-height: .7; }

.app { max-width: 800px; padding: 0 20px; margin: 0 auto 40px auto; text-align: center; }
.app p { text-wrap: balance; }

.uputa { text-transform: uppercase; font-weight: 900; font-size: 24px; }
.uputa span { display: block; font-size: 48px; }

#e_form { width: calc(100% - 20px); max-width: 480px; margin: 0 auto; }

#f_emoji, .moreLinks a:first-of-type { width: 100%; border: 1px solid #fff; border-radius: 10px 0 0 10px; background: #eee; padding: 8px 12px; line-height: 2; color: #e20074; }
#f_submit, .moreLinks a:last-of-type { width: 100%; border: 1px solid #fff; border-radius: 0 14px 14px 0; background: #fff; padding: 8px 12px; text-align: center; font-weight: bold; line-height: 2; border-left: none; color: #e20074; cursor: pointer; }

.moreLinks { display: flex; }
.moreLinks a { display: inline-block; font-weight: bold; text-decoration: none; }

.dimmed,
#f_emoji::placeholder { color: #bbb; }

.shortcuts { display: flex; gap: 10px; margin: 15px auto; max-width: 480px; }
.shortcuts p { background: #333; width: 100%; margin: 0; padding: 10px; border-radius: 4px; }

.gumbi { max-width: 480px; margin: 0 auto; background: #fff; padding: 5px; border-radius: 14px; display: flex; gap: 5px; }

.mt-10 { margin-top: 100px; }


@media screen and (max-width: 480px){
	h1 { font-size: 38px; }
    .uputa span { font-size: 30px; }
    .shortcuts { display: none; }
    #e_form { max-width: 300px; }
    #emoji-wrapper { padding: 20px 0; }
    emoji-picker { width: 300px; --num-columns: 6; --emoji-size: 20px; --category-emoji-padding: 2px; }
    .footer { padding: 0; }
    .soft-br span { display: block; }
}