/* RESET */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    font-size: var(--font-body);    
    font-weight: 400;
    /* overflow: hidden; */
}

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

/* COLOR  AND FONT SIZE*/
:root {
  --color-primary: #000;
  --color-secondary: #dedede;
  --color-text-background: rgb(214, 214, 214);
  --color-tertiary:#64ef72;

  --font-body: clamp(1.1rem, 1.2vw, 1.3rem);
  --font-button: clamp(1.2rem, 1.5vw, 1.5rem);
  --font-title: clamp(2rem, 4vw, 3rem);
}


/* GENERAL */
a {
  text-decoration: none;
  color:var(--color-secondary);
  cursor: pointer;
}

a:hover {
   color:var(--color-tertiary); 
}

h1 {
    font-size: var(--font-title);
    color: var(--color-primary);
    font-weight: 200;
}

.wrapper{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

main {
    overflow-y: auto;
    height: calc(100vh - 200px);
}

.main_content {
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 32px;
    margin-top: 100px;
    color: var(--color-primary);
    line-height: 1.8;
    margin-bottom: 80px;
    width: 100%;
    font-size: var(--font-body);
}