/* Index Page  */
body{margin:0; text-align:center;  font-family: 'Merriweather', serif; }
h1{margin:50px auto 0 auto; font-family: 'Sacramento', cursive; font-size:600%; color:#D0CAB2; margin-bottom:0;}
h2{font-family: 'Montserrat', sans-serif; font-size:2.5rem; color:#009DAE; }
h3{font-family: 'Montserrat', sans-serif;font-size:28px; color:white; font-weight: normal; }
p{margin:0 auto;}
hr{color:black; border:none; border-top:dotted 6px; width:5%; margin:100px auto;}


.rainCanvas{position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none; /* So clicks pass through to elements below */
  background-color: white;
}


.top-container{
  position: relative;
  padding-top:1px;
  background-color:#009DAE;
  overflow: hidden;
  z-index: 2;
}

.middle-container {
  position: relative;
  padding-top:100px;
  background-color:#71DFE7;
  overflow: hidden;
}

/* Top Container */
/*.top-container {background-color:#009DAE; position:relative; padding-top:100px; }*/
.name{width:50%;position: relative;}
.programmer{color:#D0CAB2; font-size:1.5rem;  margin-bottom:40px; position:relative;}
/*.city{width:400px; height:400px; position:relative} */
.new_york {border-radius:100%; position:absolute; top:5%; left:5%; width:175px}
.wave{position:absolute; left:15%; bottom:-10px; margin:0;  width:64px; height:64px;}
.wave_2{position:absolute; left:30%; bottom:-10px; margin:0; width:64px; height:64px;}
.wave_3{position:absolute; right:20%; bottom:-10px; margin:0; width:64px; height:64px;}
.wave_4{position:absolute; right:35%; bottom:-10px; margin:0; width:64px; height:64px;}
.dolphin{position:absolute; right:10%; bottom:-1px; margin:0;}
.dolphin_2{position:absolute; right:13.5%; bottom:24px; margin:0;}
.fish{position:absolute; left:10%; top:43%; margin:0}
.fish_2{position:absolute; left:5%; top:51%; margin:0}
.fish_3{position:absolute; left:14%; top:52%; margin:0}
.orange_fish_1{position:absolute; right:14%; top:10%; margin:0; animation: yellowSwim 9s ease-in-out infinite;}
.orange_fish_2{position:absolute; right:8%; top:13%; margin:0; animation: yellowSwim 14s ease-in-out infinite;}
.orange_fish_3{position:absolute; right:14%; top:16%; margin:0; animation: yellowSwim 22s ease-in-out infinite;}
.puffer_fish{position:absolute; left:8%; top:90%;}
.shark{position:absolute; right:10%; top:27%;width:200px;}
.swim_guy{width:200px; height:200px;}


/* Middle Container */
/*.middle-container {background-color:#71DFE7; position:relative; padding-top:50px;}*/
.skills {width:50%; margin:auto auto; text-align:center; line-height:2;}
.my_skills {padding-bottom:20px; font-family: 'Sacramento', cursive; font-size:600%; color:#009DAE;}
.software {text-align:left; height:500px;}
.hardware {text-align:right; height:300px;}
.computer{float:left; margin-right:30px;}
.pcb{float:right;margin-left:30px;}
.clown-fish{position:absolute; left:10%; top:10%; width:75px; height:75px; animation: swimDepthDart 10s ease-in-out infinite;}
.clown-fish_2{position:absolute; left:15%; top:20%; width:75px; height:75px;   animation: swimDepthDart 13s ease-in-out infinite;
}
.turtle{position:absolute; left:10%; top:72%}
.yellow_fish_1{position:absolute; right:25%; top:6%; animation: yellowSwim 15s ease-in-out infinite;}
.yellow_fish_2{position:absolute; right:34%; top:8%; animation: yellowSwim 31s ease-in-out infinite;}
.yellow_fish_3{position:absolute; right:26%; top:13%; animation: yellowSwim 13s ease-in-out infinite;}
.octopus{position:absolute; top:76%; right:8%;}



/* Bottom Container */
.bottom-container {background-color:#BF8B67; position:relative; padding:50px 0 20px;}
.ig {padding:10px; padding:10px 20px 30px 0;}
.twitter {padding:10px; height:24px; width:24px; padding:10px 20px 30px 10px;}
.git {padding:10px; height:24px; width:24px; padding:10px 20px 30px 10px; }
.git_2 {position:absolute; top:52%; right:12%;}
.get_in_touch{color:#009DAE; padding-bottom:30px;}
.contact_page{padding:30px; color:#009DAE; }
.scuba{position:absolute; left:19%; bottom:-.35%; width:150px; height:150px;}
.crab{position:absolute;left:3%; bottom:-.35%;}
.submarine{position:absolute; bottom:2%; right:17%;width:300px;}
.treasure{position:absolute; left:90%; bottom:-1%; width:75px; height:75px;}
.bubble{position:absolute; left:14%; bottom:4%; width:175px; height:250px;}
.bubble_2{position:absolute; left:61%; bottom:6%; width:175px; height:250px;}



/* Courses Page */
.body{background-color:#009DAE;}
.list{align:center; list-style-position: inside; font-size:20px;}
.header{font-size:30px; margin:auto; padding-top:100px; }
.com_hat {margin:20px;}
.brain_left{position:absolute;left:15%;top:15%;width:150px; height:150px;}
.brain_right{position:absolute;right:15%;top:15%;width:150px; height:150px;}
.binary{position:absolute; left:12%; bottom:10%;}
.binary_2{position:absolute; right:12%; bottom:10%;}



/* Contact Page */
.contact{font-size:10px; text-align:center;  background-color:#009DAE; padding-bottom:120px; }
.info{font-size:24px; padding:30px; font-family: 'Sacramento', cursive; width:50%;}
.me{ font-family: 'Merriweather', serif; width:50%;}
.form{font-size:24px; width:50%; margin:50px auto; }
.phone{position:absolute; top: 20%; right:20%;}
.phone_2{position:absolute; top: 20%; left:20%;}
.robot{position:absolute; right:10%; bottom:10%;}

.success-message {
  background-color: #808aac;
  color: #dada14;
  padding: 35px;
  border: 1px solid #c3e6cb;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  max-width: 500px;
  margin: 20px auto;  /* <-- this line centers the div */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: block;
}


.btn {
  background: #122f42;
  background-image: -webkit-linear-gradient(top, #122f42, #2980b9);
  background-image: -moz-linear-gradient(top, #122f42, #2980b9);
  background-image: -ms-linear-gradient(top, #122f42, #2980b9);
  background-image: -o-linear-gradient(top, #122f42, #2980b9);
  background-image: linear-gradient(to bottom, #122f42, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 3px #0d0f0c;
  font-family: Courier New;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}


.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}


#city {
  bottom: 0;
  margin: 0 auto;
  width: 400px;
  height: 400px;
  background-size: cover;
  background-position: center;
  animation: seesaw 5s infinite ease-in-out alternative;
}


#ufo {
  position: absolute;
  left: 800;
  top: 800;
  transition: all .4s ease-in-out;
}


#clouds {
  top: 50px;
  left: 0;
}
#clouds2 {
  top: 80px;
  left: 200px;
}
#clouds3 {
  top: 110px;
  left: 400px;
}
#clouds4 {
  top: 140px;
  left: 600px;
}
#clouds5 {
  top: 170px;
  left: 800px;
}


.cloud {
  position: absolute;
  width: 150px;
  height: 48px;
  background-image: url('Images/cloud.png');

  left: calc(100% - 100px);
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 4.8;
}

/*GO BACK BUTTON FROM contact.php*/
.form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.success-message, .error-message {
  margin-top: 20px;
  padding: 20px;
  background-color: #dada14;
  color: #a7284a;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  max-width: 500px;
  width: fit-content;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.back-home-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #009DAE;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.back-home-btn:hover {
  background-color: #007f91;
}


@keyframes swimSine {
  0%   { transform: translate(0px, 0px) scaleX(1); }
  10%  { transform: translate(50px, -5px) scaleX(1); }
  20%  { transform: translate(100px, 0px) scaleX(1); }
  30%  { transform: translate(150px, 5px) scaleX(1); }
  40%  { transform: translate(200px, 0px) scaleX(1); }
  49%  { transform: translate(250px, -5px) scaleX(1); }

  50%  { transform: translate(250px, -5px) scaleX(-1); }

  60%  { transform: translate(200px, 0px) scaleX(-1); }
  70%  { transform: translate(150px, 5px) scaleX(-1); }
  80%  { transform: translate(100px, 0px) scaleX(-1); }
  90%  { transform: translate(50px, -5px) scaleX(-1); }
  100% { transform: translate(0px, 0px) scaleX(-1); }
}


@keyframes swimDepthDart {
  0%   { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  20%  { transform: translate(50px, -40px) scale(1.1) rotate(1deg); }
  40%  { transform: translate(150px, 40px) scale(1.2) rotate(-1deg); }
  50%  { transform: translate(200px, 0px) scale(1.25) rotate(0deg); }
  60%  { transform: translate(150px, -40px) scale(1.2) rotate(1deg); }
  80%  { transform: translate(50px, 40px) scale(1.1) rotate(-1deg); }
  100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
}

@keyframes yellowSwim {
  0%   { transform: translate(0px, 0px) scaleX(1); }
  20%  { transform: translate(50px, -10px) scaleX(1); }
  40%  { transform: translate(100px, 10px) scaleX(1); }
  49%  { transform: translate(125px, 0px) scaleX(1); }

  50%  { transform: translate(125px, 0px) scaleX(-1); }

  60%  { transform: translate(100px, -10px) scaleX(-1); }
  80%  { transform: translate(50px, 10px) scaleX(-1); }
  100% { transform: translate(0px, 0px) scaleX(-1); }
}