/* * {

  border: 1px red solid;
} */

a {

background-color: #929292;
color: white;
text-decoration: none;
padding: 2px;
}

a:hover{

  color: rgb(0, 0, 0);
  text-decoration: none;
}
a::after{

color: white;
  background-color: #f85454;
  text-decoration: none;
}

.mainNav{
  display: flex;
justify-content: space-between;
  width: 100vw;
  height: 7vh;
  background-color: white;
  border-bottom: black solid 1px;
  z-index: 99999999999;
  overflow: visible; 
  position: relative;

}



.centerrow{
  display: flex;
  align-items: center;
  justify-content: center;
width: 50vw;
  padding: 15px 0px 15px 0px;


text-align: center;

}

.centerrow p{
 

/* background-color: rgba(204, 204, 204, 0.682); */
font-size: 1.7rem;

padding-bottom: 2px;
font-weight: 700;
color: rgb(255, 0, 0);
 

}
.leftrow{
  display: flex;
  align-items: center;
  justify-content: center;
width: 7vw;



border-right: black solid 0.1px;
}


.rightrow{
  display: flex;
  align-items: center;
  justify-content: center;
width: 30vw;
  padding: 17px;
  border-left: black solid 0.1px;
}



body {
  margin: 0;
  overflow: auto;
   /* font-family: "Oranienbaum", serif; */
  font-family: 'EB Garamond', serif;
  /* font-family: "Space Grotesk", sans-serif; */
  width: 100vw;
  background-color: #ffffff2b;
  overflow-y: hidden;
  overflow-x: hidden;

}
 
canvas {

  display: block;

}

#ui-container {
  display: flex;
align-items: flex-start;
position: absolute;



color: rgb(0, 0, 0);




  z-index: 111;

}





/* Ensure the index items (p elements) are visible */
.dataContain {
  gap: 10px;

  display: block; /* Ensure it's visible */


  width: 13vw;
height: 96vh;
z-index: 2;
  /* border-radius: 10; */
  align-items: flex-end;
  justify-content: flex-end;

margin-top: 7%;
}



#three-container {
width: 70vw;
height: 93vh;
  position: absolute;
  overflow: hidden;
  /* outline: #000000 solid 1px; */


left: 2%;

  box-sizing: border-box; 
}





.instruction {

margin-top: 20px;
width: 35vw;
justify-content: center;
margin-right: 2vw;
  color: black;
  margin-bottom: 40%;


}


.rightcontainer {


  display: flex;


  align-items: center;
float: right;
flex-direction: column;
height: 100vh;



}

.cube-container {

  /* margin-top: 20vh; */
  width: var(--cube-size, 500px);
/* 기본 크기 */
height: var(--cube-size, 300px);
position: relative;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
/* 기본값로 정지 */
transition: transform 0.3s ease-out;
/* 부드러운 회전 */

/* color: white; */
color: black;
display: flex;
z-index: 100000;
}

.face {

position: absolute;
width: var(--cube-size, 500px);
height: var(--cube-size, 100vh);
background-color: rgba(255, 255, 255, 0.937);
/* background-color: #d3d2d2de; */
border: 0.1px solid rgb(0, 0, 0);

flex-direction: column;

  display: flex;
  align-items: center;
  justify-content: center;



}
.facetitle {
  line-height: 32px;
  width: 90%;
  padding: 20px;
  margin-bottom: 0.7rem;
  font-size: 1.5rem;


}

.facetext {
  padding: 25px;

}
.facetext p{

 line-height: 30px;

}




.front {

transform: rotateY(0deg) translateZ(calc(var(--cube-size, 500px) / 2));
}

.back {

transform: rotateY(180deg) translateZ(calc(var(--cube-size, 500px) / 2));
}

.left {
 
transform: rotateY(-90deg) translateZ(calc(var(--cube-size, 500px) / 2));
}

.right {

transform: rotateY(90deg) translateZ(calc(var(--cube-size, 500px) / 2));
}




.arrowcon{
width: 40vw;
  display: flex;
  justify-content: space-around;
}
.leftar p{

width: 100px;
height: 50px;

}


h1,
h2,
h3,
h4 {
padding: 0;
margin: 0;
font-size: 1.3em;
}

p {
padding: 0;
margin: 0;
font-size: 18px;
}






button {
  background-color: #e1e1e08e;
border: black solid 0.2px;
cursor: pointer;
width: 40px;
height: 40px;
position: relative;
transition: transform 1s, filter 0.3s;
cursor: pointer;
padding: 5px;
transition: background-color 0.3s;

display: flex;
align-items: center; /* Centers items vertically */
justify-content: center;
padding: 5px 10px; /* Adjust padding */
}

.rotate-btn {

border: none;
cursor: pointer;

font-size: 16px;

}

.buttonContainer {


  display: flex;
  gap: 10px;
  bottom: 10px;
  right: 33%;
  align-items: flex-end;
  position: absolute; 
  z-index: 10000000;
}


button:hover  {
background-color: #767171;
filter: brightness(1.3);
}


button:hover  {
  opacity: 1;
  visibility: visible;
 
}


button:active {

  background-color: #fe0505 !important;
}
button:focus {

  background-color: #f54e4e !important;
}

button:hover .textbox {
background-color: #767171;
filter: brightness(1.3);
}


button:hover .textbox {
  opacity: 1;
  visibility: visible;
 
}


button:active .textbox {

  background-color: #f85454 !important;
}
button:focus .textbox {

  background-color: #993030 !important;
}


.textbox {
  position: absolute;
  bottom: 100%; /* Show above the button */
left: 50%;
  transform: translateX(-50%);
  background-color: #6c6c688e;
  color: rgb(0, 0, 0);
  padding: 5px 4px;
  font-size: 12px;
  margin-bottom: 2px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s;
}

.goBackcontainer {

  position: absolute;
  right: 43%;
  bottom: 13%;
}





/* 3D nav */

#ui-container ul {
  list-style: none;
  padding: 0;
  transform: skewY(-15deg);
  
  
}




#ui-container a {
  border: black 1px solid;
  display: block;
  --color: rgb(255, 255, 255);
  background-color: var(--color);
  color: rgb(0, 0, 0);
  text-decoration: none;
  position: relative;
  left: 0;
  transition: left 300ms, background-color 300ms;
  font-weight: 700;
  padding: 12px;
height: 100%;   /* Fills the li */
  display: flex; 
  align-items: center;
  justify-content: center;
}



#ui-container a::before,
#ui-container a::after {
  border: black 1px solid;
  content: "";
  background-color: color-mix(in srgb, var(--color), rgb(255, 255, 255) 20%);
  position: absolute;
}



/* left */
#ui-container a::before {
  border: black 1px solid;
  width: 700px;
  /* --color: rgb(153, 128, 128); */
  height: 100%;
  left: -702px;
  bottom: 350px;
  transform: skewY(45deg);
}
/* top */
#ui-container a::after {
  border: black 1px solid;
  transform: skewX(45deg);
    /* --color: rgba(255, 255, 255, 0.913); */
  height: 100px;
  width: 100%;
  left: -52px;
  top: -102px;
  
}

#ui-container a:is(:focus, :hover) {
  border: black 1px solid;
  left: 25px;
  --color: rgb(255, 255, 255);
  outline: none;
  color: rgb(255, 0, 0);

}

#ui-container a.selected {
  border: 1px solid black;
  left: 25px;
  background-color: rgba(255, 255, 255);
  outline: none;
  color: rgb(255, 0, 0);
}
#ui-container li {
  display: flex;
  width: 120px;
  height: 70px;
  align-items: center;
  justify-items: center;
  font-family: "Old Standard TT", serif;
  font-weight: 700;
  font-style: italic;
  
}
.face.front {
  transform-origin: center center;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



body.is-fullscreen #ui-container li {
  height: 65px;
  width: 200px;
}



@media (max-width: 768px) {

  .mainNav {
    flex-direction: row;
    height: 2vh;
    
  }



.leftrow,.rightrow{

width: 10%;

}
  .centerrow
{
    width: 100%;
    border: none;
    padding: 10px 0;
  }

  .centerrow p {
    font-size: 0.8rem;
  }

  .rightrow {
    flex-direction: column;
    padding: 10px;
  }

  .dataContain {

    height: auto;
    margin-top: 1%;
    left: 0;
    position: absolute;
    font-size: 11px;
  }

  #three-container {
    width: 90vw;
    height: 60vh;

    position: absolute;
    left: 10vw;


  }

 


  p{

    font-size: 10px;
    line-height: 16px;
  }

  h1,
  h2,
  h3{

    font-size: 0.9rem;
  }


  #ui-container {


    flex-direction: column;
    align-items: center;
   top: 12%;
position: absolute;
    left: 0;

  
  }



  .buttonContainer {
    bottom: 42%;
    right: 27%;
    gap: 5px;
    width: 10px;
    height: 1px;

  }

  .buttonContainer img{

    width: 15px;
    height: 15px;

  }
  button {
    background-color: #e1e1e08e;
  border: black solid 0.2px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 1s, filter 0.3s;
  cursor: pointer;
  padding: 5px;
  transition: background-color 0.3s;
  
  display: flex;
  align-items: center; /* Centers items vertically */
  justify-content: center;
  padding: 5px 10px; /* Adjust padding */

  }


  .rightcontainer {


    display: flex;


  
  height: 38vh;
width: 100vw;
  
bottom: 0;
position: absolute;
  
  }




.cube-container {

  /* margin-top: 20vh; */
  width: var(--cube-size, 80vw);
/* 기본 크기 */
height: var(--cube-size, 100%);
position: relative;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
/* 기본값로 정지 */
transition: transform 0.3s ease-out;
/* 부드러운 회전 */

/* color: white; */
color: black;
display: flex;
z-index: 100000;

justify-content: center;
align-items: center;

}

.face {


width: var(--cube-size, 80vw);
height: var(--cube-size, 100%);
background-color: rgba(255, 255, 255, 0.937);
/* background-color: #d3d2d2de; */
border: 0.1px solid rgb(0, 0, 0);
flex-direction: column;

display: flex;
justify-content: center;
align-items: center;



}



.front {

  transform: rotateY(0deg) translateZ(calc(var(--cube-size, 80vw) / 2));
  }
  
  .back {
  
  transform: rotateY(180deg) translateZ(calc(var(--cube-size, 80vw) / 2));
  }
  
  .left {
   
  transform: rotateY(-90deg) translateZ(calc(var(--cube-size, 80vw) / 2));
  }
  
  .right {
  
  transform: rotateY(90deg) translateZ(calc(var(--cube-size, 80vw) / 2));
  }

  
.facetitle {
  line-height: 12px;
  width: 90%;
  padding: 20px;
  margin-bottom: 0.7rem;
  font-size: 1rem;


}

.facetext {
  padding: 15px;

}
.facetext p{

 line-height: 20px;

}





/* 3D nav */

#ui-container ul {
  list-style: none;
  padding: 0;
  transform: skewY(-15deg);
  
  
}




#ui-container a {


  border: black 1px solid;
  display: block;
  --color: rgb(255, 255, 255);
  background-color: var(--color);
  color: rgb(0, 0, 0);
  text-decoration: none;
  position: relative;
  left: 0;
  transition: left 300ms, background-color 300ms;
  font-weight: 700;
  padding: 1px;
height: 100%;   /* Fills the li */
  display: flex; 
  align-items: center;
  justify-content: center;



}







/* left */
#ui-container a::before {


  border: black 1px solid;
  width: 70px;
  /* --color: rgb(153, 128, 128); */
  height: 100%;
  left: -73px;
  bottom:  37px;
  transform: skewY(45deg);

}
/* top */
#ui-container a::after {
  border: black 1px solid;
  transform: skewX(45deg);
    /* --color: rgba(255, 255, 255, 0.913); */
  height: 100px;
  width: 100%;
  left: -51px;
  top: -102px;
  
}

#ui-container a:is(:focus, :hover) {
  border: black 1px solid;

  --color: rgb(255, 255, 255);
  outline: none;
  color: rgb(255, 0, 0);

}

#ui-container a.selected {
  border: 1px solid black;

  background-color: rgba(255, 255, 255);
  outline: none;
  color: rgb(255, 0, 0);
}

#ui-container li {

  display: flex;
  width: 55px;
  height: 30px;
  align-items: center;
  justify-items: center;
font-size: 0.5rem;
  font-weight: 700;
  font-style: italic;
  
}

.goBackcontainer {

  position: absolute;
  right: 13%;
  bottom: 50%;
}


.arrowcon{

  width: 100vw;
    display: flex;
    margin: 0;
    padding: 0;
    object-fit: contain;
    justify-content: space-around;
  }
}