/* THEME VARIABLES */
body {

  /* Color */
  --color-primary-light: var(--ex-main-primary-80);
  --color-primary: var(--ex-main-primary-60);
  --color-primary-darkest: var(--ex-main-primary-10);

  --color-secondary-light: var(--ex-main-secondary-80);
  --color-secondary: var(--ex-main-secondary-60);
  --color-secondary-darkest: var(--ex-main-secondary-10);

  --color-neutral-white: var(--ex-main-neutral-100);
  --color-neutral-lightest: var(--ex-main-primary-95); 
  --color-neutral-lighter: var(--ex-main-primary-80);
  --color-neutral-light: var(--ex-main-neutral-60);
  --color-neutral-semilight: var(--ex-main-neutral-50);
  --color-neutral: var(--ex-main-neutral-40);
  --color-neutral-dark: var(--ex-main-neutral-20);
  --color-neutral-darker: var(--ex-main-neutral-15);
  --color-neutral-darkest: var(--ex-main-neutral-05);


  /* Typography */
  --font-sans: var(--ex-main-font-sans);
  --font-code: var(--ex-main-font-code);


  /* Border */
  --radius-sm: 2px;
  --radius-md: 4px;


  /* Sizing */
  --size-icon: 30px;


  /* Layout */
  --page-width: min(40rem, calc(100% - 4rem));

  @media (max-width: 500px) {
    --page-width: calc(100% - 1.5rem);
  }

}

/* Text styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
}

h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

h1 + h2{
  margin-top: 1rem;
}

h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 0;
  text-align: center;
}

p {
  margin: 0.5rem 0;
  line-height: 150%;

  a {
    color: inherit;

    &:hover{
      color: var(--color-neutral-light);
    }
  }
}

li{
  font-size: 1.125rem;
}


/* Theme styles */

body {
  width: 100dvw;
  height: 100dvh;

  margin: 0;
  overflow: hidden;

  background-color: var(--color-neutral-darkest);
  color: var(--color-neutral-white);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-family: var(--font-code);
}

main{
  max-height: calc(100dvh - 11rem);
  margin-bottom: 3rem;
  overflow-y: auto;
  overflow-x: hidden;
  width: var(--page-width);

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral);
    border-radius: 4px;
  }  
  &::-webkit-scrollbar { width: 8px; }
  &::-webkit-scrollbar-thumb:hover { background-color: var(--color-neutral-light); }
  &::-webkit-scrollbar-track { background: transparent; }
}

nav.main {
  position: fixed;
  top: 2rem;
  display: flex;
  gap: 2rem;

  a {
    color: var(--color-neutral-light);
    text-decoration: none;

    &:hover{
      color: var(--color-neutral-white);
      font-style: italic;
      text-decoration: underline;
    }
  }
}

footer {
  width: 100%;
  max-width: var(--page-width);
  position: fixed;
  bottom: 1.25rem;

  > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 0.75rem;
  }

  img {
    width: 34px;
  }

  nav {
    font-family: var(--font-sans);

    a {
      color: var(--color-neutral-light);
      text-decoration: none;
      font-size: 1.3rem;

      + a{
        margin-left: 2rem;
      }

      &:hover{
        color: var(--color-neutral-lightest);
        text-decoration: underline;
      }
    }
  }
}

.grabbing{
  cursor: grabbing !important;
}