:root{
  color-scheme: light dark;
  --site-border-radius: 1.3rem;
  --site-opacity: 0.8;
  --site-text-color: black;
  --site-text-color-dark: white; 
  
  --site-background-color: rgb(220 220 220 / 1);
  
  --site-background-semi: rgb(255 255 255 / 0.5);
  --site-background-color-dark: rgb(50 50 50 / 1);
  --site-background-dark-semi: rgb(128 128 128 / 0.4);

  --site-accent-color: rgb(50 50 50 / 0.7);
  --site-accent-color-dark: rgb(220 220 220 / 0.7);
  --site-accent-text-color: white;
  --site-accent-text-color-dark: black;

  --site-dropshadow-color: #c1c1c1;
  --site-dropshadow-dark: #1c1c1c;
  
  --site-text-color-soft #333;
  --site-accent-color-og:  #4A4A4F;
  --column-count: 6;
}

html {
  line-height: 1.15;
  font-family: sans-serif;
  font-size: 95%;
}

body {
  background: var(--site-background-color);
  color: var(--site-text-color);
  margin: 0;
}

a {
  text-decoration: none;
}

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

#navbar {
  position: relative;
  z-index: 3;
}


.navigation{
  list-style: none;
  margin: 0; 
  padding: 0;
  /*border: solid;*/
  /*border-width: 0 0 1px 0;*/
  /*border-color: dimgrey;*/
  box-shadow: 0 2px 4px var(--site-dropshadow-color);
  
  background: var(--site-background-semi);
  
  display: flex;
  overflow-x: auto;
  
  flex-flow: row nowrap;
  align-items: center;
  font-size: 16pt;
  /*justify-content: flex-end;*/
}

#nav-logo {
	border-right: none;
}

#nav-logo a {
	padding: 0.1em 0.2em;
}

#page-logo {
	max-height: 4.5em;
	position: absolute;
	z-index: 4;
	margin: 0.2em;
}

.morenavigation {
  margin: 0; 
  padding: 0;
  background: hsl(from var(--site-background-semi) h s calc(l - 20) / 1);
  opacity: 1;
  display: flex;
  list-style: none;
  box-shadow: 0 2px 4px var(--site-dropshadow-color);
  flex-direction: column;
  align-items: stretch;
}

#spacer {
  border: none;
  flex: 2 2 auto;
  min-width: 3em;
}

.navigation li {
  opacity: var(--site-opacity);
  flex: none;
  border-right: 1px solid light-dark(lightgrey, black); 
  text-align: center;
  /*padding: 0.5em 1em;*/
  display: block;
  /*flex-basis: 0;*/
}

.navigation a {
  display: block;
  padding: 0.5em 1em;
  /*margin: 2px;*/
  /*border: solid 2px;*/
  /*border-radius: 0.4em;*/
  
  color: var(--site-text-color);
}

.navigation li:last-of-type {
  border-right: none;
}

/*.navigation li:first-of-type {
  border-left: 1px solid lightgrey;
}*/

.navigation li:hover {
  opacity: 1;
  background: rgb(from var(--site-accent-color) r g b / 0.7);
  color: var(--site-accent-text-color);
}

.navigation li:hover a{
  color: var(--site-accent-text-color);
}

#menu {
  display: none;
  box-shadow: 0 2px 4px var(--site-dropshadow-color);
  margin-top: 10px;
}

#menu li {
  border: none;
}

#menu a {
  color: var(--site-text-color);
  text-align: left;
}

#menu li:hover a {
	color: var(--site-accent-text-color);
}

#menubtn {
  flex-grow: 0;
  padding: 0.5em 1em;
}

#menubtn:hover #menu {
  display: block;
  position: absolute;
  right: 0;
}

@media all and (max-width: 600px) {
  :root {
      --column-count: 2;
  }
  
  .navigation {
    justify-content: flex-start;
    flex-flow: row nowrap;
    font-size: 4vw;
  }
    
  #navbar {
    font-size: 3vw;
  }

}

@media (prefers-color-scheme:dark) {
  :root{
    --site-text-color: var(--site-text-color-dark);
    --site-background-color: var(--site-background-color-dark);
    --site-background-semi: var(--site-background-dark-semi);
    --site-dropshadow-color: var(--site-dropshadow-dark);
    --site-accent-color: var(--site-accent-color-dark);
    --site-accent-text-color: var(--site-accent-text-color-dark);
    --site-opacity: 0.6;
  }
}

/*@media all and (max-width: 600px) {*/
  
/*  .navigation li { */
/*    text-align: center; */
/*    border: 0;*/
/*    border-bottom: 1px solid lightgrey !important;*/
/*  }*/
  
/*  .navigation li:first-of-type {*/
/*    border: none;*/
/*  }*/

/*  .navigation li:last-of-type {*/
/*    border: none !important;*/
/*  }*/
/*}*/


/* Style Sheet for New Tab clone of Firefox 56 and prior. */



h1 {
    font-size: 14pt;
    /*margin: 0em 2em 0em;*/
    padding: 1em 2em 0em;
}

#bg {
    z-index: -5;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--site-background-color);
    /*background-image: url("bg.jpg");*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.site-grid {
  z-index: 0;
  display: flex;
  flex-wrap: wrap;
  /*grid-template-columns: repeat(auto-fill, calc(88vw/var(--column-count)));
  grid-auto-rows: calc(88vw/(var(--column-count)*6));
  column-gap: 1.5vw;
  justify-items: center;*/
  justify-content: center;
  align-items: stretch;
  position: relative;
  margin: 0 0.5vw;
  width: calc(100% - 1vw);
}


/*.site-grid:not(:target) {*/
  /*display: none;*/
/*}*/

/*.site-grid:target {*/
/*  display: flex;*/
/*}*/

#contents {
	/*display: flex;
	flex-wrap: wrap;*/
}

.topsites-site {
    opacity: var(--site-opacity);
    overflow: hidden;
    color: light-dark(#333, white);
    border-radius: var(--site-border-radius);
    box-shadow: 0 0.2vw 0.5vw var(--site-dropshadow-color);
    max-height: calc(88vw/(var(--column-count)*1.4));
    width: calc(88vw/var(--column-count));
    flex: none;
    margin: 1vw 0.7vw 2vw;
    background-color: rgba(255,255,255,.2);
    transition: opacity 100ms ease-out;
    transition: transform 200ms ease;
}

.topsites-site .thumbnail {
    display: block;
    background-color: rgba(255,255,255,.2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: calc((88vw/(var(--column-count)*1.4)) - (9vw/var(--column-count)));
}
.topsites-site .title {
    font-size: calc(5.4vw/var(--column-count));
    text-align: center;
    display: block;
    background-color: light-dark(hsl(0 0 100% / 0.8), #4A4A4F);
    height: calc(9vw/var(--column-count));
    padding-top: 1%;
}

.topsites-site:hover{
    opacity: 1;
    transform: scale(1.1);
    z-index: 1;
}

.topsites-site:hover .title{
    color: var(--site-accent-text-color); /*light-dark(white, #333);*/
    background-color: light-dark(var(--site-accent-color), var(--site-accent-color));
}

.short {
	height: calc(88vw/(var(--column-count)*2.4));
}

.short .thumbnail {
	height: calc((88vw/(var(--column-count)*2.4)) - (9vw/var(--column-count)));
}



@media only screen and (max-width: 1000px) and (min-width: 600px) {
  
    :root {
      --column-count: 3;
    }
}

@media only screen and (max-width: 1800px) and (min-width: 1000px) {
  
    :root {
      --column-count: 4;
    }
}
    
@media only screen and (min-width: 1900px) and (max-width: 2400px) {
  
   :root {
      --column-count: 6;
    }
  
    h1 {
        font-size: 18.62pt;
    }
    /*.topsites-site {
        height: 280px;
        width: 386px;
        margin: 27px 13px 47px;
    }
    
    .topsites-site .title {
        font-size: 21px;
    }*/
}
@media only screen and (min-width: 2400px) {
  
:root {
      --column-count: 7;
    }
    
    .topsites-site{
        margin: 1vw 0.5vw 1vw;
        max-height: calc(91vw/(var(--column-count)*1.4));
        width: calc(91vw/var(--column-count));
    }
    
    .topsites-site .thumbnail{
    	height: calc(91vw/(var(--column-count)*1.4) - (9vw/var(--column-count)));
    }
    
    .short {
		height: calc(91vw/(var(--column-count)*2.4));
	}
	
	.short .thumbnail {
		height: calc((91vw/(var(--column-count)*2.4)) - (9vw/var(--column-count)));
	}
    
}