/*$colorPrimary: #a8d0d7; 
$colorSecondary: #4ca1af;
$colorAccent: #2d3361;*/
/*$colorPrimary: #00404b;
$colorSecondary: #d8e2e9;
$colorAccent: #2d3361;*/
/*--------------------------------------------*/
/*--------------------------------------------*/
/*$colorAccent: #BA1200; //Engineering Orange*/
/*--------------------------------------------*/
body {
  background-color: #EBE9E9; }

.about p {
  color: #000000; }

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
  width: 100%;
  /*background-image: linear-gradient(to right bottom, #4ca1af, #6db1bc, #8bc0ca, #a8d0d7, #c4e0e5);*/
  background-image: linear-gradient(to right bottom, #83A4BB, #336484, #172c3a);
  /*background-color: $colorPrimary;*/
  padding: 100px 100px 50px; }
  @media (max-width: 769px) {
    .hero {
      padding: 80px 10%; } }
  .hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding-right: 25%;*/ }
    @media (max-width: 769px) {
      .hero-content {
        flex-direction: column; } }
    .hero-content h1 {
      font-size: 2.5rem;
      line-height: 2.5rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: #ffffff;
      width: max-content; }
      @media (max-width: 769px) {
        .hero-content h1 {
          width: auto; } }
      @media (max-width: 500px) {
        .hero-content h1 {
          font-size: 1.6rem;
          line-height: 1.6rem;
          margin-bottom: 10px; } }
    .hero-content h2 {
      font-size: 2rem;
      line-height: 2rem;
      font-weight: 700;
      color: #ffffff; }
      @media (max-width: 500px) {
        .hero-content h2 {
          font-size: 1.25rem;
          line-height: 1.25rem;
          margin-bottom: 10px; } }
    .hero-content-text {
      width: 50%;
      padding-left: 50px; }
      @media (max-width: 1150px) {
        .hero-content-text {
          width: auto; } }
      @media (max-width: 769px) {
        .hero-content-text {
          width: 100%;
          padding-left: 0;
          text-align: center; } }
    .hero-content-image {
      width: 50%;
      display: flex;
      justify-content: end; }
      @media (max-width: 1150px) {
        .hero-content-image {
          width: auto; } }
      @media (max-width: 769px) {
        .hero-content-image {
          width: 100%;
          justify-content: center;
          margin-bottom: 30px; } }

.profile-picture {
  width: 500px;
  border-radius: 250px;
  max-width: 100%; }
  @media (max-width: 1150px) {
    .profile-picture {
      width: 300px; } }
  @media (max-width: 769px) {
    .profile-picture {
      width: 250px; } }

.projects {
  padding: 50px 50px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center; }
  @media (max-width: 500px) {
    .projects {
      padding: 50px 15px; } }
  .projects h2 {
    text-align: center; }
  .projects-content {
    max-width: 1500px;
    width: 100%; }

.grid-2-column {
  display: flex;
  flex-wrap: wrap; }

.grid-2-column > div {
  display: flex;
  flex-direction: column;
  width: 46%;
  margin: 50px 2%;
  height: 500px;
  background-color: #83A4BB;
  border-radius: 25px;
  border: 10px solid #336484;
  box-sizing: border-box; }
  @media (max-width: 1250px) {
    .grid-2-column > div {
      width: 100%;
      margin: 50px 0; } }
  @media (max-width: 850px) {
    .grid-2-column > div {
      height: auto; } }

.project {
  position: relative;
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 9;
  transition: height 500ms;
  scroll-margin-top: 50px; }
  @media (max-width: 850px) {
    .project {
      aspect-ratio: auto; } }
  .project a {
    margin-right: 20px; }
  .project-content {
    transition: transform 100ms;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: max-height 500ms; }
    @media (max-width: 850px) {
      .project-content {
        max-height: 400px; } }
    @media (max-width: 600px) {
      .project-content {
        max-height: 250px; } }
    .project-content:hover .project-description {
      transform: translateY(0);
      /* slide up into place */ }
      @media (max-width: 600px) {
        .project-content:hover .project-description {
          transform: translateY(100%); } }
    .project-content.open {
      max-height: 750px; }
      .project-content.open .project-description {
        transform: translateY(0); }
  .project-title {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #336484;
    padding: 10px 30px;
    border-radius: 30px;
    z-index: 10;
    width: max-content; }
    .project-title h3 {
      color: #ffffff;
      margin-bottom: 0; }
  .project-header {
    margin-bottom: 20px; }
  .project-description {
    background-color: #336484;
    /*position: absolute;
      bottom: 0;
      left: 0;*/
    width: 100%;
    height: 100%;
    /* fills parent */
    color: #fff;
    padding: 30px;
    transform: translateY(100%);
    /* move completely out of view */
    transition: transform 0.2s ease; }
    @media (max-width: 500px) {
      .project-description {
        padding: 50px 15px; } }
    .project-description p {
      color: #ffffff; }
    .project-description h4 {
      color: #ffffff; }
  .project-thumbnail img {
    width: 100%; }

@media (max-width: 500px) {
  #about {
    padding: 50px 15px; } }

.scroll-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-family: "Roboto";
  font-size: 1.5rem;
  font-weight: 300;
  color: #ffffff;
  padding: 12px 20px;
  /*border: 2px solid $textLight;*/
  border-radius: 50px;
  background: transparent;
  transition: color 0.3s, border-color 0.3s;
  /*text-transform: uppercase;*/
  margin-top: 50px;
  overflow: visible; }
  .scroll-button:hover {
    color: #D3664A;
    border-color: #D3664A; }
  .scroll-button .text {
    margin-bottom: 12px;
    line-height: 1; }
  .scroll-button .arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: visible;
    margin-top: 15px; }
    .scroll-button .arrows span {
      position: relative;
      display: block;
      width: 60px;
      height: 18px;
      opacity: 0;
      animation: arrow-bounce 1.5s infinite;
      pointer-events: none; }
      .scroll-button .arrows span::before, .scroll-button .arrows span::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 43px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        box-sizing: border-box; }
      .scroll-button .arrows span::before {
        right: 49.17%;
        transform-origin: right center;
        transform: rotate(25deg); }
      .scroll-button .arrows span::after {
        left: 50%;
        transform-origin: left center;
        transform: rotate(-25deg); }
      .scroll-button .arrows span:nth-child(1) {
        animation-delay: 0s; }
      .scroll-button .arrows span:nth-child(2) {
        animation-delay: 0.15s; }
      .scroll-button .arrows span:nth-child(3) {
        animation-delay: 0.30s; }

/* simple bounce/appear animation */
@keyframes arrow-bounce {
  0% {
    opacity: 0;
    transform: translateY(-10px); }
  30% {
    opacity: 1;
    transform: translateY(0); }
  60% {
    opacity: 0;
    transform: translateY(10px); }
  100% {
    opacity: 0;
    transform: translateY(-10px); } }