* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

@font-face {
src: url(https://decomail.space/Theonory.ttf);
font-family: "Theonory";
}

@font-face {
src: url(https://decomail.space/Ascella.otf);
font-family: "Ascella";
}

body {
	background: linear-gradient(-45deg, #C1D490, #B8D5D9, #9FC0EB, #F2B8DB);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
margin: auto;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* main wrapper */
.wrapper {
  width: 700px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2; 
}

/* top + bottom boxes */
.box {
  background: #F5E0E7;
  border: 3px solid #E1A3BA;
  padding: 10px;
}

/* top box layout */
.top-box {
  display: flex;
  width: 500px;
  margin-bottom: -10px;
}

.top-box .section {
  flex: 1;
  background: #C5CB81;
  padding: 10px;
  border: 2px solid #97A23C;
}

/* bottom box layout */
.bottom-box {
  display: flex;
  gap: 10px;
  width: 600px;
  position: relative;
  left: 90px;
  z-index: 3;
}

.bottom-box .left,
.bottom-box .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* inner flexboxes */
.inner {
  background: #C5CB81;
  padding: 10px;
  border: 2px solid #97A23C;
  font-family: "Outfit", sans-serif;
  margin-top: 10px;
  text-align: justify;
  color: #788E75;  
}

.inner i {
font-family: "Ascella";
font-size: 22px; 
font-weight: bold;
}

.title {
font-family: "Theonory";
font-size: 4em;
color: #97A23C;
position: absolute;
  z-index: 3;
  left: 50%;
  top: -56px;
  transform: translateX(-60%);
font-weight: bold;
   text-shadow:
    -1px -1px 0 #E1A3BA,
     0   -1px 0 #E1A3BA,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.textbox {
font-family: "Outfit", sans-serif;
font-size: 20px;
width: 300px;
margin-left: 150px;
text-align: justify;
color: #788E75;  
}

.textbox i {
font-family: "Ascella";
font-size: 22px; 
font-weight: bold;
}

.textbox mark {
border: 2px solid #97A23C;
background-color: #F5E0E7;
color: #E1A3BA;
border-radius: 4px;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
text-decoration: underline;
}

.label {
  position: relative;
  margin-bottom: -150px;
  margin-left: 0px;
  bottom: 85px;
  z-index: 4;
  left: 100px;
  align-items: baseline;
  gap: 0px;
  margin-top: -10px;
}

.byf {
font-family: "Theonory";
font-size: 3em;
color: #97A23C;
font-weight: bold;
position: relative;
top: 70px;
     text-shadow:
    -1px -1px 0 #E1A3BA,
     0   -1px 0 #E1A3BA,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.yf {
color: #E1A3BA;
font-family: "Ascella";
font-size: 30px; 
font-weight: bold;
position: relative;
top: 70px;
z-index: 5;
margin-left: -40px;
   text-shadow:
    -1px -1px 0 #97A23C,
     0   -1px 0 #97A23C,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.dni {
color: #E1A3BA;
font-family: "Ascella";
font-size: 30px; 
font-weight: bold;
z-index: 5;
margin-left: 250px;
position: relative;
left: 45px;
bottom: 2px;
   text-shadow:
    -1px -1px 0 #97A23C,
     0   -1px 0 #97A23C,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.dn {
font-family: "Theonory";
font-size: 3em;
color: #97A23C;
z-index: 2;
font-weight: bold;
position: relative;
bottom: 2px;
     text-shadow:
    -1px -1px 0 #E1A3BA,
     0   -1px 0 #E1A3BA,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  position: relative;
  left: 410px;
  bottom: 25px;
}

.buttons button {
background: #F5E0E7;
padding: 10px;
border: 2px solid #97A23C;
font-family: "Ascella";
font-size: 22px; 
font-weight: bold;
color: #E1A3BA;
margin-top: 5px;
cursor: pointer;
text-decoration: underline;
transition: .5s;
}

button:hover {
background-color: #C5CB81;
color: #F5E0E7;
border: 2px solid #E1A3BA;
}

.popup {
  position: absolute;
  z-index: 4;
  top: 200px;
  left: 200px;
  width: 380px;
  background: #F5E0E7;
  color: #788E75;  
  border: 2px solid #E1A3BA;
  display: none;
  cursor: move;
  font-family: "Outfit", sans-serif;
font-size: 18px;
  padding: 10px;
}

.header {
  font-weight: bold;
  cursor: move;
  display: flex;
  justify-content: space-between;
  background: #C5CB81;
  padding: 10px;
  border: 2px solid #97A23C;
  color: #788E75;  
}


@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 10px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}   

.charm {
position: absolute; width: 170px; 
z-index: 4; 
top: 100px; 
left: 22px; 
-webkit-filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white);
filter: drop-shadow(1px 1px 0 white) 
drop-shadow(-1px -1px 0 white);
animation: heart 1.5s ease infinite;
}

@keyframes heart{
0%, 12%, 25%, 50% {
transform: rotate(0deg);
}
 
55% {
transform: rotate(-2.5deg);
}
 
65% {
transform: rotate(3.5deg);
}
 
75% {
transform: rotate(-7deg);
}
 
95%, 100& {
transform: rotate(0deg);
}}