body {
    background-blend-mode: darken;
    background-image: url('https://pearlydewdrop.neocities.org/theocean.jpg');
    background-size: cover;
    cursor:url("shelly.png"), default;
    
}

h1 {
    position:absolute;
    left:200px;
    top:75px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    font-family: courier new;
    color: #082d5f;
    font-size: 24px;
}

h3 {
    position:relative;
    font-family: courier new;
    color:#082d5f;
    line-height: 0;
    left:10px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

h4{
    position:relative;
    font-family:courier new;
    color:#082d5f;
    line-height:0;
    left:10px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

img {
    position:absolute;
    left:510px;
    top:70px;
    
 
}

p1 {
    position:absolute;
    left:230px;
    top:120px;
    font-size:15px;
    font-family: courier new;
    color: #071836;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    line-height: 1.35;
    opacity: 0.8;
}

p2 {
    position:absolute;
    font-family: courier new;
    color: #071836;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    font-size:13px;
}

p3 {
    font-family:courier new;
    color:white;
    font-size:13px;
    line-height:1.4;
}

p4 {
    font-family:courier new;
    color:#071836;
    font-size:13px;
    line-height:1.4;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.mybox1 {
    position:absolute;
    top:165px;
    left:200px;
    padding:2px;
    width:964px;
    font-family: courier new;
    background-color:#082d5f;
    color:white;
    text-align:center;
    font-size:12px;
    opacity:0.95;
}

.border1 {
        border-style:solid;
        border-width:1px;
        border-color:white;
        padding:5px;
        height:auto;
    }

.border2 {
    border-style:solid;
    border-width:1px;
    border-color:white;
    padding:5px;
    height:152px;
}

.mybox2 {
    position:absolute;
    top:200px;
    left:200px;
    width:200px;
    height:280px;
    background-color:#082d5f;
    padding:2px;
    opacity:0.95;
}

.mybox3 {
    position:absolute;
    top:200px;
    left:410px;
    width:530px;
    height:280px;
    background-color:#082d5f;
    padding:2px;
    opacity:0.95;
}

.mybox4 {
    position:absolute;
    top:200px;
    left:950px;
    width:214px;
    height:113px;
    background-image:url(quique1.jpg);
    background-size:contain;
    padding:2px;
    opacity:0.95;
}

.scroller1 {
    width:auto;
    height:231px;
    overflow:auto;
}

.scroller2 {
    width:auto;
    height:231px;
    overflow:auto;
}

.sharkfacts {
    position:absolute;
    top:320px;
    left:952px;
    width:214px;
    height:163px;
    background-image: url(ocean2.jpg);
    background-size:cover;
    opacity:0.85;
}

.scroller3 {
    height:109px;
    width:auto;
    overflow:auto;
}
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
}img:hover {                                                                                           
  animation: shake 0.1s;           
    animation-duration: 4s;
  animation-iteration-count: 100; 
         
  
  
}   

@keyframes shake {             
  0% { transform: translate(2) rotate(10deg);  }       
  10% { transform: scale(1) rotate(10deg);  }        
  20% { transform: scale(1) rotate(10deg); } 
  30% { transform: scale(1) rotate(10deg); } 
  40% { transform: scale(1) rotate(10deg); }
  50% { transform: scale(1) rotate(10deg); }
  60% { transform: scale(1) rotate(10deg); } 
  70% { transform: scale(1) rotate(10deg); } 
  80% { transform: scale(1) rotate(10deg); }
  90% { transform: scale(1) rotate(10deg); } 
  100% { transform: scale(1) rotate(10deg); }
  
  
  
}