:root {
  --main-bg-color: #ffffff;
  --main-type-color: #000000;
}

@font-face {
  font-family: suntar;
  text-rendering: optimizeLegibility;
font-feature-settings: “kern”;
-webkit-font-feature-settings: “kern”;
-moz-font-feature-settings: “kern”;
-moz-font-feature-settings: “kern=1”;
  src: url("../font/suntar005.otf") format("opentype");
}

html {
  background-color: var(--main-bg-color);
  color: var(--main-type-color);
  font-family: suntar;
}

#container {
  overflow-x: hidden;
}

#title {
  /* background-color: green; */
  font-size: 14vw;
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  padding: 5vw 0 5vw 0;
  border-bottom: 1px solid var(--main-type-color);
  line-height: 0.5vw;
}

#spinner {
  margin-bottom: 0vw;
  animation-name: spin;
  animation-duration: 6000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#spinner img {
  width: 6.5vw;
}

#spinner svg {
  width: 6.5vw;
  fill: var(--main-type-color);
}

#bigSpinner {
  /* transform: rotate(45deg); */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#infoBox {
  border-bottom: 1px solid var(--main-type-color);
  display: flex;
  justify-content: center;
  padding: 3vw 0 3vw 0;
}

#info {
  line-height: 1.25vw;
  font-family: 'Source Code Pro';
  font-size: 1vw;
  /* font-weight: 300; */
  width: 92vw;
  display: flex;
  justify-content: space-between;
}

#left {
  width: 55vw;
}

#right {
  width: 25vw;
}

#letter-specimen {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  border-bottom: 1px solid var(--main-type-color);
  background-color: var(--main-bg-color);
  align-items: center;
}

.grid-container-left {
  display: grid;
  height: 100vh;
  grid-template-columns: auto auto;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  background-color: var(--main-type-color);
  border-right: 1px solid var(--main-type-color);
}

.grid-container-right {
  display: grid;
  height: 100vh;
  grid-template-columns: auto auto;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  background-color: var(--main-type-color);
  border-left: 1px solid var(--main-type-color);
}

.grid-item {
  padding: 1.75vw;
  font-size: 1.625vw;
  background-color: var(--main-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.grid-item:hover {
  color: var(--main-bg-color);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--main-type-color);
  cursor: pointer;
}

.last-item {
  color: var(--main-bg-color);
}

.last-item:hover {
  -webkit-text-stroke-color: var(--main-bg-color);
  cursor: default;
}

#main-letter {
  font-size: 50vw;
  display: flex;
  color: var(--main-type-color);
}

#input-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  /* border-bottom: 1px solid black; */
}

#slider {
  padding-top: 2vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: 'Source Code Pro';
  font-weight: 300;
  font-size: 1vw;
}

#myRange {
  margin: 1.625vw;
  width: 25vw;
}

#myRange {
  -webkit-appearance: none;
  background: var(--main-bg-color);
  border: 0.575px solid var(--main-type-color);
  height: 0vh;
  outline: none;
}

#myRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125vw;
  height: 1.125vw;
  border-radius: 50%;
  border: 1px solid var(--main-type-color);
  background: var(--main-bg-color);
  cursor: pointer;
}

#typeTest {
  margin-top: 2vw;
  padding-bottom: 1vw;
  /* margin-top: 2vw;
  margin-bottom: 2vw;
  margin-left: 3vw;
  margin-right: 3vw;
  display: flex;
  justify-content: center;
  width: 95%; */
  /* text-transform: uppercase; */
  outline: none;
  border: none;
  /* font-size: 100px; */
  text-align: center;
  border-bottom: 1px solid var(--main-type-color);
  /* color:white;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: black; */
}

#typeTest-mobile {
  visibility:hidden;
}

#special-char {
  display: flex;
  justify-content: center;
  background-color: var(--main-bg-color);
  border-bottom: 1px solid var(--main-type-color);
}

#svgSpecial-char {
  width: 85vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

#svgSpecial-char svg {
  padding: 20px 25px 20px 25px;
  /* fill: var(--main-type-color); */
}

.spinners {
  fill: var(--main-type-color);
  animation-name: spin;
  animation-duration: 6000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.svg-stroke {
  stroke:  var(--main-type-color);
}

.svg-text {
  fill: var(--main-type-color);
}

#photoSlide {
  width: 100vw;
  /* background-color: red; */
}

#photoSlide img {
  width: 30vw;
}

#marqueeImg {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--main-type-color);
}

#marqueeImg img:hover  {

}

.hoverLay {
  margin: 20px;
  /* background: var(--main-bg-color); */
  background: var(--main-type-color);
}

.hoverLay img:hover {
  mix-blend-mode: none;
  -webkit-filter: none;
  filter: none;
}


.hoverLay:hover {
  background: none;
}

.hoverLay img {
  display:block;
  /* mix-blend-mode: multiply; */
  mix-blend-mode: screen;
  filter: grayscale(100%) contrast(200%);
  opacity: 1;
}

#total-spec {
  /* padding-top: 20px; */
  width: 100vw;
  height: 100vh;
  font-size: 10vw;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  align-content: center;
  /* height: 50vw; */
  border-bottom: 1px solid var(--main-type-color);
}

#abc {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#abc-num {
  text-decoration: none;
}

.svg-spinners {
  align-items: center;
  align-content: center;
  display: flex;
  justify-content: space-between;
}

#abc-spin div svg {
  padding: 0 20px 0 20px;
}
/*
.spinners {
  width: 10vw;
  padding: 2vw;
} */