body {
    background-image: url("https://files.catbox.moe/i766be.jpg");
    background-size: 20%;
    background-attachment: fixed;
}
@font-face {
    font-family: "rosalicious";
    src: url("https://file.garden/Z7mBIMQW3hJOeelT/rosalicious.ttf");
}

::-webkit-scrollbar{
      width: 12px;
      border-radius: 5px;
      background-color: rgb(255, 222, 222);
    }
::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(
      rgb(255, 164, 179),
      rgb(246, 218, 200),
      rgb(116, 71, 54)
    );
    }
a{
    color: rgb(93, 59, 48);
}
a:hover{
    text-shadow: 3px 3px 10px rgb(58, 33, 33);
}
a:visited{
    color: rgb(93, 59, 48);
}

.float-header {
font-size:2em;
color: #ffecd7;
text-shadow: 4px 4px 6px rgb(0, 0, 0);
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
    font-family: "rosalicious";
    position: relative;    
    width: auto;
    margin: auto;
    display: flex;
    justify-content: center;
}
.lacescr {
border-width:8px;
border-style:solid;
border-image: url("https://file.garden/Z7mBIMQW3hJOeelT/borderpink.gif") 6 fill round;
width: auto;
height:auto;
overflow-y:auto;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}


.image1{
    position: relative;
    margin-left: auto;
    margin-right: auto;
                    /*(c) baeyhkun*/
border-width: 10px; 
border-style: solid;
width: 180px;
border-image: url("https://file.garden/Z7mBIMQW3hJOeelT/brownborder.gif") 7 fill round;         
    
}

.container {
  display: grid;
  grid-template-areas:
    "icon header header keychain"
 	  "menu content calendar keychain"
    "menu marquee marquee keychain"
    "footer footer footer keychain";
  grid-template-columns:230px 600px 230px 100px;
  gap: 5px;
  padding: 10px;
  padding-top: 30px;
  padding-left: 50px;
}
.container div {
  padding: 10px;
}
.container div.icon {
    grid-area: icon;
    margin-top: 30px;
}
.container div.header {
margin-top: 15px;
  grid-area: header;
  font-size: 120%;
  text-align: center;
  background-image: url("https://i.pinimg.com/1200x/21/cc/2b/21cc2b7dc2495cc1920cce5e12e68e18.jpg");
  background-size:cover;
  text-shadow: 4px 4px 6px rgb(0, 0, 0);

}
.container div.menu {
  grid-area: menu;
  font-family: "rosalicious";
  color: rgb(150, 85, 114);
  font-size: 110%;
}
.container div.marquee {
    grid-area: marquee;
    margin-top: 10px;
}
.container div.content {
  grid-area: content;
  font-family: "rosalicious";
  color: rgb(95, 54, 54);
  font-size: 120%;
  padding: 20px;
  border:3px solid rgb(250, 211, 218);
  margin-top: 15px;
background:rgb(250, 211, 218);
border-radius:10px;
box-shadow: 0px 0px 10px rgb(250, 211, 218), 0px 0px 10px rgb(250, 211, 218), 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 14px pink;

}
.container div.calendar {
    grid-area: calendar;
}
.container div.footer {
  grid-area: footer;
  text-align: center;  
  font-family: "rosalicious";
  color: rgb(196, 133, 133);
  border-width: 9px; 
border-style: solid;
border-image: url("https://file.garden/Z7mBIMQW3hJOeelT/brownborder.gif") 7 fill round;         
    
}
@-webkit-keyframes swinging{
        0%{-webkit-transform: rotate(10deg);}
        50%{-webkit-transform: rotate(-5deg)}
        100%{-webkit-transform: rotate(10deg);}
}
@keyframes swinging{
        0%{transform: rotate(10deg);}
        50%{transform: rotate(-5deg)}
        100%{transform: rotate(10deg);}
}
.swingimage{
        -webkit-transform-origin: 50% 0;
        transform-origin: 40% 0;
        -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
        animation: swinging 3.5s ease-in-out forwards infinite;
}
.container div.keychain {
    grid-area: keychain;
    margin-left: -60px;
}