/* Styles for the whole document */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin: 0;
}

:root {
  --primary-color: #8c8c92;
  --secondary-color: #252527;
}

/* Styles the header */

header {
  background-color: var(--secondary-color);
  position: relative;
}

/* Styles the name in header */

header h1 {
  background-color: var(--primary-color);
  color: #212022;
  font-size: 2rem;
  white-space: nowrap;
  padding-right: 1vw;
  padding-left: 3vw;
  margin: 1.5% 0 1.5% 0;
  align-items: center;
  position: absolute;
  top: -0.5rem;
}

/* Styles the navigation bar in header */

header nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 5%;
}

header nav a {
  padding: 2%;
  color: var(--primary-color);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.75vh;
}

/* Styles the hero banner */

.hero-banner {
  background-image: url("../images/02-hero-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 35vh;
  width: 100%;
  position: relative;
}

#hero-container {
  display: flex;
  justify-content: center;
  height:100%;
}

.hero-banner img {
  width: auto;
  max-height: 25vh;
  border-radius: 50%;
  padding-top: 2vh;
}

.hero-banner h2 {
  font-size: auto;
  font-style: italic;
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  position: absolute;
  bottom: 5%;
  right: 2.5%;
  padding: 0.25em;
}

/* Styles the main content */

main {
  width: 90%;
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 5vh;
  margin-top: 2vh;
}

/* Styles the main content titles */

main h2 {
  text-align: right;
  padding-right: 1vw;
}

.page-section {
  border-right: solid 0.2em var(--secondary-color);
}

/* Styles the text in about me section */

#about-text {
  font-size: 0.8rem;
}

/* Styles the portfolio works section */

#myworks {
  display: grid;
  gap: 3vh;
  grid-template-columns: 50% 50%;
  grid-template-rows: 46vh 24vh 24vh;
  grid-template-areas:
    "surf surf"
    "led calc"
    "pastel run";
}

#myworks img:hover {
  color: var(--primary-color);
  opacity: 1;
}

.descriptors {
  background-color: var(--primary-color);
  color: #212022;
  padding: 1%;
  text-decoration: none;
  width: auto;
  position: absolute;
  bottom: 6%;
  z-index: 1;
}

.descriptors p {
  font-size: 0.8em;
}

#surf-report img,
#led-wall img,
#calculator img,
#pastel-puzzels img,
#run-buddy img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

#surf-report,
#led-wall,
#calculator,
#pastel-puzzels,
#run-buddy {
  border: solid 0.25em var(--primary-color);
  position: relative;
  overflow: clip;
}

#surf-report {
  grid-area: surf;
}

#led-wall {
  grid-area: led;
}

#calculator {
  grid-area: calc;
}

#pastel-puzzels {
  grid-area: pastel;
}

#run-buddy {
  grid-area: run;
}

/* Styles the contacts section */

.contacts {
  width: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 2vh;
}

/* Styles formatting for smaller screens */

@media screen and (max-width: 480px) {
  header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  header nav {
    grid-row: 2 / 3;
    display: flex;
    justify-content: flex-start;
  }

  .hero-banner {
    height: 35vh;
  }

  .hero-banner h2 {
    font-size: 1rem;
  }

  main {
    display: flex;
    flex-flow: column;
    gap: 2vh;
    margin-left: auto;
    margin-right: auto;
  }

  main h2 {
    display: flex;
    justify-content: flex-start;
  }

  .page-section {
    border-right: none;
    border-bottom: solid 0.2em var(--secondary-color);
  }

}

@media screen and (max-width: 1000px) {
  header h1 {
    font-size: 1.8rem;
  }


  #myworks {
    display: grid;
    grid-template-rows: 30vh repeat(4, 20vh);
    grid-template-columns: 1fr;
    grid-template-areas:
      "surf"
      "led"
      "calc"
      "pastel"
      "run";
  }

  .contacts {
    width: auto;
    justify-content: space-around;
  }

}