/*
    --turquoise: #2399a3;
    --magenta: #ff33ff;
    --black: #000000;
    --brown: #94714f;
*/

@font-face {
    font-family: 'NotoEmoji';
    src: url('./styles/NotoEmoji-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Manbow';
    src: url('./styles/Manbow Solid.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Zabatana';
    src: url('./styles/Zabatana-Poster.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

.textTitle {
  font-family: Manbow;
}
.textBody {
  font-family: Zabatana;
}
.textEmoji {
  font-family: NotoEmoji;
}


body {
    background: #94714f;
    width: 100%;
    height: 100%;
    font-size: 24px;
    margin: 12px 0;
    padding: 0;
    text-align: center;
    font-family: NotoEmoji, Arial, sans-serif;
}

main {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
button {
    background: #2399a3;
    display: block;
    margin: 12px auto;
    width: 100%;
    padding: 12px;
    font-size: 100%;
    cursor: pointer;
}
button.small {
    margin: 0;
/*    font-size: 80%;*/
    border-width: 0px 4px 4px 4px;
    border-color: black;
}

input {
    display: block;
    margin: 0 auto 12px;
    width: 100%;
    font-size: 100%;
}

[data-action] {
    cursor: pointer;
}

.section {
    margin-bottom: 96px;
}
.section.narrow {
    max-width: 50%;
    margin: 0 auto;
}

h1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 72px;
}

h1 .textTitle {
    font-size: 48px;
}
h1 .textEmoji {
    font-size: 24px;

}

[data-action="download"] .textBody {
    font-size: 48px;
    display: block;
    margin-bottom: -12px;
}

.imagesContainer {
    display: flex;  
    flex-direction: row;
    margin: 0;
    padding: 0;
}
.imagesContainer > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.imagesContainer .images {
    width: 30%;
}
.imagesContainer .emojis {
    width: 5%;
}

.images {
    background: white;
    border: 4px solid black;
    gap: 12px;
    padding: 12px;
}

.images img {
    background: white;
    border: 4px solid black;
    width: 100%;
/*    max-width: 300px;*/
}

.emoji {
    font-size: 24px;
}

a {
    color: #ff33ff;
    text-decoration: none;
    font-family: "Manbow";
    font-size: 48px;
    display: block;
    margin: 4px 0 8px 0;

}