/* INDEX  --------------------
  - CSS RESET
  - GENERAL HELPER CLASSES
  - UNIVERSAL STYLES
  - HEADER & FOOTER
  - MODULAR ELEMENTS
    - Element Name
  - FORMS
  - SPECIFIC PAGES
    - Page Name
---------------------------
Website Fonts: Montserrat:400,500,600,700,900
Website Colours: white (background), #0A100D (text and visited links), hotpink (borders and links), grey (bg and hover links)
----------------------------
*/

/* ---- CSS RESET --------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* border: 1px solid green; */
}

[class*=grid-], [class*=grid_], [class~=grid] {
  margin: 0;
}

[class*=col-], [class*=col_], [class~=col]  {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  font-family: 'Montserrat', sans-serif;
  background-size: cover;
  background: white;
  color: #0A100D;
  font-weight: 500;
}

img {
  max-width: 100%;
}

/* ---- GENERAL HELPER CLASSES --------------------------- */
.tall         { min-height:100vh; }
.med-height   { min-height: 50vh; }

.left-text         { text-align: left; }
.centered-text     { text-align: center; }
.right-text        { text-align: right; }

.centered-block {
  margin-left: auto;
  margin-right: auto;
}

.rotated-text-to-left {
  /* width: 100%; */
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  /* Safari */
  -webkit-transform: rotate(-180deg);
  /* Firefox */
  -moz-transform: rotate(-180deg);
  /* IE */
  -ms-transform: rotate(-180deg);
  /* Opera */
  -o-transform: rotate(-180deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.rotated-text-to-right {
  /* width: 100%; */
  writing-mode: vertical-lr;
}

.no-padding { padding: 0; }

.padded-1 { padding: 1%; }
.padded-3 { padding: 3%; }
.padded-5 { padding: 5%; }

.padded-top-1 { padding-top: 1%;}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.round-img {
  border-radius: 50%;
}

.container {
  display: flex;
  justify-content: space-around;
  flex-direction: row-reverse;
  align-items: center;
}

.centered-container {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.to-right-container {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

.mobile-show {
  display: none;
}

.mobile-hide {
  display: block;
}

.bg-img {
  background-color: grey;
  background-size: cover;
  background-position: center;
}

/* ----- UNIVERSAL STYLES --------------------------- */

.navigate-top {
  right: 0;
  bottom: 0;
  padding: 1%;
  margin: 3% 3% 5% 3%;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  border: 2px solid #0A100D;
  font-size: 1.4rem;
  text-align: center;
  text-decoration: none;
  z-index: 9;
}

.navigate-top:hover {
  color: grey;
}

.navigate-down {
  font-size: 1.4rem;
}

nav {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

nav a {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.4rem;
  display: inline-block;
}

nav h3 {
  display: inline;
}

header, section, footer {
  min-height:100vh;
  outline: none;
}

header {
  position: relative;
  z-index: 10;
  background: white;
}

h1, h2, h3, h4 {
  font-weight: 700;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2rem;
  line-height: 0.9em;
  margin: 1rem 0 0.5rem 0;
}

h2 {
  font-size: 4rem;
  text-shadow: 2px 2px hotpink;
}

h3 {
  font-size: 1.5rem;
}

header nav h3 {
  font-size: 1.4rem;
  font-weight: 600;
}

.grid, .grid-middle {
  padding: 2%;
}

header h2, section h2, footer h2 {
  text-transform: uppercase;
}

header span a {
  color: #hotpink;
  text-decoration: none;
	font-size: 18px;
	margin: 0 10px;
	transition: all 0.4s ease-in-out;
}

/* unvisited link */
a:link {
    color: hotpink;
}

/* visited link */
a:visited {
    color: #0A100D;
}

/* mouse over link */
a:hover {
    color: grey;
}

/* selected link */
a:active {
    color: #0A100D;
}

@keyframes bubble-one {
  0% { top: 0%; right: 0%; }
  25% { top: -7%; }
  50% { right: 15%; }
  75% { top: 10%; right: 10%; }
  100% { top: 0%; right: 0%; }
}

@keyframes bubble-two {
  0% { top: -5%; right: -3%; }
  25% { top: 0%; }
  50% { right: 15%; }
  75% { top: 10%; right: 10%; }
  100% { top: 0%; right: 0%; }
}

@keyframes bubble-three {

  0% { top: 0%; right: 0%; }
  25% { top: -7%; }
  50% { right: 15%; }
  75% { top: 10%; right: 10%; }
  100% { top: 0%; right: 0%; }
}

/* BURGER BUTTTON CSS */
@media (max-width: 940px) {
  .mobile-show {
    display: block;
  }

  .mobile-hide {
    display: none;
  }

  .navigate-top {
    left: 0;
  }

  /* this is where you style the button if you want to add more space between the spans than add padding to this div but make sure you also add it to the top and bottom active classes on there top/bottom or else your cross wont line up*/
  .burger-button {
    position:fixed;
    top: 2vh;
    right: 2vh;
    z-index: 9999999999;
    padding: 8px;
  }
  /*this is where you can chand the color of the buttons*/
  .burger-button span {
    width: 40px;
    border: 2px solid #0A100D;
    background-color: #0A100D;
    display: block;
    border-radius: 22px;
    transition: 1s;
  }
  .burger-button.active span {
    border-color: #0A100D;
    background-color:#0A100D;
  }

  .burger-top, .burger-bottom {
    position: absolute;
  }

  .burger-top {
    top: -02px;
  }

  .burger-bottom {
    bottom: -02px;
  }
  /* make sure this has the same top as the burger button has padding*/
  .burger-button.active .burger-top {
    position: absolute;
    top: 8px;
    transform: rotateZ(45deg);
    transition-duration: 1s;
  }

  .burger-button.active .burger-middle {
  /*   transform: rotateZ(270deg); */
    border-color: rgba(0,0,0,0);
    background-color:rgba(0,0,0,0);
  }

  /* make sure this has the same bottom as the burger button has padding*/

  .burger-button.active .burger-bottom {
    position: absolute;
    bottom: 8px;
    transform: rotateZ(-45deg);
    transition-duration: 1s;
  }

  .burger-menu {
      display: none;
      position: fixed;
      top: 0;
      left:0;
      right: 0;
      bottom: 0;
      background-color: rgba(249, 249, 249, 0.9);
      padding:5px;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
      z-index: 9;
  }

  .burger-menu-content {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .burger-menu a {
    text-decoration: none;
    padding: 1.5rem 1rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: #0A100D;
    display:block;
    text-align:center;
    white-space:nowrap;
    text-transform: capitalize;
  }

  .burger-menu a:hover {
    color: grey;
  }

  .burger-menu li {list-style:none}
}
/* BURGER BUTTTON CSS */

.fa {
  font-size: 2.5em;
  margin: 0 0 0.5em;
  color: white;
}

.avatar {
	width: 165px;
	height: 165px;
	box-sizing: border-box;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 5px 10px 0px rgba(0,0,0,0.6);
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
	img { width: 100%; height: auto; }
}

@keyframes float {
	0% {
		box-shadow: 0 5px 10px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 20px 10px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 10px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

/*------------ ABOUT ME --------------------------- */
.about-me-content {
	padding-left: 35%;
  padding-right: 35%;
}

/*------------ PROJECTS --------------------------- */
#projects p {
  font-weight: 600;
}

nav a {
  text-decoration: none;
}

.project-box {
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 1rem;
}

.project-overlay {
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: rgba(160, 160, 160, 0.75);
  transition: all 0.5s;
}

.project-overlay:hover {
  opacity:1;
}

.project-box-bg {
  height: 100%;
  min-height: 240px;
  background-size: cover;
  background-position: center;
  border: 1px solid grey;
  box-shadow: 0 5px 5px 0px rgba(0,0,0,0.6);
}

/*------------ TECH --------------------------- */

/*------------ TALKS & WORKSHOPS --------------------------- */
.talks-box {
  padding: 2rem;
}

.img-talks_work {
  height: 180px;
  width: 180px;
	box-shadow: 0 5px 10px 0px rgba(0,0,0,0.6);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#talks_and_workshops h3 {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

/*------------ PUBLICATIONS --------------------------- */
#publications h3 {
  font-size: 1.3rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

.publications-box {
  padding: 2rem;
}

.publications-box p {
  text-align: justify;
}

.img-publication {
  height: 200px;
}

/*------------ CONTACT ME --------------------------- */
.contact-text p {
  padding-right: 1rem;
  padding-bottom: 1rem;
  text-align: justify;
}

#contact-me > div {
  min-height: 100vh;
}

form input,
form textarea {
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: none;
  outline: none;
  outline-style: none;
  background-color: transparent;

  color: #0A100D;
  outline-style: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid #0A100D 1px;
  padding: 3px 10px;
}

label {
  font-weight: 600;
}

[type="submit"] {
  border: none;
  font-size: 1.4rem;
  font-weight: 600;
  color: hotpink;
  cursor: pointer;
}

[type="submit"]:hover {
  color: grey;
}

form textarea {
  border-bottom: none;
  height: 12rem;
  padding: 3px;
  resize: none;
}

.contact-text {
  padding-left: 1%;
  padding-right: 1%
}

.flex-right {
  display: flex;
  justify-content: flex-end;
}

.button {
  border: none;
  border-bottom: 2px solid #0A100D;
  padding-bottom: 4px;
  display: inline-block;
}

.button:after {
  content: '';
  border-top: 2px solid #0A100D;
  display: block;
  width: 100%;
}

.form-message {
    background-attachment: local;
    background-image:
    repeating-linear-gradient(transparent, transparent 30px, #0A100D 30px, #0A100D 31px, transparent 31px);
    line-height: 31px;
}

/* bubbles! */
.tech-box {
  padding: 1rem;
  min-height: 190px;
  position: relative;
}

.tech-box-big {
  padding: 1.5rem;
  min-height: 220px;
  position: relative;

}

.tech-box-small {
  padding: 0.2rem;
  min-height: 150px;
  position: relative;

}

.tech-box-img {
  max-height: 125px;
  max-width: 125px;
}

.tech-box-img-big {
  max-height: 140px;
  max-width: 140px;
}

.tech-box-img-small {
  max-height: 100px;
  max-width: 100px;
}

.sphere {
  height: 150px;
  width: 150px;
  background: rgba(187, 222, 251, .3);
  border-radius: 50%;
  position: absolute;
  top:0;
  box-shadow: 1px 2px 3px inset #E3F2FD, -1px -2px 3px inset #E3F2FD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  white-space: nowrap;
  overflow: hidden;
  transition: 1s;
  z-index: 8;
  color: #FFF;
}

.sphere:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 78%, white 84%, white 84%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  left: 4%;
  top: 2%;
  height: 100%;
  width: 90%;
  opacity: .6;
  filter: blur(0);
  z-index: 2;
  -webkit-transform: rotateY(10deg) rotateZ(-25deg);
}

.sphere:after {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 77%, white 85%, white 84%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  left: 4%;
  top: 2%;
  height: 100%;
  width: 90%;
  opacity: .6;
  filter: blur(0);
  z-index: 2;
  transform: translateX(3%) translateY(-3%) rotateZ(168deg) rotateX(10deg);
}

/* .sphere:hover {
  padding: 7%;
  animation: bubble-two 2.5s infinite alternate;
} */

.sphere-big {
  height: 180px;
  width: 180px;
}

/* .sphere-big:hover {
  padding: 10%;
  animation: bubble-three 3.5s infinite alternate;
} */

.sphere-small {
  height: 125px;
  width: 125px;
}

/* .sphere-small:hover {
  padding: 5%;
  animation: bubble-two 2s infinite alternate;
} */

@media(max-width: 1024px) {
  .about-me-content {
    padding-left: 30%;
    padding-right: 30%;
  }
}

@media(max-width: 768px) {
  .about-me-content {
    padding-left: 20%;
    padding-right: 20%;
  }

  .project-box {
    padding: 1rem;
  }

  .talks-box {
    padding: 1rem;
  }

  .publications-box {
    padding: 1rem;
  }

  #contact-me p {
    padding-right: 0rem;
  }
}

@media(max-width: 576px) {
  .about-me-content {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .project-box {
    padding: 0.8rem;
  }

  .talks-box {
    padding: 0.8rem;
  }

  .publications-box {
    padding: 0.8rem;
  }

  /* SPHERE */
  .tech-box {
    padding: 0.7rem;
    min-height: 160px;
  }

  .tech-box-big {
    padding: 1.2rem;
    min-height: 190px;
  }

  .tech-box-small {
    padding: 0.2rem;
    min-height: 140px;
  }

  .tech-box-img {
    max-height: 115px;
    max-width: 115px;
  }

  .tech-box-img-big {
    max-height: 130px;
    max-width: 130px;
  }

  .tech-box-img-small {
    max-height: 90px;
    max-width: 90px;
  }

  .sphere {
    height: 135px;
    width: 135px;
  }

  .sphere-big {
    height: 150px;
    width: 150px;
  }

  .sphere-small {
    height: 115px;
    width: 115px;
  }
}