:root{
	--color-bg: #F8FAF3;
	--slider-width: 15px;
	--main-f-s: 14px;
	--nextmono-spacing: -0.19em;
	--nextmono-sm-f-s: 0.7em;
	--border: 0.5px solid black;
	--padding-main: 0.7em;
	--header-height-1: 9vh;
  --header-height-2: calc(2.5vh + (var(--padding-main) * 2));
  --preview-info-h: 15vh;
  --preview-h: 38vh;
}

#homescroll{
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.bg-check{
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("bg-check.png");
  background-size: 100% auto;
  pointer-events: none;
/*  background-position: bottom;*/
  opacity: 0.2;
  display: none;
}

#list-preview-model{
  position: absolute;
  width: 12vw;
  height: 12vw;
  z-index: 0;
  pointer-events: none;
  display: none;
  margin-top: calc((var(--header-height-1) + (var(--header-height-2) * 2)) * -1 );
}
#list-preview-model.visible{
  display: block;
}

html, body{
	margin: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
	font-size: var(--main-f-s);
  overflow: hidden;
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  font-weight: normal;
  overscroll-behavior: none; /* this was added to possibly fix laggy scrolling models */
}
*::-webkit-scrollbar { display: none; }

/* Hide scrollbar for IE, Edge and Firefox */

{ -ms-overflow-style: none; /* IE and Edge / scrollbar-width: none; / Firefox */ }

@font-face {
  font-family: "NEXTMono";
  src: url("fonts/Next_Mono/WEB/NEXT-Mono-Thin.woff2") format("woff2")
}
@font-face {
  font-family: "NordicPavillion";
  src: url("fonts/Nordic_Pavillion/WEB/20210301-nordic_pavilion-book-WEB.woff2") format("woff2")
}

@media screen and (orientation:landscape) {
    .desktop-hide{
    	display: none !important;
    }
    .desktop #list-preview-model {
      display: block;
    }
}
/*@media screen and (orientation:landscape) and (min-width:700px) and (max-width:800px) {
    :root{
      --main-f-s: 7px;
    }
}
@media screen and (orientation:landscape) and (min-width:800px) and (max-width:900px) {
    :root{
      --main-f-s: 8px;
    }
}*/
@media screen and (orientation:landscape) and (max-width:1000px) {
    :root{
      --main-f-s: 14px;
    }
}
/*@media screen and (orientation:landscape) and (min-width:900px) and (max-width:1000px) {
    :root{
      --main-f-s: 9px;
    }
}*/
@media screen and (orientation:landscape) and (min-width:1000px) and (max-width:1100px) {
    :root{
      --main-f-s: 10px;
    }
}
@media screen and (orientation:landscape) and (min-width:1100px) and (max-width:1200px) {
    :root{
      --main-f-s: 11px;
    }
}
@media screen and (orientation:landscape) and (min-width:1200px) and (max-width:1300px) {
    :root{
      --main-f-s: 12px;
    }
}
@media screen and (orientation:landscape) and (min-width:1300px) and (max-width:1400px) {
    :root{
      --main-f-s: 13px;
    }
}
@media screen and (orientation:landscape) and (min-width:1400px) and (max-width:1500px) {
    :root{
      --main-f-s: 14px;
    }
}
@media screen and (orientation:landscape) and (min-width:1500px) and (max-width:1600px) {
    :root{
      --main-f-s: 15px;
    }
}
@media screen and (orientation:landscape) and (min-width:1600px) and (max-width:1700px) {
    :root{
      --main-f-s: 16px;
    }
}
@media screen and (orientation:landscape) and (min-width:1700px) and (max-width:1800px) {
    :root{
      --main-f-s: 17px;
    }
}
@media screen and (orientation:landscape) and (min-width:1800px) and (max-width:1900px) {
    :root{
      --main-f-s: 18px;
    }
}
@media screen and (orientation:landscape) and (min-width:1900px) and (max-width:2000px) {
    :root{
      --main-f-s: 19px;
    }
}
@media screen and (orientation:landscape) and (min-width:2000px) and (max-width:2100px) {
    :root{
      --main-f-s: 20px;
    }
}
@media screen and (orientation:landscape) and (min-width:2100px) and (max-width:2200px) {
    :root{
      --main-f-s: 21px;
    }
}
@media screen and (orientation:landscape) and (min-width:2200px) and (max-width:2300px) {
    :root{
      --main-f-s: 22px;
    }
}
@media screen and (orientation:landscape) and (min-width:2300px) and (max-width:2400px) {
    :root{
      --main-f-s: 23px;
    }
}
@media screen and (orientation:landscape) and (min-width:2400px) and (max-width:2500px) {
    :root{
      --main-f-s: 24px;
    }
}
@media screen and (orientation:landscape) and (min-width:2500px) and (max-width:2600px) {
    :root{
      --main-f-s: 25px;
    }
}
@media screen and (orientation:landscape) and (min-width:2600px) and (max-width:2700px) {
    :root{
      --main-f-s: 26px;
    }
}
@media screen and (orientation:landscape) and (min-width:2700px) and (max-width:2800px) {
    :root{
      --main-f-s: 27px;
    }
}
@media screen and (orientation:landscape) and (min-width:2800px) and (max-width:2900px) {
    :root{
      --main-f-s: 28px;
    }
}
@media screen and (orientation:landscape) and (min-width:2900px) and (max-width:3000px) {
    :root{
      --main-f-s: 29px;
    }
}
@media screen and (orientation:landscape) and (min-width:3000px) and (max-width:3100px) {
    :root{
      --main-f-s: 30px;
    }
}
@media screen and (orientation:landscape) and (min-width:3100px) and (max-width:3200px) {
    :root{
      --main-f-s: 31px;
    }
}
@media screen and (orientation:landscape) and (min-width:3200px) and (max-width:3300px) {
    :root{
      --main-f-s: 32px;
    }
}
@media screen and (orientation:landscape) and (min-width:3300px) and (max-width:3400px) {
    :root{
      --main-f-s: 33px;
    }
}
@media screen and (orientation:landscape) and (min-width:3400px) and (max-width:3500px) {
    :root{
      --main-f-s: 34px;
    }
}
@media screen and (orientation:landscape) and (min-width:3500px) and (max-width:3600px) {
    :root{
      --main-f-s: 35px;
    }
}
@media screen and (orientation:landscape) and (min-width:3600px) and (max-width:3700px) {
    :root{
      --main-f-s: 36px;
    }
}
@media screen and (orientation:landscape) and (min-width:3700px) {
    :root{
      --main-f-s: 37px;
    }
}
/*@media screen and (orientation:landscape) and (min-width:2000px) and (max-width:2500px) {
    :root{
      --main-f-s: 20px;
    }
}
@media screen and (orientation:landscape) and (min-width:2500px) and (max-width:3000px) {
    :root{
      --main-f-s: 25px;
    }
}
@media screen and (orientation:landscape) and (min-width:3000px) and (max-width:3800px) {
    :root{
      --main-f-s: 38px;
    }
}
@media screen and (orientation:landscape) and (min-width:3800px) {
    :root{
      --main-f-s: 43px;
    }
}*/

/*ipad, tablets*/

@media screen and (min-width: 600px) and (max-width: 820px) and (orientation:portrait){
  :root{
    --main-f-s: 15px;
  }
}
@media screen and (min-width: 821px) and (orientation:portrait){
  :root{
    --main-f-s: 18px;
  }
}

@media screen and (min-width: 600px) and (max-width: 820px) and (orientation:portrait), (min-width: 821px) and (orientation:portrait){
  
  html, body{
      position: absolute;
      inset: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
/*      border: 1px solid red;*/
    }
  .mobile-hide:not(.info-bottom.mobile-hide){
      display: none;
    }
    :root{
      --border: 1px solid grey;
    }
    *::-webkit-scrollbar {
      display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    * {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
}

@media screen and (max-width: 600px) and (orientation:portrait){
    html, body{
      position: fixed;
      inset: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
/*      border: 1px solid red;*/
    }
	.mobile-hide{
    	display: none !important;
    }
    :root{
      --border: 1px solid grey;
    }
    *::-webkit-scrollbar {
      display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    * {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
}