@import "variables.css";

@font-face {
    font-family: 'Satoshi';
    src: url('../media/Satoshi.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: var(--text-font-size);
    font-weight: var(--text-font-weight);
    line-height: var(--text-line-height);
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    margin: var(--spacing-vertical) var(--spacing-horizontal);
    color: var(--color-text);
    background: var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-gap);
}

body > * {
    max-width: var(--max-width-text);
    width: 100%;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading), sans-serif;
    word-wrap: break-word;
}

h1 {
    font-size: var(--heading-1-font-size);
    font-weight: var(--heading-1-font-weight);
    line-height: var(--heading-1-line-height);
    letter-spacing: var(--heading-1-letter-spacing);
    margin-top: var(--heading-1-top-spacing);
}

h2 {
    font-size: var(--heading-2-font-size);
    font-weight: var(--heading-2-font-weight);
    line-height: var(--heading-2-line-height);
    letter-spacing: var(--heading-2-letter-spacing);
    margin-top: var(--heading-2-top-spacing);
}

h3 {
    font-size: var(--heading-3-font-size);
    font-weight: var(--heading-3-font-weight);
    line-height: var(--heading-3-line-height);
    letter-spacing: var(--heading-3-letter-spacing);
    margin-top: var(--heading-3-top-spacing);
}

h4 {
    font-size: var(--heading-4-font-size);
    font-weight: var(--heading-4-font-weight);
    line-height: var(--heading-4-line-height);
    letter-spacing: var(--heading-4-letter-spacing);
    margin-top: var(--heading-4-top-spacing);
}

p {
    font-family: var(--font-body), sans-serif;
    font-size: var(--text-font-size);
    font-weight: var(--text-font-weight);
    line-height: var(--text-line-height);
    letter-spacing: var(--text-letter-spacing);
}

img {
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--image-border-radius);
}

img.lg {
    width: 100%;
    max-width: var(--max-width-layout);
}

@media (orientation: portrait) {
    img.lg {
        width: 100vw;
        border-radius: 0;
    }
}

img.md {
    width: 100%;
    max-width: var(--max-width-text);
}

img.sm {
    width: 10rem;
}

ul, ol {
    margin-left: var(--list-indent);
    font-size: var(--list-font-size);
    font-weight: var(--list-font-weight);
    line-height: var(--list-line-height);
    letter-spacing: var(--list-letter-spacing);
    gap: var(--list-gap);
    display: flex;
    flex-direction: column;
    list-style-position: inside;
}

ul, ol ul, ol {
    margin-bottom: var(--list-gap);
}

blockquote {
    display: flex;
    flex-direction: column;
    gap: var(--quote-gap);
    background: var(--quote-background-color);
    color: var(--quote-text-color);
    padding: var(--quote-padding-vertical) var(--quote-padding-horizontal);
    border-radius: var(--quote-border-radius);
    border-left: var(--quote-left-border);
}

blockquote p:nth-child(1) * {
    font-size: var(--quote-content-font-size);
    font-weight: var(--quote-content-font-weight);
    line-height: var(--quote-content-line-height);
    letter-spacing: var(--quote-content-letter-spacing);
    font-style: italic;
}

blockquote p:nth-child(2) * {
    font-size: var(--quote-author-font-size);
    font-weight: var(--quote-author-font-weight);
    line-height: var(--quote-author-line-height);
    letter-spacing: var(--quote-author-letter-spacing);
}

.cta {
    padding: var(--cta-padding-vertical) var(--cta-padding-horizontal);
    background: var(--cta-background-color);
    border-radius: var(--cta-border-radius);
    border: var(--cta-border);
    margin-top: var(--heading-2-top-spacing);
}

.cta, .cta p {
    display: flex;
    flex-direction: column;
    gap: var(--cta-gap);
}

.cta > * {
    margin: 0;
}

button {
    padding: var(--button-vertical-padding) var(--button-horizontal-padding);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing);
    border-radius: var(--button-rounded);
    transition: transform 0.1s ease;
    background: var(--button-active-background-color);
    color: var(--button-active-text-color);
    font-family: var(--font-button), sans-serif;
    width: fit-content;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--cta-gap);
}

button:disabled {
    background: var(--button-disabled-background-color);
    color: var(--button-disabled-text-color);
    cursor: not-allowed;
}

button:not(:disabled):hover {
    transform: scale(1.05);
    cursor: pointer;
}

button:not(:disabled):active {
    transform: scale(0.95);
}

.divider p {
    display: flex;
    position: relative;
    height: 18rem;
    width: 18rem;
    margin: var(--heading-2-top-spacing) auto 0;
}

.divider img {
    position: absolute;
    width: 18rem;
    height: 18rem;
}

.divider2 p {
    display: flex;
    width: fit-content;
    margin: 0 auto;
}

.divider2 img {
    width: 6rem;
    height: 6rem;
}

strong {
    font-weight: 450;
}