body {
    display: block;
    margin: 0;
    font-family: var(--open-sans);
}

a {
    text-decoration: none;
    font-family: inherit;
    color: inherit;
    transition: all 300ms ease-in-out 
}

a:hover{
    cursor: pointer;
    color: var(--color-primary-green);
}

h1 {
    font-size: var(--font-h1);
    margin-block-start: 0;
    margin-block-end: 0;
}

h2 {
    font-size: var(--font-h2);
    margin-block-start: 0;
    margin-block-end: 0;
}

@media(max-width:500px) {
    h1 {
        font-size: calc(0.8*var(--font-h1));
        margin-block-start: 0;
        margin-block-end: 0;
    }
}

@media(max-width:400px) {
    h1 {
        font-size: calc(0.6*var(--font-h1));
        margin-block-start: 0;
        margin-block-end: 0;
    }
}

@media(max-width:500px) {
    h2 {
        font-size: calc(0.6*var(--font-h2));
        margin-block-start: 0;
        margin-block-end: 0;
    }
}

@media(max-width:400px) {
    h2 {
        font-size: calc(0.6*var(--font-h2));
        margin-block-start: 0;
        margin-block-end: 0;
    }
}

.h1-label {
    height: max-content;
    width: max-content;
    text-align: center;
    box-sizing: border-box;
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.brand-blue {
    color: var(--color-primary-blue);
}

.brand-green {
    color: var(--color-primary-green);
}

.start-position {
    color: var(--color-primary-green);
}