@import url('https://fonts.googleapis.com/css?family=Calligraffitti|Open+Sans');

html, body {
  height: 100%;
  background-color: #D0F0FF;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  font-family: 'Calligraffitti';
}

h3 {
  font-family: 'Open Sans';
}

.sea {
  border: 1px solid #017cba;
}

.LightWaves {
  animation: lightwaves 2s infinite;
  position: relative;
}

@keyframes lightwaves {
    0%,100% { transform: translate(0,0); }
    25%     { transform: translate(5px,5px); transform: scale(1.05); }
    50%     { transform: translate(25px, 5px); }
    75%     { transform: translate(12px,10px); transform: scale(1.05); }
}

.DarkWaves {
  animation: darkwaves 3.8s infinite;
}

@keyframes darkwaves {
    0%,100% { transform: translate(0,0); }
    25%     { transform: translate(25px, 5px); transform: scale(1.05); }
    50%     { transform: translate(12px,10px); }
    75%     { transform: translate(5px,5px); }
}

.WhiteWaves {
  animation: whitewaves 4s alternate ease infinite;
}

@keyframes whitewaves {
    0% { transform: translate(0,25px); }
    100%     { transform: translate(25px,35px); }
}


.logo img{width: 200px;} 
.menu{background: #0e618b;width: 180px;
font-size: 24px;
position: absolute; top: 320px;}
.menu a{text-decoration: none; font-family: 'Dancing Script', cursive; color: #ffffff}
.relative{width: 600px;
margin: 0 auto;
display: block;
position: relative;}

.menu a:hover{    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s; }

@-webkit-keyframes slide {
    100% { left: 20; }
}

@keyframes slide {
    100% { left: 20; }
}

.btn {
  width: 180px;
  height: 60px;
  cursor: pointer;
  background: transparent;
  border: 0px solid #91C9FF;
  outline: none;
  transition: 1s ease-in-out;
  font-family: 'Dancing Script', cursive;

}

.border {
  position: absolute;
  left: 0;
  top: 0;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 1s ease-in-out;
}

.btn:hover {
  transition: 1s ease-in-out;
  background: #4F95DA;
}

.btn:hover svg {
  stroke-dashoffset: -480;
}

.btn span {
  color: white;
  font-size: 30px;
  font-weight: 100;
}
.mob h2{font-family: 'Dancing Script', cursive; text-align: center; font-size: 32px; color: #017cba }

@media screen and  (max-width: 1024px) { .mob{ position: absolute; top: 20px} .relative{display:none} .btnm{ width: 200px; margin: 0 auto; margin-top: 60px} .btnm img{width:200px} html,body{ background: #fff} .logo{position:relative; margin: 0 auto; display: block; width: 200px }}
@media screen and  (min-width: 1024px) { .dx{right:0px} .mob{display:none} .logo{width: 200px; margin: 0 auto; position: absolute; top: 100px; left: 200px;} }