*
{
  margin: 0;
  padding: 0;
}

#intro
{
  position: relative;
  width: 100%;
  height: 100vh;
  background:#3589fff1;
  overflow: hidden;
}

.container1
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: center;
  position: relative;
  top: 30%;
}

.container > *
{
  margin-top: 40px;
}

.text-display
{
  display: table-cell;
  vertical-align: middle;
}

.personal-info
{
  margin-top: 8%;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

.name-font 
{
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 60px;
  margin-bottom: 2%;
}

.title-font 
{
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 300%;
  margin-bottom: 2%;
}

.bio-font
{
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 0.1;
  font-size: 20px;
  color: #ffffff;
  margin-left: 0.5%
}


.icons i
{
  position: relative;
  color: black;
  font-size: 150%;
  margin-right: 1%;
}
.tooltip
{
  position: relative;
}

.tooltip .tooltiptext
{
  visibility: hidden;
  width: 100px;
  font: Quicksand, sans-serif;
  font-size: 13px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 2px 0;
  font-weight: bold;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 0%;
}

.tooltip:hover .tooltiptext
{
  visibility: visible;
  cursor: pointer;
}

.container1 .imagebox
{
  width: 225px;
  height: 225px;
  margin-top: 0;
  position: relative;
  line-height: 0;
}

img
{
  width: auto;
  height: 100%;
  position: relative;
  z-index: 1001;
  padding: 0px;
}

section .wave
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(Images/wave.png);
  background-size: 1000px 100px;
}

section .wave.wave1 
{
  animation: animate1 28s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
section .wave.wave2 
{
  animation: animate2 14s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}

section .wave.wave3 
{
  animation: animate 28s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}

section .wave.wave4 
{
  animation: animate2 14s linear infinite;
  z-index: 997;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 20px;
}

@keyframes animate1
{
  0%
  {
    background-position-x: 0px;
  }
  100%
  {
    background-position: 1000px;
  }
}

@keyframes animate2 
{
  0%
  {
    background-position-x: 0px;
  }
  100%
  {
    background-position: -1000px;
  }
}

section .ring
{
  position: absolute;
  width: 60vh;
  height: 60vh;
  background: url(Images/fish-ring.png);
  background-size: 60vh 60vh;
  -webkit-filter: invert(1);
  filter: invert(1);

}

section .ring.ring1
{
  animation: rotation 10s linear infinite;
  z-index: 996;
  opacity: 0.33;
  animation-delay: 0s;
  bottom: -25%;
}

section .ring.ring2
{
  animation: rotation 10s linear infinite;
  z-index: 996;
  opacity: 0.66;
  animation-delay: 5.5s;
  left: 33%;
  bottom: -30%;
  transform: rotate(-45deg);
}

section .ring.ring3
{
  animation: rotation 10s linear infinite;
  z-index: 996;
  opacity: 1;
  animation-delay: 11s;
  left: 66%;
  bottom: -33%;
  transform: rotate(-45deg);
}

@keyframes rotation
{
  from
  {
    transform: rotate(0deg);
  }
  to 
  {
    transform: rotate(359deg);
  }
}

#about {
  position: relative;
  min-height: 50vh;
  max-height: 90vh;
  font-family: sans-serif;
  background: white;
  overflow: hidden;
}

.description 
{
  position: relative;
  margin-top: 10vh;
  justify-content: center;
  align-items: center;
}

.description .content
{
  margin-bottom: 10%;
  max-width: 55%;
  margin-left:22.5%;
  margin-right:22.5%;
  background: #fff;
  border-radius: 10px;
  padding: 25px 50px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}

.about-font
{
  font-family: Quicksand, sans-serif;
  font-size: 16px;
  font-weight: lighter;
}

#coding-exp
{
  min-height: 75vh;
  max-height: 90vh;
  justify-content: center;
  align-items:center;
  overflow: hidden;
  box-sizing:border-box
}

.progbar-container
{
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 25px 50px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  max-width: 70%;
  margin-left:15%;
  margin-right:15%;
  text-align: left;
}

.skillbar
{
  height: auto;
  width: 100%; 
  background-color: #ddd; 
  border-radius: 20px;
}

.skills
{
  text-align: right;
  padding-top: 3px;
  padding-right: 10px;
  padding-bottom: 3px;
  color: white;
  border-radius: 20px;
}

.java {width: 100%;  background-color: #2196F3;} 
.python {width: 66%; background-color: #ffdd00e8;} 
.c {width: 40%; background-color: #ff7300;} 
.ts {width: 25%; background-color: #f44336;}
.html-css {width: 66%; background-color: #38de3e;} 
.js {width: 66%; background-color: #a52fb0;} 

#gallery
{
  min-height: 75vh;
  max-height: 90vh;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.gallery
{
  position: relative;
  max-width: 70%;
  margin-left:15%;
  margin-right:15%;
  background: #fff;
  border-radius: 10px;
  padding: 25px 50px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}

.gallery-cell
{
  width: 50%;
  height: 300px;
  background: #70b7fff1;
  border-radius: 10px;
  padding: 12px 12px;
  margin: 12px;
}


.gallery-cell:hover
{
  cursor: pointer;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

.gallery-cell img
{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
}

.bg-modal
{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  position: fixed;
  top: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.modal-content
{
  position: relative;
  width: 500px;
  height: 530px;
  background-color: #70b7fff1;
  border-radius: 10px;
  padding-top: 20px;
  text-align: center;
}

.modal-content .hor
{ 
  max-width: 70%;
  height: auto;
  border-radius: 10px;
  border: 5px solid white;
}

.modal-content .ver
{ 
  max-width: 50%;
  max-height: 50%;
  height: auto;
  width: auto;
  border-radius: 10px;
  border: 5px solid white;
}

.close
{
  position: absolute;
  font-size: 50px;
  font-weight: bold;
  transform: rotate(45deg);
  color: white;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

#gallery-pop1
{
  position: absolute;
  visibility: hidden;
  z-index: 2001;
}

#gallery-pop2
{
  position: absolute;
  visibility: hidden;
  z-index: 2002;
}

#gallery-pop3
{
  position: absolute;
  visibility: hidden;
  z-index: 2003;
}

#gallery-pop4
{
  position: absolute;
  visibility: hidden;
  z-index: 2004;
}

#gallery-pop5
{
  position: absolute;
  visibility: hidden;
  z-index: 2005;
}

#inspiring-quote
{
  min-height: 60vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
}

.quote-container
{
  position: relative;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 25px 50px;
  box-shadow: 0px 20px 40px -14px rgba(0, 0, 0, 0.25);
  max-width: 70%;
  min-height: 25vh;
  margin-bottom: 10%;
  margin-left:15%;
  margin-right:15%;
}

input {
  outline: none;
}

input[type=search] {
  background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 9px 9px 9px 18px;
	
	-webkit-border-radius: 11m;
	-moz-border-radius: 11em;
	border-radius: 11em;
	
	-webkit-transition: all .6s;
	-moz-transition: all .6s;
	transition: all .6s;

  -webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  appearance: textfield;
  box-sizing: content-box;
  font-family: Quicksand, sans-serif;
  font-size: 100%;
  width: 12px;
	color: transparent;
	cursor: pointer;
}

input[type=search]:hover
{
  background-color: #ccc;
  width: 60%;
  padding-left: 32px;
}

input[type=search]:focus  
{
  width: 60%;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

.quote-font
{
  position: relative;
  left: 2%;
  font-family: Quicksand, sans-serif;
  font-weight: lighter;
  font-size: 18px;
  color:rgba(0,0,0,0.6);
  padding-right:20px;
}

#dropbtn {
  background-color: #70b7fff1;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  padding: 9px 11px 9px 11px;
	display: none;
	-webkit-border-radius: 11m;
	-moz-border-radius: 11em;
	border-radius: 11em;
  -webkit-transition: all .6s;
	-moz-transition: all .6s;
	transition: all .6s;
}

.dropdown {
  position: absolute;
  display: inline-block;
  margin-left: 15px;
  padding-right: 10%;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 3000;
  border-radius:5px;
}

.dropdown-content span {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-radius:12px;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 0px 0px rgba(29, 29, 29, 0.271);
  margin:5px;
}

.dropdown-content span:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover #dropbtn {
  background-color: #5ca4ecf1;
  transform: rotate(180deg);
}

#data-display
{
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  width: 100%;
  background: white;
}

.chart-container {
  position: relative;
  display: flex;
  max-width: 90%;
  margin-left: 5%;
  margin-right: 5%;

  min-height: 15%;
  overflow: hidden;
}

.column-chart {
  width: 50%;
}

.chart {
  width: 100%;
  height: 500px;
}

#piechart1 {
  position: relative;
  padding-left: 15%;
}

#data-textbox
{
  position: relative;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 25px 50px;
  box-shadow: 0px 20px 40px -14px rgba(0, 0, 0, 0.25);
  max-width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  overflow: hidden;
  margin-bottom: 5%;
}

#data-description
{
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  background: white;
}