*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Noto Sans', sans-serif;
    font-size: 67.5%;
}

body {
    background-color: #0a0a0a;
    color: #ddd;
}

body main {
    display: flex;
    flex-direction: column;
    width: 100%;

    justify-content: start;
    align-items: start;

}

a, a:visited, a:active {
    color: #fff;
    text-decoration:underline;
    transition: color 300ms ease-in-out;
    
}

a:hover {
    color: #ccc;
}
article {
    padding-bottom: 5rem;
}

.constrain {
    max-width: 90%;
    margin: 0 auto;
    padding: 1rem;
    margin-top: 4rem;
}


h1 {
    font-weight: 500;
    margin-top: 6rem;
    padding: 1rem;
}

p {
    font-weight: 200;
    padding: 1rem;
}

hr {
    height: 10px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid #ccc;
}

footer {
    margin-top: 4em;
}

.cookies-banner {
    padding:20px 0;
}
.cookies-banner-image {
    width:50px;
}
.cookies-banner-header {
    padding:10px 0 0;
    font-size:12px;

}
.cookies-banner-message {

    font-size: 12px;
    padding:10px 0;
}
@media (min-width:480px) {

    h1 {
        font-size: 5rem;
    }

    article p {
        font-size: 2rem;
    }

    .constrain {

        max-width: 80%;
        margin: 0 auto;
        padding: 4rem;
        margin-top: 6rem;
    }
    cookies-banner {
        padding: 20px 0;

    }
}