*{
    display: inline;
    position: static;
    overflow: hidden;

    font-family: "Kenney Pixel";

}

@font-face{
    font-family: "Kenney Rocket" "Kenney Pixel" "FreeSans";
    src: url("assets/fonts/Kenney Rocket.ttf"), url("assets/fonts/Kenney Pixel.ttf"), url("assets/fonts/Freesans/FreeSans.ttf")
}

/*------------consent--------------*/
/*.consent*/

body.consent{
    position: fixed;
    display: grid;

    margin: 0px;
    padding: 0px;

    top: 0px;
    left: 0px;

    background-color: black;

}

.consent#element1{
    position: fixed;
    color: gainsboro;

    width: 60%;
    height: 20%;

    left: 20%;
    bottom: 1%;

}
.consent#title{
    position: absolute;

    width: 60%;
    height: 20%;

    top: 0px;
    left: 0px;

    color: red;

    border-bottom: 0.5vh solid red;

    margin: 2px;

}

.consent#title h1{
    margin-left: 2%;

    font-family: "Kenney Rocket";
    font-size: 3vh;

    left: 20px;
}

.consent#button{
    position: absolute;
    font-size: 2vh;

    width: 25%;
    height: 80%;

    margin-top: 2%;
    margin-bottom: 2%;

    bottom: 0px;
    right: 0px;


}
#button a{
    text-decoration: none;
}

#button{
    position: relative;

    width: 100%;
    height: 50%;

    color: white;
    background-color: darkred;

    border-style: none;
    text-decoration: none;

    font-family: "Kenney Rocket";
    font-size: 1.6em;
}
#button:hover{
    background-color: red;
}
#button:active{
    background-color: lightcoral;

}

.consent#element2{
    position: absolute;

    width: 60%;
    height: 60%;

    top: 30%;
    margin: 1%;

    color: red;

    font-size: 2.4vh;
}
/*home-------------------------------*/
/*.home*/
    /*#parent*/
    /*#sidebar*/
    /*#msgBox*/
    /*#credit*/
    /*#logo*/
    /*#update*/
    /*#warning*/

/*.image*/
    /*#gallery*/
    /*#thumb*/
    /*#meta*/

/*.nav*/
    /*#start*/
    /*#item*/

/*.text*/
    /*#image*/
    /*#passage*/
    /*#meta*/

/*_-_-_-_-_-_-_ HOME -_-_-_-_-_-_-*/
div.home#credit{
    position: fixed;
    display: grid;
    align-content: flex-start;

    margin: 0px;
    padding: 8px;

    border: 2px solid transparent;
    border-image: url("art/msgbox.png") 24 fill;

    top: 5%;
    left: 54%;

    width: 10%;
    height: 400px;
}

body.home{
    position: fixed;
    display: grid;

    margin: 0px;
    padding: 0px;

    top: 0px;
    left: 0px;

    color: white;
    background-image: url(art/Grid.png),url(art/Sky2.png);
    background-color: black;
}

div.home#sidebar{
    position: fixed;

    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    background-image: url("art/Sidebar.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.home#sidebar p{
    position: fixed;
    display: inline;

    bottom: 0px;
    left: 0px;

    color: black;

    font-size: 1.2rem;
    margin-left: 2%;
}

.home#sidebar a img{
    position: fixed;
    display: inline;

    top: -6%;
    left: 0px;

    margin-left: -0.5%;

    width: 12.5%;
    height: auto;
}

div.home#passage{
    position: fixed;
    display: grid;

    grid-template-rows: auto;
    align-content: flex-start;

    font-size: 1.2rem;
    top: 5%;
    left: 19.75%;

    height: 70%;
    width: 600px;
    
    padding: 6px;

    border: 3px solid transparent;
    border-image: url("art/border.png") 24 fill ;


}
.home#passage h1{
    margin: 0px;

    font-family: "Kenney Rocket";
    line-height: 1.8rem;
}
.home#passage p{
    margin: 0px;

    height: auto;
    line-height: 0.8rem;
}
.home#passage ol{
    margin: 0px;

    height: auto;
    line-height: 0.8rem;
}

.home#msgbox{
    position: fixed;
    display: inline;

    bottom: 2%;
    left: 19.75%;

    width: 600px;
    height: 7%;

    padding: 6px;

    border: 2px solid transparent;
    border-image: url("art/msgbox.png") 24 fill;

}

.body#warning{
    position: fixed;
    display: grid;
    transform: rotate(90deg);
    top: 55%;
    left: -10.75%;

    width: 20%;
    height: 10%;

    padding-left: 200px;
    padding-right: 200px;

    backdrop-filter: blur(1px);

    background-color:rgba(255,100,100, 25%);

}
.body#warning p{

    font-size: 1.125rem;
}
/*_-_-_-_-_-_-_ NAV -_-_-_-_-_-_-*/

.nav{
    font-size: .5rem;
}
.nav#parent{
    position: fixed;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    bottom: 12%;
    left: 20%;

    height: 100px;

}

.nav#item{
    border-right: 2pt solid gainsboro;
    width: 200px;


}
.nav#start{
    border-right: 2pt solid gainsboro;
    border-left: 2pt solid gainsboro;
    width: 200px;

}
.nav#item h1{
    font-family: "Kenney Rocket";
    color: white;
}
.nav#start h1{
    font-family: "Kenney Rocket";
    color: white;
}
.nav#item ul li{
    display: block;
    font-family: "Kenney Rocket";
    padding-left: 12%;
    padding-right: 12%;
    align-items: center;
    color: gray;
}
.nav#start ul li{
    display: block;
    font-family: "Kenney Rocket";
    padding-left: 12%;
    padding-right: 12%;
    align-items: center;
    color: gray;
}

.nav#start ul li a, .nav#item ul li a{
    display: block;
    font-family: "Kenney Rocket";
    align-items: center;
    color: darkcyan;
    text-decoration: none;
}
.nav#start ul li a:visited, .nav#item ul li a:visited, a:hover{
    color: darkcyan;
}
.nav#start ul li a:hover, .nav#item ul li a:hover, a:hover{
    color: cyan;
}
.nav#start ul li a:active, .nav#item ul li a:active, a:active{
    color: whitesmoke;
}
a{
    color: darkcyan;
    text-decoration: none;
}
/*_-_-_-_-_-_-_image-_-_-_-_-_-_-*/

div.image{
    position: fixed;
    width: 1000px;
    height: 600px;

    top: 5%;
    left: 32%;

    border: 2px solid transparent;
    border-image: url("art/msgbox.png") 24 fill
}
.image#imactual{
    position: relative;
    display: grid;

    width: min-content;
    height: 100%;

    margin: auto;
}
div.image#thumb{
    position: fixed;

    top: 5%;
    left: 20%;

    width: 200px;
    height: 600px;

    overflow-y: scroll;
}
.image#thumb img{
    display: flex;
    width: 200px;
    height: auto;
}
.image#thumb img:active{
    filter: blur(2px) brightness(80%);
}

.image#thumb img:hover{
    filter: grayscale(5%) sepia(4%);
}
.image#thumb img{
    filter: opacity(25%) grayscale(100%) sepia(75%) blur(2px);
}