@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root{
  --grid-width: 40vh;
  --grid-height: 60vh;
  --cell-width: calc(var(--grid-width) * 0.2);
  --cell-height: calc(var(--grid-height) * 0.2);
  --grid-gap: 0.5vh;
  --body-font: "Lato", sans-serif;
  --body-font-size: clamp(12px, 2vw, 24px);
}

body {
  font-family: var(--body-font);
  font-weight: 300;
  font-size: var(--body-font-size)
}

a {
  font-weight: 500;
  color: var(--secondary-color);
  text-decoration: none;
}

h1{
  margin: 0.25em;
}

#wrapper{
  position: absolute;
  width:100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: offwhite;
  color: rgb(152, 44, 44);
  transition-duration: 1s;
  font-size: 2em;
}

#grid{
  background-color: rgb(150, 120, 65);
  padding: var(--grid-gap);
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(6,1fr);
  grid-template-rows: repeat(6,1fr);
 }

.cell{
  width: var(--cell-width);
  height: var(--cell-height);
  background-color: darkcyan;
}

img{
  width: var(--cell-width);
  height: var(--cell-height);
  object-fit: cover;
}

.center{
  opacity: 3;
  transition-duration: 5s;
}

/*
img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
*/


#feature { 
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 6;
  
  background-color: rgb(239, 232, 222);
  transition: transform 1.2s;
  transform-style: preserve-3d;
  perspective: 1000px; /* Remove this if you don't want the 3D effect*/ 
  }

#fade-in-image{
  position: absolute;
  z-index: 10;
  background-color: magenta;
}

.fade-start{
  opacity: 0;
}

.fade-in{
 opacity: 1;
 transition: opacity 0.7s;
}

.fade-complete{
  display: none;
}


/*
#feature img{
  width: calc(var(--cell-width) * 4 + (var(--grid-gap) * 3));
  height: calc(var(--cell-height) * 3 + (var(--grid-gap) * 2));
  height: 100%;
  object-fit:cover;
}
*/

#center-card-front, #center-card-back {
  position: absolute;
  width: calc(var(--cell-width) * 4 + (var(--grid-gap) * 3));
  height: calc(var(--cell-height) * 4 + (var(--grid-gap) * 3));  
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

#center-card-front img{
   width: calc(var(--cell-width) * 4 + (var(--grid-gap) * 3));
  /*height: calc(var(--cell-height) * 4 + (var(--grid-gap) * 3));*/
  height: 100%;
  object-fit: cover;
}

#center-card-back {
  width: calc((var(--cell-width) * 4 + (var(--grid-gap) * 3)) - 2em);
  height: calc((var(--cell-height) * 4 + (var(--grid-gap) * 3)) - 2em);  
  padding: 1em;
  font-family: "Caveat", cursive;
  color: rgb(102, 51,0);
  font-size: .5em;
  overflow: scroll;
  transform: rotateY(180deg);
}

.flipped{
  transform: rotateY(180deg);
}

#opening-text{
  font-size: 1.5em;
}

#language-options{
  font-family:sans-serif;
  color: white;
  background-color: rgb(150, 120, 65);
  padding: 0.25em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
  font-size: 0.75em;
}

#language-drawer{
  width: 95%;
  height: 3em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 10;
}

.language-button{
  font-family: "Caveat", cursive;
  color: rgb(102, 51,0);
  font-size: 1.5em;
  border: none;
  background-color: rgb(239, 232, 222);
}

#audio-drawer{
  width: 95%;
  height: 3em;
  margin-top: 1em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 10;
}

.audio-button{
  font-family: "Caveat", cursive;
  color: rgb(102, 51,0);
  font-size: 1.5em;
  border: none;
  background-color: rgb(239, 232, 222);
}

.active{
  background-color: rgb(102, 51,0);
  color: rgb(239, 232, 222);
}

#audio-player{
  width: 100%;
  display: none;
}
/*
#overlay{
  width: calc((var(--cell-width) * 6) + var(--grid-gap) * 7);
  height: calc((var(--cell-height) * 5) + var(--grid-gap) * 6);
  position: absolute;
  background-color: rgb(245, 234, 210);
  display: none;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  
}


#overlay-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#overlay-front, #overlay-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#overlay-front {
  background-color: #bbbbbb;
  color: black;
}

#overlay-back {
  color: rgb(120, 100, 65);
  font-family: "font-family: 'Caveat', cursive";
  font-size: clamp(8px, 6vw, 20px);
  width: 90%;
  height: 90%;
  padding: 5%;
  overflow: scroll;
  padding: 1vw;
  transform: rotateY(180deg);
  
}

.flipped{
  transform: rotateY(180deg);
  transition-duration: 3s;
}
*/