@import url(./columns.css);
@import url(./imgbox.css);
@import url(./underline-anim.css);
@import url(./backgrounds.css);
@import url(./header.css);
@import url(./footer.css);

body {
    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    font-size: large;
    background-color: #2C2C2C;
    margin: 0;
}


#content > * {
    padding: 15px 15%;
}
.light {
    background-color: #ebd4b1;
}
.dark {
    background-color: #202C41;
    color: white;
}

h1, h2, h3, h4 {
    text-align: center;
}
h1 {
    font-weight: bolder;
}
h2, h3, h4 {
    margin: 0;
}

img.title {
    width: 100px;
    height: 100px;
    margin: auto;
    display: block;
}

.dark img.title {
    filter: invert();
}

.dark hr {
    color: #ebd4b1;
}
hr {
    color: #202C41;
}

.box {
    background-color: #202C41;
    color: white;
    padding: 10px;
    border-radius: 25px;
    display: flex;
    align-self: stretch;
    justify-content: center;
    flex-direction: column;
}
.box hr {
    color: #ebd4b1;
    width: 100%;
}

.dark a {
    text-decoration: none;
    color: white;
}

.form-closed {
    background-color: pink;
}


@media screen and (max-width: 600px) {
}

@media screen and (max-width: 768px) {
    .box {

        align-self: center;
    }
}

@media screen and (max-width: 992px) {
}

@media screen and (max-width: 1200px) {
    #content > * {
        padding: 15px 5%;
    }
}