/* TOKENS */
:root {
   --linkColor: #0066cc;
   --textColor: #1d1d1f;
}


/* BASE */
* {
   box-sizing: border-box;
}

html {
   font-family: "InterVariable", "Inter", sans-serif;
   font-optical-sizing: auto;
   line-height: 1.5;
}

body {
   margin: 0;
   color: var(--textColor);
   background: #fff;
   font-size: 16px;
   letter-spacing: -0.01em;
}

main {
   padding: 2rem 2rem;
   max-width: 26rem;
}

@media (max-width: 500px) {
   main {
      padding: 1rem 1rem;
   }
}

section+section {
   margin-top: 1.5rem;
}

h1,
h2 {
   font-size: 1rem;
   line-height: 1.3;
   font-weight: 400;

   margin: 0px;
}

a {
   color: var(--linkColor);
   text-decoration: none;
   border-bottom: 1px solid rgb(0 102 204 / 0.15);
}

a:hover {
   border-bottom-color: var(--linkColor);
}

ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

img {
   display: block;
   max-width: 100%;
   height: auto;
}

p {
   margin-top: 0px;
}



/* LAYOUT */

/* COMPONENTS */
/* UTILITIES */