/*===============
  global styles
===============*/

/* @import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DSen%3Awght%40400..800%26display%3Dswap");
@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DInter%3Awght%40100..900%26display%3Dswap"); */
/* @import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DCourier%2BNew%3Aital%2Cwght%400%2C400%3B0%2C700%3B1%2C400%3B1%2C700%26display%3Dswap"); */

:root {
  --header-font: 'Courier New', serif;
  --header-font-weight: bold;
  --body-font: 'Courier New', serif;
  --body-font-weight: normal;
  --site-width: 40%;
  @media only screen and (max-width: 600px) {
    --site-width: 90%;
  }

  /* TODO: color scheme */
  --clr-bg: #1e1f1e;
  --clr-fg: #d1cdc3;
  /* --clr-accent: #5b5de5; */
  /* --clr-accent: #c7881c; */
  --clr-accent: #628e81;
  /* --clr-accent: #927cae; */
  --clr-medium: #878683;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  width: 100%;
  font-family: var(--body-font);
  font-weight: var(--body-font-weight);
  background-color: var(--clr-bg);
  color: var(--clr-fg);
  line-height: 1.5;

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    font-weight: var(--header-font-weight);
    /* text-align: left; */
  }
}

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  box-shadow: none;
  box-sizing: border-box;

}

a {
  color: var(--clr-accent);
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

section {
  width: 100%;
  /* height: 30vh; */
  display: flex;
  flex-direction: column;
  align-items: center;

  .header {
    width: var(--site-width);
    font-size: 18px;
    padding-top: 1%;
  }
  .hero {
    width: var(--site-width);
    padding: 1vw;
  }
}

/*===============
section styles
===============*/

#nav {
  height: 10vh;
  /* display: inline-block; */
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 1;

  .nav {
    /* top: 4vh; */
    /* position: absolute;

    left: 4vw; */


    a:hover {
      color: var(--clr-medium);
    }

    .nav-list {
      height: inherit;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      gap: 20px;

      .link {
        color: var(--clr-fg);
        text-decoration: none;
        font-family: var(--header-font);
        /* font-weight: var(--body-font-weight); */
      }
    }
    .hide {
      display: none;
    }
  }
}

#about {
  padding-top: 5%;
  .hero {
    .container {
      position: relative;
      width: 100%;
      /* max-width: 800px; */
      margin: 0 auto;
      /* padding: 20px; */
    }
    .wrap-image {
      float: left;
      margin-right: 3%;
      margin-bottom: 0.5%;
      width: 200px;
      /* width: 25%; */
      height: auto; /* Maintain aspect ratio */
      border-radius: 7px; /* Adjust this value to change the roundness */

    }
    p {
      /* text-align: justify; */
    }
      /* border: 1px solid white;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center; */
      /* max-height: 30vh; */

      /* img { */
        /* width: 32%;
        float: left; */

        /* width: 150px; */

      /* } */

      /* .shifted { */
        /* width: 63%;         */
      /* } */
    /* } */
  }
}

#experience {

}

#education {

}

#contact {

}

/* ----------------------------------------- */

/*===============
section styles END
===============*/