* {
    box-sizing: border-box; }

body {
    margin: 0;
    background: linear-gradient(rgb(0, 31, 49),whitesmoke) no-repeat; }

header, nav, main, aside, footer {
    padding: 1rem;
    
    background-color: none; }

header{
    height:30px;
    background-color: #6a7c86;
}

footer {
    padding:0;
}

footer .footer-box{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    color:#6a7c86;
    background-color: rgb(0, 31, 49);
    font-size:0.8rem;
    user-select: none;
    margin:0 auto;
    height: 100%;
    padding:8px;
}

#page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 100%;
    /*grid-template-rows: 7em 5em auto auto 5em;*/
    grid-gap: 10px; }

#raster {
    display: grid;
    grid-gap: 0rem;
   
    margin: 0 auto;
    background-color: whitesmoke;
    border-radius: 0.5rem;;
    box-shadow: 0px 0px 7px 3px rgb(77, 77, 77);
    padding: 2px;
    position: relative;
    z-index: 1000;
}

#page-header,
#page-nav,
#page-footer {
    grid-column-start: 1;
    grid-column-end: 1; }

#page-content {
    grid-row-start: 2;
    max-width: 400px;
    margin: 0 auto;}

.content-box {
    padding: 1rem;
    border: #999 thin dotted;
    background-color: #FFF; }

.footer-box span {
    user-select: none;
    margin-left: 3px;;
}
.footer-box span span{
    color:#a5becc;
    user-select:text;
    
}

.home{
    text-decoration: none;
    color:whitesmoke;
    transition: color ease .2s;
    position: relative;
    z-index: 1000;
}
.home:hover, .home:focus{
    color:rgb(255, 196, 0);
    transition: all ease .2s;
    text-shadow: none;
}


.item a:hover, .item a:focus{
    color: gold;
    display: inline-block;
    /*transform: scale(1.1);*/
    transition: all ease-in .2s;
}

.item a:hover::before, .item a:focus::before{
    content: "./";
}

.item a:hover::after, .item a:focus::after{
    content: "/";
}

.item a {
    text-decoration: none;
    color: #9d7809;
    transition: color ease-out .2s;
    user-select: none;
}

.menu-items-container{
    height: 242px;
    padding: 15px;
    background-color: #1b334d;
    border-radius: 0.5rem;

}

.menu-items{
    margin-left:10px;
}

br{
    margin:1px;
}

.title-container{
    height: auto;
    width: 100%;
    margin: 0 auto;
    color:rgb(25, 60, 74);
    background: #6a7c86;
    border-radius: 0.5rem;
}

.title{
    padding:1.4rem;
    font-size: 2.5rem;
    margin:0;
    text-align:center;
    user-select:none;
    font-weight: bolder;

}

.z, .a, .b, .u, .z2, .a2, .r, .a3{
    transition:color ease 1.5s;
    position: relative;
    cursor: none;
}
.z:hover{
    text-shadow: 0px 2px 3px #000;
    position: relative;
    bottom: 0.1rem;
    transition:all ease 0.1s;
    color:rgb(255, 0, 0);}
.a:hover{
    text-shadow: 0px 2px 3px #000;
    position: relative;
    bottom: 0.1rem;;
    transition:all ease 0.1s;
    color:rgb(255, 115, 0);}
.b:hover{
    text-shadow: 0px 2px 3px #000;
    position: relative;
    bottom: 0.1rem;;
    transition:all ease 0.1s;
    color:rgb(255, 174, 0);}
.u:hover{
    text-shadow: 0px 2px 3px #000;
    position: relative;
    bottom: 0.1rem;;
    transition:all ease 0.1s;
    color:rgb(0, 224, 67);}
.z2:hover{
    text-shadow: 0px 2px 3px #000;
    position: relative;
    bottom: 0.1rem;;
    transition:all ease 0.1s;
    color:rgb(0, 217, 255);}
.a2:hover{
    text-shadow: 0px 2px 3px #000;
    position: relative;
    bottom: 0.1rem;;
    transition:all ease 0.1s;
    color:rgb(89, 0, 255);}
.r:hover{
    text-shadow: 0px 2px 3px #000;
    position: relative;
    bottom: 0.1rem;;
    transition:all ease 0.1s;
    color:rgb(255, 0, 255);}
.a3:hover{
    text-shadow: 0px 2px 3px #000;
    position: relative;
    bottom: 0.1rem;;
    transition:all ease 0.1s;
    color:rgb(255, 0, 149);}

.logo-container{
    margin: 0 auto;
   /* padding:1rem;*/
    margin-bottom: 20px;
    position: relative;
}

.logo{
    color:whitesmoke;
    margin:0 auto;
    font-size: .7rem;
    user-select: none;
    text-shadow: 2px 3px 3px black;
    font-weight: bold;
    z-index: 2;
position: relative;
}

.logo-background{
    position: absolute;
    top:0;
    left:0;
}

.logo-foreground{
    position: absolute;
    top:0;
    left:0;
    z-index: 3;
    /*border:1px blue solid;*/
}

@media only screen and (max-width: 370px) {
    .logo{
        color:whitesmoke;
        margin:0 auto;
        font-size: .5rem;
        user-select: none;
        text-shadow: 2px 3px 3px black;
  
    }
}