* {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
    font-weight: 200;
    margin: 5px;
    padding: 5px;

}



body {
/* background-color: rgba(55, 131, 139, 0.842);
color: rgb(255, 251, 251); */
background-color: #6e8ca5;
opacity: 0.9;
background: radial-gradient(circle, transparent 20%, #6e8ca5 20%, #6e8ca5 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #6e8ca5 20%, #6e8ca5 80%, transparent 80%, transparent) 20px 20px, linear-gradient(#ffffff 1.6px, transparent 1.6px) 0 -0.8px, linear-gradient(90deg, #b7f6aa 1.6px, #6e8ca5 1.6px) -0.8px 0;
background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
}

.container {
    display: grid;
    grid-template-columns: 16rem 1fr 16 rem;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
    "header header header"
    "nav main right"
    "footer footer footer";
    min-height: 100vh;
}

@media (max-width: 900px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
        "header"
        "nav"
        "main"
        "right"
        "footer";
    }
}

.container > * {
    border-style:dashed;
    border-radius: 20px;

}


.hg__header {
    text-align: center;
    grid-area: header;
    font-size: 20px;
    background: rgba(59, 124, 105, 0.874);
}

.hg__left {
    grid-area: nav;
    background: rgba(59, 124, 105, 0.874);

}

.hg__main {
    grid-area: main;
    background: rgba(59, 124, 105, 0.874);

}

.hg__right {
    grid-area: right;
    background: rgba(59, 124, 105, 0.874);
    padding: 1em;
}

.hg__footer {
    grid-area: footer;
    background: rgba(59, 124, 105, 0.874);
    text-align: center;
}



.hg__left ul {
    list-style-type:none;
}
.hg_left ul li {
    padding: 10px;
    background-color: black;
}
.hg__left ul a
 {
    color: rgb(255, 255, 255);
    background-color: rgba(108, 195, 118, 0.537);
    text-decoration: none;
    padding: 6pt;
}
.hg__left ul a:hover
 {
    color: white;
    background-color: rgb(126, 216, 216);
}

.iframe__main {
        
        display: block;
        border: none;         /* Reset default border */
        height: 100vh;        /* Viewport-relative units */
        width: calc(100% + 17px);
     
}