/* General */
:root {
  --bg-color: #1c343e;
  --typeSpeed: 3s;
  --typeCharNum: 18;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--bg-color);
  color: #95A5A0;
  line-height: 1.5;
  letter-spacing: 1px;
}

b, strong {
  color: #2A9D8F;
}

h2 {
  color: #BFD0CA;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  width: max-content;
  font-size: 1.8em;
  font-weight: 200;
}

/* Heading */

.container {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 3%;
}

#intro h1 {
  padding-top: 15vh;
  font-size: clamp(1.5rem, 3.5vw + 1.5rem, 4.5rem);
  color: #BFD0CA;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  width: max-content;
  font-weight: 200;
  margin-left: 10%;
}

#intro h1::before,
h1::after {
  content: "";
  position: absolute;
  top: 15vh;
  right: 0;
  bottom: 0;
  left: 0;
}

#intro h1::before {
  background: var(--bg-color);
  animation: typing var(--typeSpeed)
    steps(var(--typeCharNum)) 1s forwards;
}

#intro h1::after {
  width: 0.125em;
  background: #2A9D8F;
  animation: typing var(--typeSpeed)
      steps(var(--typeCharNum)) 1s forwards,
    blink 750ms linear infinite;
}

#subtitle {
  align-items: center;
  text-align: left;
  font-size: 1.1em;
  opacity: 0;
  transform: translateY(3rem);
  animation: fadeUp 2s ease calc(var(--typeSpeed) + 2s) forwards;
  margin-left: 10%;
}

#subtitle h3 {
  font-size: 1.7em;
}

#subtitle p {
  max-width: 45vw;
}

#intro img {
  margin-right: 3%;
  flex-direction: row;
}

#button {
  left: 40%;
  font-size: 2em;
  color: #BFD0CA;
  position: absolute;
  animation: pulse 1s infinite ease-in-out alternate;
}

#button a {
  text-decoration: none;
}

/* Row Boxes */
.row {
  width: 80vw;
  font-weight: 3vw;
  margin-left: 11%;
}

.column {
  float: left;
  margin: 0 auto;
  width: 29%;
  min-height: 350px;
  text-align: left;
  background-color: #0f2028;

  margin: 1%;
  border-radius: 25px;
}

.column:hover {
  background-color: rgba(47, 72, 84, 0.876);
}

div.column:hover {
  box-shadow: 3px 2px 7px #2A9D90BF;
}

.column h3, .column p {
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 5%;
  margin-right: 5%;
}

.column h3 {
  margin-top: 25%;
  font-weight: 500;
  color: #BFD0CA;
}

.column p {
  font-size: 0.75em;
  font-weight: 300;
  color: #95A5A0;
}

/* About Me */
#aboutMe {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 1.3rem;
  font-weight: 300;
  opacity: 0;
  transform: translateY(3rem);
  animation: fadeUp 2s ease calc(var(--typeSpeed) + 2s) forwards;
  color: #95A5A0;
  margin-bottom: 5%;
  text-align: left;
  margin-left: 10%;
}

.description li {
  list-style: none;
}

.description ul li::before {
  content: "\00BB";
  color: #2A9D8F;
  display: inline-block;
  width: 1em;
}

#aboutMe {
  font-size: 1.1em;
  text-align: justify;
}

#aboutMe p {
  max-width: 45vw;
}

#aboutMe img {
  border-radius: 10%;
  float: right;
  object-fit: cover;
  max-height: 35vh;
  max-width: 35vw;
  margin-left: 3em;
  margin-right: 5em;
  border: solid;
  border-width: 2px;
  border-color: #2A9D8F;
  border-width: 3px;
  box-shadow: 3px 2px 7px #2A9D90BF;
}


/* Experience */
#experience {
  align-items: center;
  font-weight: 300;
  opacity: 0;
  transform: translateY(3rem);
  animation: fadeUp 2s ease calc(var(--typeSpeed) + 2s) forwards;
  color: #95A5A0;
  margin-bottom: 5%;
  text-align: left;
  margin-left: 10%;
  font-size: 1.1em;
  text-align: justify;
}

#experience a {
  text-decoration: none;
  color: inherit;
  transition: text-shadow 0.3s ease-in-out;
}

#experience a:hover {
  text-shadow: 3px 2px 7px #5d7574bf;;
}

#experience h3 {
  padding-top: 2%;
  max-width: 45vw;
  font-size: 1.5em;
  color: #44cda2;
}

#experience li {
  list-style: none;
  max-width: 45vw;
}

#experience ul li::before {
  content: "\00BB";
  color: #2A9D8F;
  display: inline-block;
  width: 1em;
}

#experience p {
  max-width: 45vw;
}

/* Projects */
#projects {
  opacity: 0;
  transform: translateY(3rem);
  align-items: center;
  flex-direction: row;
  animation: fadeUp 2s ease calc(var(--typeSpeed) + 2s) forwards;
}

#projects h2 {
  color: #BFD0CA;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  width: max-content;
  font-size: 1.8em;
  font-weight: 200;
  margin-bottom: 1vw;
  margin-left: 12%;
}

#personalWebsite {
  background-image: url("images/website.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}

#activistSite {
  background-image: url("images/dropOfADimeImg.png");
  background-size: cover;
  background-blend-mode: overlay;
}

#collegeScheduler {
  background-image: url("images/scheduler.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}

#jellyfishing {
  background-image: url("images/jellyfishing.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}

#tuneTally {
  background-image: url("images/tunetally.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}

#popSign {
  background-image: url("images/popsign.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}

/* Animations */
@keyframes typing {
  to {
    left: 100%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  from { 
    transform: scale(0.8); 
  }
  to {
    transform: scale(1.2);
  }
}

/* Resposive Media */
@media screen and (max-width: 1100px) {
  #subtitle h3 {font-size: 1.5em;}
  #subtitle p {
    font-size: 1.2em;
    max-width: 70vw;
  }
  #subtitle a img {
    width: 2em !important; 
    height: 2em !important;
  }
  #button a {font-size: 1em;}
  .column h3 {font-size: 1em}
  .column p {font-size: 0.75em}
  #aboutMe img {display: none;}
  #aboutMe p {max-width: 70vw;}
  #aboutMe li {margin-right: 20%;}
  #aboutMe {margin-right: 10%;}
  #experience p {max-width: 70vw;}
  #experience li {max-width: 60vw;}
}

@media screen and (max-width: 900px) {
  .column {width: 45%;}
}

@media screen and (max-width: 700px) {
  .column {width: 80%;}
}