@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: "Montserrat", sans-serif;
}

.bg, .bg-image {
  height: 100vh;
  opacity: 0.5;
  position: fixed;
  transition: all 5s;
  width: 100vw;
  z-index: 2;
}

.bg-image {
  background-image: url('../img/brisbane.jpg');
  background-size: cover;
  background-attachment: fixed;
  opacity: 0.1;
  z-index: 1;
 }

.canvas {
  height: 150vh;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 3;
}

.canvas .bubble {
  animation: fadeInAnimation 3s forwards, bubbleUp 20s forwards;
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  z-index: 3;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.25;
  }
}

@keyframes bubbleUp {
  from {
  }
  to {
    top: -20vh;
  }
}

.content {
  left: 0;
  min-height: 150vh;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 3;
}

h1 {
  color: white;
  font-size: 5rem;
  text-shadow: 
    -1px -1px black, 
    -1px 0 black, 
    -1px 1px black, 
    0 -1px black,
    0 1px black,
    1px -1px black, 
    1px 0 black, 
    1px 1px black;
}

h3 {
  font-size: 2rem;
  margin: 0 0 3rem;
  transition: all 5s;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1rem;
  margin: 0 0 2rem;
}

p {
  margin: 0 0 3rem;
}

.container {
  margin: auto;
  max-width: 90%;
}

@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

.banner {
  align-items: center;
  display: flex;
  height: 50vh;
  flex-direction: row;
  justify-content: space-around;
}

.banner .profile-pic {
  background-image: url('../img/profile-pic.jpg');
  background-size: cover;
  border: 1rem solid white;
  border-radius: 50%;
  height: 30vh;
  margin: 1rem;
  width: 30vh;
}

.intro {
  align-items: center;
  display: flex;
  font-size: 2rem;
  height: 50vh;
  flex-direction: row;
  justify-content: space-around;
}

.white {
  background: white;
  padding: 5rem 0;
}

.skills .grid {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 3rem 0;
}

.skills img {
  margin: 3%;
  width: 15%;
}

.skills img.one {
  animation: twinkleOne 10s infinite;
}

.skills img.two {
  animation: twinkleTwo 10s infinite;
}

.skills img.three {
  animation: twinkleThree 10s infinite;
}

.skills-education {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  vertical-align: top;
}

.skills-education .col {
  min-height: 30vh;
  width: 40%;
}

@keyframes twinkleOne {
  0% {
    opacity: 0.25;
  }
  20%, 40% {
    opacity: 0.75;
  }
  60%, 100% {
    opacity: 0.25;
  }
}

@keyframes twinkleTwo {
  0%, 20% {
    opacity: 0.25;
  }
  40%, 60% {
    opacity: 0.75;
  }
  80%, 100% {
    opacity: 0.25;
  }
}

@keyframes twinkleThree {
  0%, 40% {
    opacity: 0.25;
  }
  60%, 80% {
    opacity: 0.75;
  }
  100% {
    opacity: 0.25;
  }
}

@media only screen and (max-width: 991px) {
  .banner, .skills-education {
    flex-direction: column;
  }

  .skills-education .col {
    width: 100%;
  }

  .title {
    text-align: center;
  }
}