@font-face {
    font-family: 'Staatlich';
    src: url('font/staatliches-regular/') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url('font/Montserrat,Roboto_Condensed,Staatliches/') format('truetype');
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #a3eeb2;
}
.container-frontpage {
    display: grid;
    grid-template-columns: 8.2% 38% 53.5%;
    grid-template-rows: 35% 10% 55%;
    position: relative;
    width: 100%;
}
#fronttext {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    z-index: 15;
}
.container-frontpage img {
    grid-row: 1 / span 3;
    grid-column: 1 / span 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}
.container-frontpage h2 {
    margin: 0;
    display: inline-block;
    margin-bottom: 10px;
}
.container-frontpage h2 span {
    background-color: #3c58b5;
    padding: 5px 8px;
    color: #a3eeb2;
    letter-spacing: -1px;
}
.container-frontpage h1 {
    text-transform: uppercase;
    margin: 0;
    background-color: #a3eeb2;
    padding: 5px 5px;
    display: inline-block;
    color: #3c58b5;
    letter-spacing: -1px;
}
.header {
    height: 45px;
    width: 45%;
    left: 29%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    background-color: #ffffff;
    position: fixed;
    z-index: 3;
}
.header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: 'Staatlich';
    font-style: normal;
    font-weight: 900;
    font-size: 120%;
    text-transform: uppercase;
    letter-spacing: -1px;
}
.header ul a {
    text-decoration: none;
    color: #3c58b5;
    transition: color 0.3s;
}
.header ul a:hover {
    color: black;
}
.header ul:nth-last-child(-n+3) {
    color: #3c58b5;
}
.header ul li {
    display: inline;
}

.header ul li:not(:last-child) {
    margin-right: 10px;
}


.mid-container {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
    width: 100%;
    background-color: rgb(0, 247, 255);
    padding: 10px 100px;
    box-sizing: border-box;
    margin-top: 10px;
    justify-content: space-between;
}

#item-1 {
    background-color: #a3eeb2;
    width: 59%;
    height: 50%;
    display: inline-block;
    margin: 0;
    background-size: cover;
    /* height: 100%; */
    display: flex;
    /* align-items: center;
    justify-content: center; */
    position: relative;
}

#item-2 {
    background-color: #3c58b5;
    width: 39%;
    height: 50%;
    display: inline-block;
    margin: 0;
}

#item-3 {
    background-color: #a3eeb2;
    width: 100%;
    height: 42%;
    display: inline-block;
    margin: 0;
    box-sizing: border-box;
    padding: 10px;
}
#item-3 img {
    display: fill;
    height: 100%;
    width: 100%;
    /* padding: 10px; */
}

.item-1-textcontainer {
    flex: 1;
    box-sizing: border-box;
    position: absolute;
    background-color: rgba(163, 238, 178, 0.9);
    margin: 40px 30px;
    margin-right: 100px;
}
.item-1-blauwcontainer {
    position: absolute;
    bottom: 6%;
    left: 30px;
    background-color: #3c58b5;
    font-family: 'Staatlich';
    font-style: normal;
    font-weight: bold;
    font-size: larger;
}
.item-1-blauwcontainer p {
    color: #a3eeb2;
    text-transform: uppercase;
    padding: 0 10px;
}

.item-1-text {
    font-family: 'Staatlich';
    font-style: normal;
    font-weight: 1000;
    color: #3c58b5;
    padding: 13px 20px;
    margin-bottom: 2px;
    margin: 0;
    font-size: smaller;
}

.midimage1 {
    height: 100%;
    width: 100%;
    object-fit: fill;
    position: relative;
}



/* .container-item-2-blocks {
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 5% 15% 22% 22% 22% 5%;
    height: 100%;
    width: 100%;
    margin: 0;
}
.solomid-container p {
    font-family: 'Staatlich';
    font-style: normal;
    font-weight: bold;
    font-size: larger;
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}


#item-2-block-1 {
    background-color: #4e67bb;
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    grid-gap: 10px;
}

#item-2-block-2 {
    background-color: #4e67bb;
    grid-column: 2;
    grid-row: 4;
    z-index: 100;
    margin: 0;
}

#item-2-block-3 {
    background-color: #4e67bb;
    grid-column: 2;
    grid-row: 5;
    margin: 0;
}  */