html {
  background: linear-gradient(to bottom, #ffffff, #1f84ff);
  min-height: 100%
}

body {
 margin: 0;
 background: transparent;
}

@font-face {
 font-family: "RASCAL__";
 src: url("RASCAL__.TTF");
}

@font-face {
 font-family: "kurly kyoots";
 src: url("Kurly Kyoots.otf");
}

h1 {
 color: #1c070e; 
 font-family: "RASCAL__";
 font-size: 50px;
 border: 2px solid #003e8a;
 padding: 12px 20px;
 width: fit-content;
 box-shadow: 0 0 10px rgba(120, 200, 255, 0.8);
 background: #3b93ff;
 border-radius:  15px;
 text-align: center;
 margin: 40px auto;
}

.flower {
 position: relative;
 width: 400px;
 height: 400px;
 margin: auto;
}

.center {
 position: absolute;
 width: 150px;
 height: 150px;
 border-radius: 50%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); 
 object-fit: cover;
 border:solid 3px #ffffffcc;
}

.petal {
 position: absolute; 
 display: flex;
 flex-direction: column;
 align-items: center;
 text-decoration: none;
}
.label {
 margin-top: 6px;
 font-size: 8px;
 color:#ffffffcc;
 font-family: "Kurly Kyoots" !important;
 pointer-events: none;
}
.petal img {
 width: 120px;
 height: auto;
 transition: transform 0.15s steps(2), box-shadow 0.15s;
}

.p1 {top: 5px; left: 125px; }
.p2 {top: 115px; left: 300px; }
.p3 {top: 300px; left: 112px; }
.p4 {top: 140px; left: -45px; }

.p1 img {width: 145px; }
.p2 img {width: 150px; }
.p3 img {width: 140px; }
.p4 img {width: 115px; }

.petal:hover img {
 transform: scale(0.95) rotate(-3deg);
 filter: drop-shadow(0 0 12px rgba(255, 230, 150, 0.8))
 drop-shadow(0 0 14px rgba(255, 230, 250, 1.0));
}

.nota {
 position: fixed;
 bottom: 20px;
 right: 20px;
 width: 220px;
 height: 220px;
 background-image: url("nota.png");
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 padding: 30px 25px;
 box-sizing: border-box;
 font-family: "Kurly Kyoots" , cursive;
 filter: drop-shadow( 0 6px 10px rgba(255, 230, 150, 0.8));
}

.nota p {
 font-size: 10px;
 color: #151c26;
 line-height: 1.4;
 margin: 0;
 max-height: 100%;
 overflow: hidden;
 word-wrap: break-word;
 margin-top:30px;
}

.kiara {
 position: fixed;
 top: 90px;
 left: 55px;
 width: 120px;
 display: block;
 flex-direction: column;
 align-items:center;
}

.kiara img {
 width:160px;
 transition: left 0.15s steps(2), top 0.15s steps(2), rotate 0.15s, filter 0.15s;
 display: block;
 position:relative;
 left: 0;
}

.kiara:hover img { 
 left: 8px;
 filter: drop-shadow( 0 6px 10px rgba(255, 230, 150, 0.8));
 top:-3px;
 rotate: -3deg;
}