body {
}

#browser_page {
    font-family: Comic Sans Ms;
    font-size: 30px;
    text-align: center;
    line-height: 150%;
    color: #daa520;
    padding: 15px;
    border-style: solid;
    border-width: 10px;
    border-color:#daa520;
    margin-top: 25px;
    margin-bottom: 35px;
    border-radius: 50px;  
}

#gold-frame-wrapper {
    width: 900px;
    height: 792px;
   position: relative;
   top: -50px;
} 


#falling_rain  {
    display: block;
    background-image: url('../images/Home_page_57/rain-fall-animation.gif');
    background-repeat: no-repeat;
    width:  550px;
    height:  414px;
    position: absolute;
    top: 185px;
    left: 7px;
    right: 0;
    margin-left: auto;
    margin-right:auto;
}

#gold-frame  {
    display: block;
    background-image: url('../images/Home_page_57/gold-frame.svg');
    background-repeat: no-repeat;
    width:  770px;
    height:  700px;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right:auto;   
}

#what_rain  {
    display: block;
    background-image: url('../images/Home_page_57/what_rain.svg');
    background-repeat: no-repeat;
    width:  900px;
    height:  792px;
    position: absolute;
    left: 0px;
    right: 0;
    margin-left: auto;
    margin-right:auto;
}

#cloud-links-wrapper  {
    width: 900px;
    height: 400px;
    position:relative;
}

#cloud-left-wrapper  {
    width: 300px;
  height: 400px;
   position:absolute;
   left:75px;
   overflow: hidden;
}

#cloud-right-wrapper  {
    width: 300px;
  height: 400px;
   position:absolute;
   right:75px;
   overflow: hidden;
}

a.cloud-with-no-raindrops-left, a.cloud-with-no-raindrops-left:visited {
    display: block;
    background-image: url('../images/Home_page_57/cloud-with-no-raindrops-left.svg');
    background-repeat: no-repeat;
    width: 300px;
   height: 158px;
    position:absolute;
    z-index: 60;
}

.anim-rain-left  {
   display: block;
   background-image: url('../images/Home_page_57/rain-drops-left.svg');
    width: 300px;
    height: 600px;
   position:absolute;
   top: -180px;
  opacity: 0;
  
}

a.cloud-with-no-raindrops-left:hover + .anim-rain-left, a.cloud-with-no-raindrops-left:active + .anim-rain-left {
   animation: 
       falling-rain 1s linear infinite;
}

@keyframes falling-rain {
    0%  {
    opacity: 1;
}
    100% {
       transform: translate3d(0px, 256px, 0px);
       opacity: 1;
    }
}

.anim-rain-right  {
   display: block;
   background-image: url('../images/Home_page_57/rain-drops-right.svg');
    width: 300px;
    height: 600px;
   position:absolute;
   top: -180px;
  opacity: 0;
  z-index: 25;
}

a.cloud-with-no-raindrops-right, a.cloud-with-no-raindrops-right:visited  {
    display: block;
    background-image: url('../images/Home_page_57/cloud-with-no-raindrops-right.svg');
    background-repeat: no-repeat;
    width: 300px;
   height: 158px;
    position:absolute;
    z-index: 60;
}

a.cloud-with-no-raindrops-right:hover + .anim-rain-right, a.cloud-with-no-raindrops-right:active + .anim-rain-right {
   animation: 
       falling-rain 1s linear infinite 0s forwards;
}

#cloud-text-wrapper-right  {
    width: 300px;
    position: absolute;
    bottom: 25px;
    z-index: 0;
}

#cloud-text-wrapper-left  {
    width: 300px;
    position: absolute;
    bottom: 50px;
    z-index: 0;
}

#cloud-font  {
    font-family: 'Comic Sans MS';
    font-size: 25px;
    color: #0094ff;
    text-align: center;
    font-weight: 700;
}

#rain-drops-with-trees  {
     display: block;
    background-image: url('../images/Home_page_57/rain-drops-with-trees.svg');
    background-repeat: no-repeat;
    width: 900px;
   height: 818px;
   margin-bottom: 25px;
}

.rain-font  {
    font-size: 32px;
    text-align: center;
    line-height: 150%;
    margin-left: 200px;
    margin-right: 200px;
    font-weight: 700;
}

.rain-font p {
    margin-top: 25px;
}

#rain_message  {
    display: block;
    background-image: url('../images/Home_page_57/rain_message.png');
    background-repeat: no-repeat;
    width: 900px;
    height: 210px;
    margin-left: auto;
    margin-right: auto;
}

#or  {
    display: block;
    background-image: url('../images/Home_page_57/or.png');
    background-repeat: no-repeat;
    width: 462px;
    height: 336px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}