body {
     
  background-size: 100vw 110vh;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* About card */

.card {
  position: relative;
  width: var(--width-card);
  height: var(--height-card);
  transform-style: preserve-3d;
  transform: perspective(2500px);
  transition: 3s;
}

.card .front {
  position: relative;
  background-color: var(--color-card);
  border: var(--color-frame) var(--frame-width) solid;
  width: var(--width-card);
  height: var(--height-card);
  overflow: hidden;
  transform-origin: left;
  transition: 0.3s;
}

.card .inside {
  position: absolute;
  background-color: var(--color-card);
  border: var(--color-frame) var(--frame-width) solid;
  width: var(--width-card);
  height: var(--height-card);
  z-index: -1;
  left: 0;
  top: 0;
}

/* About checkbox */

input#open {
  display: none;
}

.open {
  position: absolute;
  width: var(--width-card);
  height: var(--height-card);
  left: 0;
  top: 0;
  background-color: transparent;
  z-index: 6;
  cursor: pointer;
}

#open:checked ~ .front {
  transform: rotateY(-180deg);
}

#open:checked ~ .front .content {
  display: none;
}
/*@import "/lib/css/color/palette/jul.css";*/
@import "./open-card-layout.css";
@import "./x-card.css";

body {
  --width-card: 300px;
  --height-card: 400px;
  --color-background: crimson;
  --color-frame: rgb(14, 107, 26);
  --color-card: rgb(255, 0, 0);
  --color-font: rgb(0, 0, 0);
  --frame-width: 10px;
}
body {
  background-color: var(--color-background);
  color: var(--color-font);
  height: 100vh;
}

h1 {
  padding: 0;
  margin: 0;
}

h2 {
  padding: 0;
  margin: 0;
}

.icon {
  padding: 0;
  margin: 0;
}