/* 
   #FCEFD8 banana
   
   #6c3130 brown
   
   #DEE384 light green
   
   #B1C045 darker lighter green
   
   #77B8C0 light blue
   
   */
  
  @font-face {
src: url(https://file.garden/aihUHH1TzFsNlpsR/fonts/SakeMoru-Regular.ttf);
font-family: SakeMoru;
}
@font-face {
src: url(https://file.garden/aihUHH1TzFsNlpsR/fonts/PsycheLover-Regular.otf);
font-family: psyche;
}

@font-face {
font-family: universe;
src: url(https://file.garden/aihUHH1TzFsNlpsR/fonts/Boecklinsuniverse-x3jKm.ttf);
 
}

@font-face {
font-family: Jolly;
src: url(https://file.garden/aihUHH1TzFsNlpsR/fonts/Jolly.ttf);
 
}

body {
    font-family: universe, Arial, sans-serif;
}

html {
    cursor: url('https://cdn.cursors-4u.net/previews/sexy-pink-heart-25412ebd-32.webp') 32 32, auto !important;
    
    
  
   header span {
font-family: psyche;
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size:2em;
  color:white;
  font-weight: bold;
  background: linear-gradient(to top, pink 2%, brown 90%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: ;
     
     
}
  
}

.shadow-pop-tr {
	animation: shadow-pop-tr 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

   header {
     background-image:url('https://www.interiordecorating.com/images/products/96-TOT46453B_z.jpg?utm_source=Pinterest&utm_medium=organic');
     position: relative;
  top: 0px;  
   }
   
   header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 120px; /* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
}
a{
    text-decoration: none;
      font-weight: bold;
}
nav a:link {
  color: paleturquoise;
  background-image: radial-gradient(#B1C045 30%, transparent 70%);
 font-family: Jolly;
}

/* hover */
nav a:hover {
  color: pink;
  font-style: italic;
}

/*selected */
nav a:active {
  color: lightseagreen;
} 
nav a:visited{
color:paleturquoise;
}

a:link {
  color:seagreen;
 
}

/* hover */
 a:hover {
  color: pink;
  font-style: italic;
  cursor: url('https://cdn.cursors-4u.net/previews/transparent-sexy-pink-heart-99f7f91c-32.webp') 32 32, auto !important;
}

/*selected */
 a:active {
  color: lightseagreen;
} 
 a:visited{
color:olive;
}
    body {
  background-color: #FCEFD8;
  background-image: linear-gradient(to bottom,  #FCEFD8, #DEE384, #FCEFD8);
  font-size:20px;
  color:deeppink;
  
}

h1, h2, h3, h4, h5, p, .margin, table {
  margin: 40px;
}
h1, h2, h3, h4, h5 {
    font-family: SakeMoru;
}

 h1{
     color:#6c3130;
      text-shadow: 0px 0px 5px deeppink;
     
 }

 h2{
     color:#FCEFD8;
      text-shadow: 0px 0px 5px palevioletred;
     
 }
 
  h3{
     color:#6c3130;
      text-shadow: 0px 0px 5px palevioletred;
     
 }
 
  h4{
    color:#FCEFD8;
      text-shadow: 0px 0px 5px palevioletred;
     
 }
  
 
 nav{
      text-shadow: 1px 0px 3px lightblue;
      position: sticky;
  top: 0;
  overflow: hidden;
  color:lightblue;
  background-image: linear-gradient( #DEE384,  #B1C045, rgba(255,0,0,0));
  
  padding: 14px;
 }
 
 /* Navbar links */
nav a {
  float: left;
  display: block;
  
  text-align: center;
  padding: 14px;
  text-decoration: none;
  
}

nav details summary{
text-shadow: 0px 0px 5px deeppink;
font-size:1em;
}

table {
   background-image: linear-gradient( lightblue, rgba(255,0,0,0)); 
   
}
 .footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height:3.4em;
   background-color: /maroon;
   text-shadow: 0px 0px 3px white;
   color: #6c3130 ;
   text-align: center;
   font-size:1em;
   background-image: linear-gradient( rgba(255,0,0,0), #DEE384,  #B1C045);
   background-size: 300px 100%; 
   

   
 }
    div.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  border: 0px solid #73AD21;
  user-select: none;
  pointer-events: none; 
}

  div.template {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 200px;
  border: 3px solid #73AD21;
  user-select: none;
  pointer-events: none; 
}
div.upper {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%px;
  height: 200px;
  border: 0px solid #73AD21;
  user-select: none;
  pointer-events: none; 
}


    div.grad {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #73AD21;
  user-select: none;
  pointer-events: none; 
    }
    #tilt {
        z-index:-5;
  text-align: center;
  animation: tilt 1s infinite alternate;
}


@keyframes tilt {
  from { transform: rotate(5deg); }
  to { transform: rotate(-5deg); }
}

.left-box {
  float: left;
  width: 200px; /* Highly recommended when using floats */
  margin-right: 15px; /* Adds space between the div and wrapping text */
}
.right-box {
  float: right;
  width: 200px; /* Highly recommended when using floats */
  margin-right: 15px; /* Adds space between the div and wrapping text */
}

table thead{
         background-image: linear-gradient( pink,rgba(255,0,0,0));
         font-weight:bold;
         color:brown;
          text-shadow: 0px 0px 3px white;
   }
   
  
}


    
    	
	  #hoohoo {
	    border: 1px solid black;
	    background-image: linear-gradient( #DEE384,  #B1C045, rgba(255,0,0,0));
	    white-space: nowrap;
	    overflow-x: auto;
	    padding: .5em;
	    box-sizing: border-box;
	    height: 15em;
	    overflow-y: hidden;
	  }

	  .lala {
	      background-image: linear-gradient( pink, rgba(255,0,0,0));
	    width: 18em;
	    overflow-y:scroll;
	    overflow-x:hidden;
	    border: 1px solid black;
	    white-space: normal;
	    display: inline-block;
	    height: 100%;
	    padding: .3em;
	    vertical-align: middle;
	  }

.text {
      animation: jerky 0.5s infinite;
    }

    @keyframes jerky {
      0% {
        transform: rotate(2deg);
      }

      50% {
        transform: rotate(2deg);
      }

      51% {
        transform: rotate(-2deg);
      }

      100% {
        transform: rotate(-2deg);
      }
    }


  
  }