/* basic styling for whole page */


* {
    box-sizing: border-box;
}

html {
    font-size: 1rem;
}

html,
body {
    margin: 0;
    font-family: var(--font-family-body);
    background-color: var(--color-primary-background);
}

li, a {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    color: var(--color-white);
    text-decoration: none;
}

h1 {
    font-family: var(--font-family-body);
    color: var(--color-primary-title);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-family: var(--font-family-body);
    color: var(--color-catch-title);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-family: var(--font-family-body);
    color: var(--color-catch-title);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
}

p { 
    hyphens: auto; 
  }
  
.button {
    background-color: var(--color-button);
    color: var(--color-white);
    display: flex;
    width: 119px;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi-bold);
}