@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable.css");
a{color: white;}
a:visited{color:#a1a1a1!important}
a:hover{color: #a1a1a1;}


/*Phone*/
@media (min-width: 320px) and (max-width: 370px) {
  html{font-size: 14px;}
}
/*Tablet*/
@media (min-width: 370px) and (max-width: 767px) {
  html {font-size: 15px !important;}
}
/*Tablet-Portrait Mode*/
@media (min-width: 768px) and (max-width: 1024px) {
  html {font-size: 16px !important;}
}
/*Laptop*/
@media (min-width: 1025px) and (max-width: 10000px) {
  html{font-size: 16px !important;}
}

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  html{font-size: 14px !important;}
}
@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */
  html{font-size: 13px;}
}
/*mouse, touch pad,PC */
@media (hover: hover) and (pointer: fine) {
  html{touch-action: none;}
}

:root {
  --text-blur : 20px;
  --bg-color: #fff;
  --p-color: #000000;
  --light-indicator-color: #000000;
  --dark-indicator-color: #989898cc;
  --settings-bg: #a9a9a944;
  --image-greyscale: 0%;
}
[data-theme="dark"] {
  --bg-color: #000;
  --p-color: #ffffff;
  --light-indicator-color: #b6b6b66f;
  --dark-indicator-color: #ffffff;
  --settings-bg: #4b4b4b42;
}

body,html{
  background-color: var(--bg-color);
  width: calc(var(--vw) * 100);
  height: calc(var(--vh) * 100);
  letter-spacing: -0.02rem;
  word-spacing: -0.03rem;
  touch-action: pan-x pan-y;
  transition: 0.5s;

  word-break: keep-all;
  word-wrap: normal;
}
*{
  scroll-behavior: smooth;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", 
  "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  flex-wrap: wrap;
  -webkit-transform-origin-z: 0;
  border: none;
  caret-color: rgb(0, 0, 0);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
*::-webkit-scrollbar{
  display: none;
}



#tabcontentClickArea{
  position: fixed;
  top: 0; left: 0;
  width: calc(var(--vw) * 100); height: calc(var(--vh) * 100);
  z-index: 2; cursor: pointer;
}

#myname{position: fixed; height: 5rem; left: 1.5rem; font: 400 2rem/1 auto; color: var(--p-color);
  display: flex; justify-content: center; align-items: center;}
#aboutBtn{
  opacity: 1;
  z-index: 5; padding: 3rem 1.5rem;
  height: fit-content;
  min-width: 3rem; max-width: 25rem;
  display: flex; justify-content: flex-start; align-items: flex-end;
  text-align: left; cursor: pointer; position: fixed; top: calc(var(--vh)*100 - 8rem); left: 0; 
  font: 400 2rem/1 auto; color: var(--p-color);
  transition: all 1s cubic-bezier(0.23, 1, 0.320, 1) 0.5s;
}
#aboutBtn.toggle{
  top: 0;
  transition: all 0.7s cubic-bezier(0.23, 1, 0.320, 1) 0.6s;
  font-size: 4rem;
  width: fit-content!important;
}
#aboutBtn-close, #aboutBtn-seeimage{
  z-index: 5;
  z-index: 5; padding: 3rem 1.5rem;
  height: fit-content; text-align: right;
  display: flex; justify-content: flex-start; align-items: flex-end;
  cursor: pointer; position: fixed; 
  font: 400 2rem/1 auto; color: var(--p-color);
  transition: all 1.3s cubic-bezier(0.23, 1, 0.320, 1) 0s;
}
#aboutBtn-close{
  transition: all 1.3s cubic-bezier(0.23, 1, 0.320, 1) 0.2s;
  top: calc(var(--vh)*100); left: 0;}
#aboutBtn-seeimage{top: calc(var(--vh)*100); right: 0;}
#aboutBtn-close.toggle{
  top: calc(var(--vh)*100 - 8rem);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.320, 1) 950ms;
}
#aboutBtn-seeimage.toggle{
  top: calc(var(--vh)*100 - 8rem);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.320, 1) 1.1s;
}

#tabcontentNumber{
  position: fixed;
  height: 8rem; display: flex; justify-content: center; align-items: center;
  left: 50%; bottom: 0; transform: translateX(-50%);
  font: 400 2rem/1 auto; color: var(--p-color);
}
#tabcontentTitle{
  position: fixed;
  font: 400 2rem/1 auto; color: var(--p-color);
}

#settings{
  position: fixed; z-index: 4;
  right: 0; top: calc(var(--vh) * 100)!important;
  font: 400 2.3rem/1 auto; color: var(--p-color);
  height: fit-content;
  overflow: hidden;
  transition: 0.4s cubic-bezier(0.23, 1, 0.320, 1) 0.3s;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transform: translateY(-8rem); display: flex; flex-direction: column;
}
@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ #settings{padding-bottom: 1.8rem;}
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ #settings{padding-bottom: 1.2rem;}
}
#settings.rise{
  z-index: 5!important;
  transition: 0.4s cubic-bezier(0.23, 1, 0.320, 1) 0s;
  background-color: var(--settings-bg);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  transform: translateY(-100%);
}
#settings-title{
  position: fixed; right: 0; padding: 3rem 1.5rem 3rem 1.5rem;
  cursor: pointer; height: fit-content;
  font-size: 2rem; 
  color: var(--p-color);
  text-align: right;
  min-width: 3rem;
  display: flex; justify-content: flex-end; align-items: flex-end; max-width: 25rem;
  transform: translateY(0);   
  transition: all 0.7s cubic-bezier(0.23, 1, 0.320, 1) 0s;
}
#settings-title.rise{transform: translateY(-6rem); transition: 0.7s cubic-bezier(0.23, 1, 0.320, 1) 0s;}
#settings-subtitle{
  transform: translateY(8rem);
  font: 400 3rem/1 auto; color: var(--p-color);
  position: relative; z-index: 4;
  display: flex; justify-content: flex-end; align-items: center;
  height: 2rem; width: calc(100% - 3rem); padding: 0 1.5rem;
}
#settings-subtitle.rise{transform: translateY(0)!important;}
#settings-sub{
  height: fit-content;
  transform: scale(0.8);
  transition: 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
  visibility: hidden;  
  opacity: 0;
  filter: blur(var(--text-blur));
  -webkit-filter: blur(var(--text-blur));
  display: flex; flex-direction: column;
}
#settings-sub.rise{
  transform: scale(1)!important;
  transition: 0.7s cubic-bezier(0.215, 0.610, 0.355, 1);
  visibility: visible!important;
  opacity: 1!important;
  filter: blur(0)!important;
}


#slider{
  align-self: flex-end; margin-right: 1.5rem;
  height: 4.5rem; transform: translateY(0.2rem);
  justify-content: flex-end; align-items: center; display: flex;
}
input{
  -webkit-appearance: none;  
  appearance: none;
  width: calc(calc(var(--vw) * 30) - 1rem); 
  height: 0.8rem; 
  background-color: var(--p-color);
  outline: none; 
  transition: .2s; 
  border-radius: 0!important;
}
input::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  width: 3rem; 
  height: 3rem; transform: translateY(-1.1rem);
  background-color: var(--p-color);
  cursor: pointer;
  box-shadow: none!important;
}
#greyscale, .lightmode, .or, .darkmode{min-height: 4.5rem; height: fit-content; display: flex; align-items: center; width: fit-content;}
.theme-switch-indicator {display: flex; width: calc(100% - 3rem); justify-content: space-between; margin: 0 1.5rem; min-height: 4.5rem; height:fit-content;}
.theme-switch-indicator p {align-self: center; display: inline!important;}
.theme-switch input {cursor: pointer; margin: 1.2rem 0 0 1.5rem; align-self: flex-start!important; background-color: var(--p-color)!important; width: 3rem!important; height: 3rem!important;}

#greyscale{margin: 0 1.5rem; color: var(--p-color); width: calc(100% - 3rem);
  display: flex; justify-content: space-between; align-items: center; word-break: break-all;}
.lightmode{display: inline; color: var(--light-indicator-color); margin-right: 0.5rem;}
.darkmode{display: inline; color: var(--dark-indicator-color);}

#greyscale p{display: inline}

@media (min-width: 0) and (max-width: 800px) {
  #settings{width: calc(var(--vw) * 100);}
}
@media (min-width: 800px) {
  #settings{border-radius: 0.3rem 0 0 0;}
  .slider{width: calc(50%); justify-self: flex-end;}
  input{position: relative; width: calc(70% + 1.5rem)!important;}
}



.tabcontent {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.7);
  
  opacity: 0;
  visibility: hidden;
  transition: all 1s cubic-bezier(0.565, 0.545, 0.000, 0.975);

  height: calc(var(--vh) * 100); width: calc(var(--vw) * 100);

  -webkit-filter: blur(100px) saturate(150%);
  filter: blur(100px) saturate(150%);
  font: 400 2rem/1 auto; color: white;
  background-color: transparent;

  display: flex; justify-content: center; align-items: center;
  z-index:1;
}
.tabcontent.show{
  opacity: 1;
  visibility: visible;
  
  transition: filter 0.5s ease-in-out,
              visibility 0s ease-in-out 0.3s,
              opacity 0.3s ease-in-out,
              transform 0.7s cubic-bezier(0.565, 0.545, 0.000, 0.975);

  transform: translate(-50%,-50%) scale(1);

  -webkit-filter: blur(0) saturate(100%);
  filter: blur(0) saturate(100%);
}


.tabcontent.aboutFilter{
  z-index: 3!important; 
  transform: translate(-50%,-50%) scale(1);
}



#tabcontent-image{
  opacity: 1;
  transition: transform 800ms cubic-bezier(0.565, 0.545, 0.000, 0.975) 0.3s,
              opacity 700ms cubic-bezier(0.565, 0.545, 0.000, 0.975) 0.3s,
              filter 700ms cubic-bezier(0.565, 0.545, 0.000, 0.975) 0.3s;  

  visibility: visible; filter: blur(0) saturate(100%) grayscale(var(--image-greyscale)); -webkit-filter: blur(0) saturate(100%) grayscale(var(--image-greyscale));
  width: auto;    
  height: auto;
  max-height: calc(calc(var(--vh) * 90) - 10rem); max-width: calc(calc(var(--vw) * 90) - 2rem);
  border-radius: 0.3rem;
  box-shadow: 0 0 5rem rgba(0, 0, 0, 0.123);
  position: absolute; 
  left: 50%!important; right: 50%!important; transform: translate(-50%) scale(1);
}
#tabcontent-image.aboutFilter{
  opacity: 0;
  visibility: hidden; 
  filter: blur(100px) saturate(150%) grayscale(var(--image-greyscale)); -webkit-filter: blur(100px) saturate(150%) grayscale(var(--image-greyscale));
  transition: transform 800ms cubic-bezier(1.000, 0.150, 0.000, 0.925) 0.3s,
              visibility 0s cubic-bezier(1.000, 0.150, 0.000, 0.925) 5s,
              opacity 700ms cubic-bezier(1.000, 0.150, 0.000, 0.925) 0.3s,
              filter 700ms cubic-bezier(1.000, 0.150, 0.000, 0.925) 0.3s;  
  transform: translate(-50%) scale(0.3)!important;
}

#tabcontent-description{
  height: calc(var(--vh)*100 - 16rem); overflow-y: scroll;
  display: inline;
  width: calc(calc(var(--vw) * 100) - 3rem); max-width: calc(850px - 3rem);
  padding: 8rem 1.5rem 8rem 1.5rem;
  color: var(--p-color);
  font-size: 3rem;  
  position: fixed; top: calc(var(--vh) * 150);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1) 0.35s;
  z-index: 5;
}
#tabcontent-description.aboutFilter{
  opacity: 1; top: 0!important;
  transition: all 0.7s cubic-bezier(0.23, 1, 0.320, 1) 0.7s;
}

@media (min-width: 0) and (max-width: 800px) {
  #settings{width: calc(var(--vw) * 100);}
  #tabcontent-description{left: 0;}
}
@media (min-width: 800px) {
  #settings{border-radius: 0.3rem 0 0 0;}
  .slider{width: calc(50%); justify-self: flex-end;}
  input{position: relative; width: calc(70% + 1.5rem)!important;}
  #tabcontent-description{left: var(--about-width);}
}


.obstacle{
  transition: color 0.5s ease-in-out 1.4s,
              filter 0.5s ease-in-out 1.4s,
              opacity 0.5s ease-in-out 1.4s;
  z-index: 4;
}
.obstaclehide{
  transition: 0.5s ease-in-out 0s!important;
  opacity: 0!important;
  visibility: hidden!important;
  filter: blur(10px);
  -webkit-filter: blur(10px);
}