<style type="text/css">
.body {
    margin: 0;
    padding: 64px;
    line-height: 24m;
    color: black;
    width: 2560px;
    height: 1600px;

  }
.layout {
  width: 100%;
  height: 768px;
background-image: url("backgrounds/tumblr_mex6qjrEDw1rbvno1.png");

  display: grid;
  grid:
    "header header header" auto
    "leftSide body rightSide" 1fr
    "footer footer footer" auto
    / auto 1fr auto;
  gap: 8px;
    
}

.header { grid-area: header; 
  height: auto;
  width: auto;
}

#float {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 font-style: italic;
 font-size:2em;
 font-weight:bold; 
 color: #fff;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}



.leftSide { grid-area: leftSide; 
width:auto;
  border:2px groove pink;
  margin-top:5px;
  margin-bottom:5px;
  height:auto;
  padding:10px;
  box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;  
  background: rgb(255,244,248);
  background: linear-gradient(180deg, rgba(255,244,248,1) 0%, rgba(255,214,229,1) 100%);

}
.body { grid-area: body;
  margin: 0;
    padding: 0;
    line-height: 24m;
    color: black;
    width: 2560px
    height: 1600px
    }

.rightSide { grid-area: rightSide; 
width:auto;
  border:2px groove pink;;
  margin-top:5px;
  margin-bottom:5px;
  height:auto;
  padding:10px;
  box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;  
  background: rgb(255,244,248);
  background: linear-gradient(180deg, rgba(255,244,248,1) 0%, rgba(255,214,229,1) 100%); 
    }

.footer { grid-area: footer; }
</style>