:root {
  --bg_color: #181818;
  --text_color: #eeeeee;

  
}
body {
    font-family:  "Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    letter-spacing: -1px;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: var(--bg_color);
    color: var(--text_color);
   
}
footer {
    display: flex;
    align-items: center;
    column-gap: 5px;
    border: 0px solid #888888;
    border-radius: 3px;
    padding: 5px;
    margin-top: 10px;
}
footer > a > img {
    width: 16px;
}

.main {
    justify-content: center;
    max-width: 90vw;   
    /*max-height:100vh;*/
    margin: auto;
    flex-direction: column;
    display: flex;
}
@media (min-width: 1200px) {
   
}
nav {
    display: flex;
     top: 0;
    column-gap: 1px;
    align-items: center;
    width: 100%;
    gap: 10px;
   position: sticky;
   background-color: var(--bg_color);
    
}
nav span:not(:first-child)::before {

    margin-left: 5px;
}
nav a:visited, nav a{
    color:var(--text_color);
}
nav img {
    width: 80%;
}
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 95vw;  
    max-height: 90vh;
 

}
.main-media {
    max-height:inherit;
    max-width:inherit;
    flex-shrink: 2;
 
}
.main-media > img {
    max-height:inherit;
    width:100%;
}
.move {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content:space-around;
    flex-shrink: 3;
   
}
.thumb {
    height: auto;
    object-fit: cover;
    width: 100%;
    aspect-ratio:1/1; border: 1px solid var(--bg_color);
}
.grid {
    display: flex;
    flex-wrap:wrap-reverse  ;
    flex-direction: row;
    justify-content:left;
    max-height: 100vh;

        margin: auto;
    margin-top: 20px;
    border: 0px ;
    border-radius: 5px;
        max-width: 70vw;  
    
}
.grid > * { 
    flex-basis: 20%;
    margin: 0px;
    padding: 0px;
}
.grid div {
     border-radius: 10px;   
}
.grid div a {
    margin: 0px;
    padding: 0px;
    border-radius: 10px;
    vertical-align:middle;
}
.grid img {
      border-radius: 10px;   
      vertical-align:middle;
}
a { 
    color: var(--text_color);
}
a:hover,a:visited:hover{ 
    color: var(--bg_color);
    background-color: var(--text_color);
}
a:visited{
    color: var(--text_color);
}
.selected {
    background-color:var(--text_color);


}

.paginator{
    display: flex;
    justify-content:center;
     flex-wrap: wrap;
     align-content: flex-start;
     width: 100%;
     margin-top: 20px;
    gap: 1vw;
}
.selected_page {

    background-color:var(--text_color);
    color: var(--bg_color);
}

#overview {
   height: 100%;
   width: auto;
}
.new-overview {
    display: block;
    height: 75vh;
    width: 100%;
}