/* Web Design Odessa: fonts, reset, element defaults and keyframes. Classes live in header.css, home.css, footer.css. */
@font-face { font-family: "Kanit"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/Kanit-Light.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Kanit-Regular.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Kanit-Medium.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Kanit-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Kanit-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/Inter-Variable.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-m); font-weight: 400; line-height: 1.6; color: var(--body); background: var(--white); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 600; line-height: 1.15; color: var(--ink); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--ink); text-decoration: none; transition: color var(--speed) var(--ease); }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure { margin: 0; }
figcaption { text-align: inherit; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon--solid { fill: currentColor; stroke: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 56, 56, .35); } 70% { box-shadow: 0 0 0 1.4rem rgba(255, 56, 56, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 56, 56, 0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6rem); } }
@keyframes ring-in { from { opacity: 0; transform: rotate(239deg); } to { opacity: 1; transform: rotate(359deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}
