@font-face {
  font-family: "Inter";
  src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  /* color */
  --color-primary: hsl(125, 100%, 50%);
  --color-secondary: hsl(231, 100%, 50%);
  --color-tertriary: hsl(62, 100%, 50%);
  --color-light: hsl(0, 9%, 93%);
  --color-dark: hsl(0, 0%, 10%);
  --color-shadow:hsla(0, 0%, 10%, 0.9);
  --color-link-visited:hsl(83, 89%, 65%);

  /* fonts */
  --font-family-primary: "Inter", sans-serif;
  --font-weight-medium:600;
  --font-weight-bold:900;

  /* text sizes */  
  --text-regular-size-s:1rem;
  --text-regular-size-m:1.2rem;
  --text-regular-size-l:1.6rem;
  --text-regular-line-height-s:2rem;
  --text-regular-line-height-m:2.3rem;

  /* transition */
  --hover-transition: 300ms 50ms ease-in-out;
  --transition: 200ms ease-in-out;

  /* utils */
  --padding-small:1rem;
  --padding-regular:2rem;
  --padding-medium:4rem;
  --padding-large:6rem;
  --padding-containter: var(--padding-regular) var(--padding-medium);
  --padding-containter-large: var(--padding-regular) var(--padding-large);
  --margin-block: 1.5rem;
  --border-radius:1rem;
  --gap-small:.5rem;
  --gap-regular: 1rem;
  --gap-medium: 2rem;

}

* {
  box-sizing: border-box;
  font-family: var(--font-family-primary);
}

:focus {
  color:var(--color-link-active);
}

body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100dvh;
  width: 100dvw;
  background-color: var(--color-dark);
  color: var(--color-light);
  display: block;
}

main {
  min-height:100dvh
}

  img, 
  video {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
  }
  img,
  img:focus,
  video,
  video:focus {
    border-radius:var(--border-radius);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block-start: 3rem;
  }

ul {
  padding-inline-start: 2rem;
}

p,
a,
li {
  font-size: var(--text-regular-size-s);
    line-height: var(--text-regular-line-height-s);

    @media (min-width: 700px) {
    font-size: var(--text-regular-size-m);
    line-height: var(--text-regular-line-height-m);
    }
}

p {
  margin-block:var(--margin-block);
}


a {
  text-decoration: none;
  color :var(--color-primary);
  font-weight: var(--font-weight-medium);
  position: relative;

  &:visited {
    color: var(--color-link-visited);
  }

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