:root{
  --bg:rgba(60,45,40);
  --text:rgba(160,120,100);
  --card:white;
  --pad-big:30px;
  --pad-small:15px;
}

*{box-sizing:border-box}
body{
  margin:0;
  padding:var(--pad-small);
  font-family:arial black,serif;
  background:var(--bg);
  color:var(--text);
  text-align:center;
}
.container{max-width:800px;margin:auto}

.top-nav{
  display:flex;
  justify-content:center;
  gap:2px;
  margin-bottom:var(--pad-big);
  flex-wrap:fixed;
}
.top-nav a{
  padding:var(--pad-small);
  background:var(--card);
  color:var(--text);
  text-decoration:none;
}

.header{padding:var(--pad-small)}

.video-card{background:var(--card);padding:var(--pad-small);margin:var(--pad-small) auto}

.flip-card{
  width:100%;
  max-width:800px;
  height:400px;
  margin:var(--pad-small) auto;
  perspective:1000px;
  cursor:pointer;
}
.flip-card-inner{
  position:fixed;
  width:100%;
  height:100%;
  transition:transform 0.8s;
  transform-style:preserve-3d;
}
.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}

.flip-card-front,
.flip-card-back{
  position:fixed;
  inset:0;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--pad-small);
  text-align:center;
  background:var(--card);
  color:var(--text);
}


.flip-card-front{background:var(--text);color:var(--card)}
.flip-card-front h3{font-size:2.5em;margin:auto}

.flip-card-back{
  flex-direction:column;
  justify-content:center;
  align-items:center;    
  padding-top:25px;    
  transform:rotateY(180deg);
}
.flip-card-back h3{
  width:100%;
  text-align:center;
  margin:25px;
  font-size:2.1em;
}
.flip-card-back p{
  text-align:center;
  max-width:100%;
  margin:0;
  font-size: 1.5em;
}


.video-container{position:relative;width:100%;padding-bottom:50%;margin:var(--pad-small) 0}
.video-container iframe{position:absolute;inset:0;width:100%;height:100%;}