body {
    font-family: "Nunito Sans", sans-serif;
}

.bg {
    background:
    linear-gradient(to right, #6ea872, transparent),
    url(https://grainy-gradients.vercel.app/noise.svg);
    filter: opacity(95%) brightness(100%);
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    min-height: 100%;
    min-width: 100%;
}

.fg {
    z-index: -1;
    background: #2a6b97;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    min-height: 100%;
    min-width: 100%;
    mix-blend-mode: multiply;
    isolation: isolate;
}

header {
    width: 60%;
    margin-top: 2.5%;
    margin-left: 20%;
    margin-right: 20%;
}

main {
    width: 60%;
	margin-left: 20%;
	margin-right: 20%;

    padding-top: 10%;
    padding-bottom: 10%;
    margin-top: 5%;
    margin-bottom: 5%;

    text-align: center;
    border: 1px solid black;
    border-radius: 10px;
    filter: drop-shadow(7px 5px 10px #000000);

    background-image: url("../content/jonas-kaiser-gEHatgz5Twk-unsplash.jpg");
    background-position-y: 55%;
    background-size: 101%;
}

a {
    text-decoration: none;
    color: #f3f3fc;
}

a:hover {
    text-decoration: none;
    /* can change the color later just a placeholder */
    color: #4d4d4d;
}

nav {
    background: #f3f3fc;
    border-radius: 10px;
    border: 1px solid #466a48;
    filter: drop-shadow(7px 5px 10px #000000);
    border-radius: 10px;
    border: 1px solid #466a48;
    filter: drop-shadow(7px 5px 10px #000000);
    display: grid;
    grid-template-columns: 3.5% 30% 33% 30% 3.5%;
    overflow: hidden;
    align-items: center;
}

nav li {
    color: #2a6b97;
    display: inline;
    margin: 2.5%;
}

nav ul {
    list-style-type: none;
}

footer {
    text-align: center;
    font-size: small;
    color: #e0f1ff;
}

footer img {
    width: 10%;
    height: 10%;
}

/* .image_container {

} */

.grid_margin_left {
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid_margin_right {
    grid-column-start: 4;
    grid-column-end: 5;
}

.grid_logo_container {
    text-align: left;
    /*color: #f3f3fc;*/
}

.grid_logo_container .temp_logo {
    max-width: 20%;
    width: 15%;
    margin-top: 7.5%;
    margin-bottom: 7.5%;
}

.grid_nav_link_container {
    text-align: right;
}

.grid_nav_link_container {
    vertical-align:text-bottom;
}

.temp_logo {
    width: 10%;
    height: 10%;
    margin-top: 1%;
    margin-bottom: 1%;
    vertical-align: middle;
}

.logo_label {
    color: #2a6b97;
}

.strong_big {
    text-align: center;
    font-size: 350%;
    /* color: #393939; */
    color: #e0f1ff;
    filter: drop-shadow(7px 5px 10px #000000);
}