body {
  height: 100vh;
  margin: 0;
  font-family: sans-serif; }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

a {
  text-decoration: none; }

img {
  width: 100%; }

.nav-container {
  background: #780000;
  position: relative;
  animation: 1s expandHero 1; }
  .nav-container a {
    color: #ddd7ca; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
  transition: all 1s ease; }
  header .logo {
    color: #fdf0d5;
    font-weight: bold; }
  header img {
    width: 40px;
    cursor: pointer; }
  header ul {
    display: flex; }
    header ul a {
      display: block;
      padding: 0 1em; }
    header ul a:hover {
      text-decoration: underline 2px;
      text-underline-offset: 8px;
      color: #fdf0d5; }
  header nav {
    display: none; }

.active {
  background: #780000;
  display: block;
  position: absolute;
  left: 0%;
  top: 4em;
  width: 100%;
  padding: 2em 0;
  animation: expand 0.5s ease-in-out; }
  .active ul {
    display: flex;
    gap: 2em;
    flex-direction: column;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em; }

@keyframes expand {
  0% {
    left: 100%; }
  100% {
    left: 0; } }
.social-header, .hero-design {
  display: none; }

.hero {
  background: #c1121f;
  color: white;
  display: grid;
  text-align: center;
  padding: 4em;
  position: relative;
  z-index: -1;
  animation: 1s expandHero 1; }
  .hero p {
    color: #fdf0d5; }

.scroll {
  width: 30px;
  margin-top: 2em; }

section {
  padding: 4em 2em;
  text-align: center; }

.subtitle {
  text-transform: uppercase;
  font-weight: bold;
  color: #c1121f;
  letter-spacing: 0.1em;
  font-size: 0.85em; }

.featured-title {
  color: #780000;
  font-weight: bold;
  font-size: 1.4em;
  margin-top: -0.4em;
  display: block; }

.featured-desc {
  color: #3c3c3c;
  font-size: 0.85em;
  font-weight: 500;
  margin-bottom: 3em;
  line-height: 1.6em; }

.skills {
  background: #669bbc; }

.skills-container ul li {
  background: white;
  padding: 2em;
  border-radius: 1em;
  margin-bottom: 1em; }
  .skills-container ul li .icon-container {
    height: 100px;
    display: grid;
    place-content: center;
    margin: 0 auto; }
    .skills-container ul li .icon-container.one img, .skills-container ul li .icon-container.two img {
      height: 50px; }
  .skills-container ul li .skill-title {
    font-weight: bold; }
  .skills-container ul li .featured-desc {
    margin-bottom: 2em; }

.portfolio-container a img {
  border-radius: 1em;
  margin-bottom: 2em; }

footer {
  background: #003049;
  text-align: center;
  padding: 4em 2em;
  color: white; }
  footer h2 {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 3em; }
  footer img {
    height: 24px; }
  footer .email-address {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 3em; }
    footer .email-address img {
      width: auto; }
  footer .social-footer {
    display: flex;
    justify-content: center; }
    footer .social-footer a {
      display: block;
      padding: 0 1em; }
  footer svg {
    height: 48px; }

@media only screen and (min-width: 600px) {
  header {
    padding: 2em; }
    header img {
      display: none; }
    header nav {
      display: block;
      background: unset !important;
      position: static !important;
      width: auto !important;
      padding: 0 !important; }
      header nav ul {
        flex-direction: row !important;
        gap: 1em;
        padding: 0 !important; } }
@media only screen and (min-width: 800px) {
  .featured, .portfolio {
    text-align: left; }

  .featured, .portfolio-container {
    display: grid;
    grid-template-columns: 40% auto; }

  .left, .portfolio-left {
    display: grid;
    place-content: center; }

  .right {
    margin-left: 2em;
    margin-top: 1em; }

  .skills-container ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em; }

  .portfolio-container img {
    margin-left: 2em; } }
@media only screen and (min-width: 1100px) {
  .hero {
    height: 95vh; }

  .nav-container {
    display: grid;
    grid-template-columns: 66% auto;
    background: unset; }
    .nav-container header {
      background: #780000; }

  header {
    padding: 2em 2em 2em 4em; }

  .social-header {
    padding: 2em 4em 2em 0;
    transition: all 1s; }

  section {
    padding: 4em; }

  .social-header {
    display: block; }
    .social-header ul {
      display: flex;
      justify-content: space-between;
      width: 5em;
      float: right; }
      .social-header ul img {
        width: 20px; }

  .hero {
    display: grid;
    grid-template-columns: 66% auto;
    background: unset;
    padding: 0; }
    .hero .content {
      background: #c1121f;
      padding: 6em 8em 6em 4em;
      text-align: left;
      transition: all 1s; }
      .hero .content h1 {
        font-size: 3em;
        line-height: 1.2em; }

  .meet {
    margin: unset; }

  .hero-design {
    display: unset;
    margin-left: -50%;
    width: 100%; }

  .portfolio img {
    float: right;
    max-width: 500px; } }
@media only screen and (min-width: 1250px) {
  header {
    padding: 2em 2em 2em 10em; }

  .social-header {
    padding: 2em 10em 2em 0; }

  section {
    padding: 5em 10em 4em 10em; }

  .hero .content {
    padding: 6em 8em 6em 10em; } }
@media only screen and (min-width: 1550px) {
  header {
    padding: 2em 2em 2em 20em; }

  .social-header {
    padding: 2em 20em 2em 0; }

  section {
    padding: 6em 20em 4em 20em; }

  .hero .content {
    padding: 9em 20em 6em 20em; } }
.circle {
  animation: circleAnimation 1s infinite alternate-reverse; }

@keyframes circleAnimation {
  from {
    transform: none; }
  to {
    transform: translateY(60px); } }
.hidden {
  opacity: 0;
  transition: all 1s; }

.left-anim {
  transform: translateX(-100%); }

.right-anim {
  transform: translateX(100%); }

.show {
  opacity: 1;
  transform: translateX(0); }

@media (prefers-reduced-motion) {
  .hidden {
    transition: none; } }
@keyframes expandHero {
  from {
    left: -100%; }
  to {
    left: 0; } }

/*# sourceMappingURL=main.css.map */