@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


 :root {
     --nijntje-rood: #ed7c7e;
     --nijntje-groen: #52b262;
     --black-clr: #000000;
     --white-clr: #fff;
     --page-clr: #e3e3e3;
 }

 .nijntjestyle {
     fill-opacity: 1;
     fill-rule: nonzero;
     stroke: none;
 }

 .nijntjerood {
     fill: var(--nijntje-rood);
 }

 .nijntjewit {
     fill: #ffffff;
 }

 .nijntjegrijs {
     fill: #1d1d1b;
 }

 .nijntjezwart {
     fill: var(--black-clr);
 }

 .nijntjegroen {
     fill: var(--nijntje-groen);
 }


 button {
     background-color: var(--nijntje-groen);
     margin-top: 0.5rem;
     padding: 1rem 1rem;
     border: 2px solid var(--black-clr);
     font-size: 1.2rem;
     border-radius: 100%;
     cursor: pointer;
     color: #fff;
     font-weight: 600;
     transition: 200ms ease-in-out bcakground-color,
         200ms ease-in-out color;
 }

 button:hover {
     background-color: var(--nijntje-groen);
     border: 1px solid #fff;
     color: var(--white-clr);
 }

 button:active {
     transform: scale(.9);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Nunito", sans-serif;
 }

 body {
     display: grid;
     place-items: center;
     min-height: 100vh;
     background-color: #e6cfd0;
 }

 .card-container {
     display: flex;
     align-items: center;
     perspective: 1500px;
     transform: translateX(-25%);
     transition: 800ms ease-in-out transform;
 }

 .card-container-open {
     transform: translateX(0);
 }

 .page {
     border: 1px solid var(--page-clr);
     width: 600px;
     height: 600px;
     position: absolute;
 }



 .page img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .left-page,
 .right-page {
     width: 600px;
     height: 600px;
     transform-style: preserve-3d;
 }

 .right-page {
     z-index: -3;
 }

 .page-1,
 .page-2 {
     background-color: #fff;
     transition: 1000ms ease-in-out transform;
     transform-origin: right;
     transform: rotateY(180deg);
 }

 .page-2 {
     background-color: var(--nijntje-groen);
     transform: rotateY(180deg) translateZ(1px);
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }

 .page-2 div {
     margin: 1.5rem 0;
 }

 .page-2 div p {
     margin-top: 0.5rem;
 }

 .card-container-open .page-1,
 .card-container-open .page-2 {
     transform: rotateY(0);
 }


 /* TYPOGRAPHY */
 .page-1,
 .page-3 {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }

 .page-1 h1 {

     position: absolute;
     top: 10px;
     transform: scaleX(-1);
     color: #5f5f5f
 }

 .page-1 h1 {
     left: 10px;
 }

 .page-3 h1 {
     color: var(--nijntje-rood);
     font-size: 4rem;
     margin-bottom: 0;
     margin-block-end: 0;
 }

 .page-3 .doopnamen {
     margin-top: -10px;
     font-size: 1.2rem;
 }

 .page-3 p {
     font-size: 1rem;
 }

 .page-3 .heading {
     margin-top: 3rem;
     margin-bottom: 0;
     color: var(--nijntje-rood);
     font-size: 1.2rem;
 }

 .page-1 {
     color: var(--black-clr);
     background-color: var(--white-clr);
     outline: 1px solid var(--white-clr);
 }

 .page-1 h2 {
     font-size: 65px;
     margin-top: 10px;
     transform: scaleX(-1);
 }

 .page-1 svg {
     transform: scaleX(-1);
 }

 .page-1 p {
     font-size: 1.5rem;
     font-weight: 600;
     transform: scaleX(-1);
 }

 .page-2 {
     color: var(--white-clr);
 }

 .page-3 {
     background-color: var(--white-clr);
     padding: 0 1rem;
     text-align: center;
     color: var(--page-clr);
     outline: 1px solid var(--page-clr);
 }

 .page-3 p {
     margin: .5rem 0;
     color: var(--black-clr);
     font-size: .9rem;
     font-weight: 500;
 }