*, *::before, *::after {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    font-family: 'Roboto Slab', serif;
}
 
:root {
    --paragraph-size: 2.2rem;
    --smaller-paragraph-size: 2rem;

    --super-large: 10rem;
    --h1-size: 7rem;
    --h2-size: 5.8rem;
    --h3-size: 4rem;
    --h4-size: 2.8rem;

    --background-color-two: hsl(0, 0%, 91%);
    ;
    --background-color-one: rgb(40, 62, 148);
    --background-color-one-transparent: rgba(40, 62, 148, 0.75);
    --background-color-one-darker: rgb(28, 47, 124);

    --accent-color: #2825d6;
  
    --hero-background-overlay-color: rgba(34, 55, 141, 0.75);
    --text-color-two: rgb(34, 55, 139);
    --text-color-one: hsl(0, 0%, 91%);
    --text-color-lighter-two: rgb(41, 72, 197);

    --border-color: rgb(33, 50, 121);
}

h1,
h2,
h3,
h4 {
    font-weight: 300;
    font-family: 'Cantarell', sans-serif;
    line-height: 1.1;
}

:focus {
    outline: .6rem solid black;
}

p {
    font-weight: 400;
    line-height: 1.6;
}

a:focus {

    outline: 4px solid white;

}

a:link {
    text-decoration: none;
    color: var(--text-color-one);
}

a:visited {
    text-decoration: none;
    color: var(--text-color-one);
}

a:hover {
    background-color: rgb(31, 48, 116);
}

a:active {
    outline: none;
    background-color: rgb(14, 26, 71);

}

button {
    color: var(--text-color-one);
    background-color: var(--accent-color);
    border: none;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.3s;
}

button:focus {
    outline: 0.8rem solid white;

}

button:hover {
    background-color: hsl(216, 62%, 50%);
}

button:active {
    outline: none;
    background-color: hsl(216, 61%, 38%);
    ;
}

.bold {
    font-weight: 600;
}

br {
    line-height: 0.75;
}


@media (min-width:800px) {
    html {
        font-size: 10px;
        scroll-behavior: auto;
    }
}

@media(max-width:900px) {
    html {
        font-size: 8px;
        scroll-behavior: auto;
    }
}

@media(max-width:500px) {
    html {
        font-size: 5px;
        scroll-behavior: auto;
    }
}

@media(max-width:300px) {
    html {
        font-size: 3px;
        scroll-behavior: auto;
    }
}