@font-face {
  font-family: "ATF Railroad";
  src: url("./fonts/ATF Collection - Railroad Gothic ATF.otf");
}

body {
  margin: 0;
  padding: 0;
}

#demo {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background: rgb(247, 247, 247);
}

.hidden {
  display: none!important;
}

#viewer-container {
  position: relative;
  width: 100%;
  height: 100%;
}

model-viewer {
  width: 100%;
  height: 100%;
}

#thumbnail-container {
  position: absolute;
  top: 0;
  left: 0px;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: min(2vh, 15px);
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#thumbnail-container > div {
  position: relative;
  background-color: #fff;
  /*width: min(15vw, 250px);*/
  height: min(calc(var(--vh, 1vh) * 15), 125px);
  aspect-ratio: 2;
  margin-left: min(1%, 20px);
  padding: 0px;
  margin: 0px;
  margin-left: max(1vw, 20px);
  border-radius: 5px;
  border: 1.5px solid black;
  cursor: pointer;
  object-fit: contain;
  user-select: none;
}

#thumbnail-container > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

#thumbnail-container > div > span {
  display: none;
}

#thumbnail-container > .selected {
  border-color: rgb(255, 127, 0);
}

.callout {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: min(1vw, 50px);
  /* aspect-ratio: 8 / 5; */
  /* height: min(250px, calc(var(--vh, 1vh) * 20));*/
  width: 352px;
  height: 220px;
  background: rgb(11, 11, 15);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 44px auto;
  grid-template-rows: 44px auto;
  z-index: 2;
  user-select: none;
  transition: opacity 0.5s ease-out; 
  opacity: 1;
  overflow-y: auto;
  scrollbar-width: thin; 
  scrollbar-color: #f58025 transparent;
  -webkit-scrollbar-track: transparent;
  -webkit-scrollbar-thumb: #f58025;
}

.callout > img {
  box-sizing: border-box;
  object-fit: contain;
  width: 30px;
  aspect-ratio: 1;
  margin: 7px;
  grid-row: 1/1;
  grid-column: 1/1;
}

.callout.inactive {
  opacity: 0;
}

.callout.squashed {
  height: 0;
}

.callout > .description {
  margin-right: 8px;
  margin-top: 0px;
  grid-row: 2/2;
  grid-column: 2/2;
}

.callout > .description > .header {
  margin-top: 0px;
  color: white; 
  text-transform: uppercase;
  font-family: "ATF Railroad";
  font-size: 30px;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.callout > .description > .text {
  font-family: Arial;
  margin-top: 10px;
  color: rgb(219, 219, 219);
}

.callout::-webkit-scrollbar {
  background: darkgray;
  width: 6px;
}

.callout::-webkit-scrollbar-thumb {
    background: #f58025;
    /*-webkit-border-radius: 1ex;*/
    /*-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);*/
}

.callout::-webkit-scrollbar-track {
    background: transparent;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

.callout::-webkit-scrollbar-corner {
    background: #000;
}


#controls {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  z-index: 1;
}

#controls > * {
  width: 25px;
  height: 25px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: none;
  outline: none;
  cursor: pointer;
}

#hamburger {
  position: absolute;
  left: 16px;
  top: 16px;
  display: block;
  z-index: 20;
  width: 25px;
  height: 25px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: none;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='none' stroke-width='0' viewBox='0 0 15 15' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
  display: none;
}

@media (orientation: portrait) {
  #thumbnail-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #f7f7f7;
    padding: 0;
    margin: 0;
    top: unset;
    left: unset;
    bottom: unset;
    right: unset;
  }

  #thumbnail-container > div {
    width: 90%;
    margin: 0;
    /*aspect-ratio: unset;*/
  }

  #thumbnail-container > div > img {
    width: 100%;
    height: 100%;
  }

  #thumbnail-container > div > span {
    display: unset;
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: 20%;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
  }

  #hamburger {
    display: unset;
  }

  #hamburger.open {
    background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='none' stroke-width='0' viewBox='0 0 15 15' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
  }

  .callout {
    top: unset;
    left: unset;
    right: unset;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 0px;
    transform: unset;
    aspect-ratio: unset;
    height: min(180px, 25vh);
    overflow-y: auto;
    width: calc(var(--vw, 1vw) * 90);
    bottom: calc(var(--vw, 1vw) * (100 - 90) / 2);
    grid-template-columns: 40px auto;
    grid-template-rows: 40px auto;
  }

  .callout > img {
    width: 24px;
    margin: 8px;
  }

  .callout > .description > .header {
    font-size: 1.5em;
  }
}

.fullscreen-button {
  background-image: url('data:image/svg+xml,%3Csvg%20stroke%3D%22currentColor%22%20fill%3D%22none%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2015%2015%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%202.5C2%202.22386%202.22386%202%202.5%202H5.5C5.77614%202%206%202.22386%206%202.5C6%202.77614%205.77614%203%205.5%203H3V5.5C3%205.77614%202.77614%206%202.5%206C2.22386%206%202%205.77614%202%205.5V2.5ZM9%202.5C9%202.22386%209.22386%202%209.5%202H12.5C12.7761%202%2013%202.22386%2013%202.5V5.5C13%205.77614%2012.7761%206%2012.5%206C12.2239%206%2012%205.77614%2012%205.5V3H9.5C9.22386%203%209%202.77614%209%202.5ZM2.5%209C2.77614%209%203%209.22386%203%209.5V12H5.5C5.77614%2012%206%2012.2239%206%2012.5C6%2012.7761%205.77614%2013%205.5%2013H2.5C2.22386%2013%202%2012.7761%202%2012.5V9.5C2%209.22386%202.22386%209%202.5%209ZM12.5%209C12.7761%209%2013%209.22386%2013%209.5V12.5C13%2012.7761%2012.7761%2013%2012.5%2013H9.5C9.22386%2013%209%2012.7761%209%2012.5C9%2012.2239%209.22386%2012%209.5%2012H12V9.5C12%209.22386%2012.2239%209%2012.5%209Z%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

.fullscreen-button.fullscreen {
  background-image: url('data:image/svg+xml,%3Csvg%20stroke%3D%22currentColor%22%20fill%3D%22none%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2015%2015%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.5%202C5.77614%202%206%202.22386%206%202.5V5.5C6%205.77614%205.77614%206%205.5%206H2.5C2.22386%206%202%205.77614%202%205.5C2%205.22386%202.22386%205%202.5%205H5V2.5C5%202.22386%205.22386%202%205.5%202ZM9.5%202C9.77614%202%2010%202.22386%2010%202.5V5H12.5C12.7761%205%2013%205.22386%2013%205.5C13%205.77614%2012.7761%206%2012.5%206H9.5C9.22386%206%209%205.77614%209%205.5V2.5C9%202.22386%209.22386%202%209.5%202ZM2%209.5C2%209.22386%202.22386%209%202.5%209H5.5C5.77614%209%206%209.22386%206%209.5V12.5C6%2012.7761%205.77614%2013%205.5%2013C5.22386%2013%205%2012.7761%205%2012.5V10H2.5C2.22386%2010%202%209.77614%202%209.5ZM9%209.5C9%209.22386%209.22386%209%209.5%209H12.5C12.7761%209%2013%209.22386%2013%209.5C13%209.77614%2012.7761%2010%2012.5%2010H10V12.5C10%2012.7761%209.77614%2013%209.5%2013C9.22386%2013%209%2012.7761%209%2012.5V9.5Z%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

.close-button {
  background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='none' stroke-width='0' viewBox='0 0 15 15' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
}