@font-face {
    font-family: 'Anton';
    src: url('fonts/Anton-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lexend';
    src: url('fonts/Lexend-Regular.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('fonts/Lexend-Black.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('fonts/Lexend-Bold.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('fonts/Lexend-Light.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #fdc4b4;
    margin: 0 auto;
}

footer {
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
    font-weight: 200;
    text-align: center;
    margin-bottom: 50px;
}

.container {
    width: 900px;
    padding-top: 50px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    font-family: 'Anton', sans-serif;
    font-size: 48px;
    color: #a91051;
    line-height: 1.2;
}

h2 {
    font-family: Lexend, sans-serif;
    font-weight: 400;
    font-size: 40px;
    text-decoration: underline;
    text-align: center;
}

h3 {
    text-align: center;
    font-family: 'Lexend', sans-serif;
    font-size: 26px;
    margin: 72px 0 16px 0;
    font-weight: 300;
}

h4 {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    margin-top: 72px;
}

h5 {
    font-family: Lexend, sans-serif;
    font-weight: 100;
    font-size: 16px;
}

h6 {
    font-family: 'Lexend', sans-serif;
    font-weight: 200;
    font-size: 14.5px;
    text-align: center;
}

.plain-text {
    font-family: Lexend, sans-serif;
    font-size: 21px;
    font-weight: 200;
}

.spaced {
    margin: 72px 0;
    font-weight: 300;
    text-align: center;
}

.delayed {
    margin-top: 8px;
}

.bold {
    font-weight: 300;
}

.underlined {
    text-decoration: underline;
    margin-bottom: 4px;
}

.center {
    text-align: center;
}

.descriptive {
    width: 800px;
    margin: 0 auto;
}

.descriptive p {
    margin: 32px 0;
}

.frame {
    width: 100%;
    background-color: #bb9185;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    box-shadow: inset 0 6px 3px #fed6cb;
    padding: 6px;
    margin-bottom: 32px;
}

.how-it-works {
    width: 100%;
    height: 100%;
    background-color: #6a93fb;
    border: #1d1317 3px solid;
    border-radius: 3px;
    box-shadow: inset 0 3px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 3px rgba(0, 0, 0, 0.5), inset 3px 0 3px rgba(0, 0, 0, 0.5), inset -3px 0 3px rgba(0, 0, 0, 0.5), 0 2px 2px #fed6cb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 16px 45px;
}

.how-it-works p, .how-it-works h2 {
    margin: 16px 0;
    text-decoration: none;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 16px;
}

.user-info {
    display: flex;
    justify-content: start;
    align-items: baseline;
    gap: 8px;
}

.user-preference {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 3px;
    margin: 48px 0;
}

.user-preference .input {
    width: 636px;
    height: 575px;
}

form textarea {
    width: 100%;
    height: 100%;
    font-family: Lexend, sans-serif;
    font-weight: 200;
    padding: 2px 3px;
}

.input {
    width: 408px;
    height: 32px;
    display: flex;
    justify-content: start;
    align-items: center;
    border: 3px dotted black;
}

form input {
    width: 100%;
    height: 100%;
    font-family: Lexend, sans-serif;
    font-weight: 200;
    padding: 2px 3px;
}

.how-it-works h4 {
    margin: 0;
    width: 100%;
    text-align: left;
}

.how-it-works h5{
    width: 100%;
    text-align: left;
}

.how-it-works-extension {
    padding: 16px 116px;
}

input[type='radio'] {
    appearance: none;
    margin: 0;
    background-color: #e0a206;
    width: 32px;
    height: 29px;
    border: 1px solid #000c0f;
    transition: background-color 200ms ease-in-out;
    cursor: pointer;
    transform: translateY(8px);
}

input[type='radio']:checked {
    background-color: #a91051;
    transition: background-color 200ms ease-in-out;
}

.options {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: baseline;
    text-align: left;
    gap: 32px;
}

.sub-option {
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    text-align: left;
}

.sub-option p {
    margin-bottom: 0;
}

.call-to-action {
    background-color: #e0a206;
    margin: 0 auto;
    width: 564px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px #000c0f solid;
    filter: drop-shadow(6px 4px 0 #000c0f);
    margin-top: 56px;
    margin-bottom: 72px;
    cursor: pointer;
}

.samples {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.sample-card {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    border: solid 1px #000c0f;
    margin: 2px 2.5px;
}

.sample-description {
    margin: 12px 8px;
}

.sample-card h5 {
    font-weight: 200;
}

.image-tag {
    position: absolute;
    width: 80px;
    height: 100px;
    transform: translateX(80px) translateY(25px);
}