/*
=======================================
  Title: Personal Portfolio 
  Author: Evan Durkin
  Description: page styling and grid 
  template layouts for all pages
=======================================
*/

/*-----------------------------------------
  Header and Footer Styling
-----------------------------------------*/
.header-container {
  border-bottom: 1px solid white;
}

footer {
  grid-column: 1/4;
  border-top: 1px solid white;
  display: grid;
  grid-template-columns: 250px auto auto;
  margin-top: 4em;
}

.footer-links {
  grid-column: 2/3;
  margin-left: 3em;
}

.footer-links-index {
  grid-column: 1/2;
  margin-left: 5px;
}
/*-----------------------------------------
  Sidebar Navigation Styling
-----------------------------------------*/

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #292929;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 4em;
}

.sidenav a {
  padding: 11px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
  font-size: 27px;
  transition: 0.3s;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.menu {
  float: right;
  margin-right: 1em;
  margin-top: 1em;
}

.menu:hover {
  font-size: 35px;
  transition: 0.3s;
}

@supports (grid-area: auto) {
  @media screen and (max-width: 1023px) {
    /******Styling for view ports 1023px and smaller******/
    .site-index {
      min-width: 320px;
      padding: 0 1em;
      margin: 3em auto;
    }

    .index-header-container {
      display: flex;
      border-bottom: 1px solid white;
      margin-bottom: 2em;
    }

    .logo {
      min-width: 30px;
      max-width: 50px;
      margin-bottom: 1em;
    }

    .logo:hover {
      cursor: pointer;
      transform: rotate(45deg);
      transition: 0.3s;
    }

    .myName {
      display: flex;
      flex-direction: column-reverse;
      margin-left: 15px;
      margin-bottom: 1em;
      font-family: "neue-haas-grotesk-text", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 25px;
      color: white;
    }

    .main-area {
      display: grid;
      grid-template-columns: auto 120px;
      grid-template-rows: repeat(6, auto);
      margin: 0 auto;
      padding: 0 1em;
    }

    .link {
      font-size: 20pt;
      text-decoration: underline;
      margin-bottom: 4px;
    }

    .img-full {
      display: none;
    }

    .img-mobile {
      max-width: 120px;
      margin-bottom: 4px;
    }

    .link-projects {
      grid-column: 1/2;
      grid-row: 1/2;
    }

    .img-projects {
      grid-column: 2/3;
      grid-row: 1/2;
    }

    .link-database {
      grid-column: 1/2;
      grid-row: 2/3;
    }

    .img-database {
      grid-column: 2/3;
      grid-row: 2/3;
    }

    .img-api {
      grid-column: 2/3;
      grid-row: 3/4;
    }

    .link-api {
      grid-column: 1/2;
      grid-row: 3/4;
    }

    .link-resume {
      grid-column: 1/2;
      grid-row: 4/5;
    }

    .img-resume {
      grid-column: 2/3;
      grid-row: 4/5;
    }

    .link-about {
      grid-column: 1/2;
      grid-row: 5/6;
      margin-top: 3em;
    }

    .page-title {
      grid-column: 1/2;
    }

    .img-pages {
      grid-column: 2/3;
    }
  }

  @media screen and (min-width: 1024px) {
    /******Styling for view ports 1024px and wider******/

    /*--------------------------------------------------------
    Grid styling for index page 
    ---------------------------------------------------------*/
    .site-index {
      width: 945px;
      margin: 3em auto;
    }

    .index-header-container {
      display: flex;
      border-bottom: 1px solid white;
      grid-column: 1/4;
      margin-bottom: 2em;
    }

    .myName {
      font-size: 35px;
    }

    .link {
      font-size: 38pt;
    }

    .img-mobile {
      display: none;
    }

    .main-area {
      /*grid container for index-page only*/
      display: grid;
      grid-template-columns: 315px 315px 315px;
      grid-template-rows: auto auto auto auto;
    }

    .link-projects {
      grid-column: 1/2;
      grid-row: 1/2;
    }

    .img-projects {
      grid-column: 2/4;
      grid-row: 1/2;
      width: 630px;
    }

    .link-database {
      grid-column: 1/3;
      grid-row: 2/3;
    }

    .img-database {
      grid-column: 3/4;
      grid-row: 2/3;
      width: 315px;
    }

    .img-api {
      grid-column: 1/2;
      grid-row: 3/4;
      width: 315px;
    }

    .link-api {
      grid-column: 2/4;
      grid-row: 3/4;
    }

    .link-resume {
      grid-column: 1/2;
      grid-row: 4/5;
    }

    .img-resume {
      grid-column: 2/3;
      grid-row: 4/5;
      width: 315px;
    }

    .link-about {
      grid-column: 3/4;
      grid-row: 4/5;
    }

    .page-title {
      grid-column: 1/2;
    }
    .img-pages {
      width: 250px;
      grid-column: 1/2;
    }

    /***********************************************
    Page element styling for all pages, except Index
    ************************************************/

    .site {
      margin: 3em auto;
      max-width: 1460px;
      padding: 3em;
      display: grid;
      grid-template-columns: auto auto auto;
    }

    .cards {
      grid-column: 2/4;
      display: grid;
      grid-template-columns: auto auto;
    }

    .card {
      margin-left: 3em;
      border-top: 1px solid white;
      margin-bottom: 2em;
      display: grid;
      grid-template-rows: auto auto auto;
      text-align: left;
    }

    .header-container {
      grid-column: 1/4;
      border-bottom: 2px solid white;
    }

    .logo {
      width: 75px;
      margin-bottom: 1em;
    }

    .logo:hover {
      cursor: pointer;
      transform: rotate(45deg);
      transition: 0.3s;
    }

    /***********************************************
    Page element styling for Resume page
    ************************************************/
    .resume {
      grid-template-rows: auto auto auto;
      grid-template-columns: 250px auto auto;
    }

    .main-area-resume {
      grid-column: 2/4;
    }

    table {
      grid-column: 2/4;
      display: block;
    }

    .resume-table {
      grid-column: 2/4;
      margin-left: 3em;
      border-top: 1px solid white;
      border-bottom: none;
      border-left: none;
      border-right: none;
    }

    td {
      padding-top: 10px;
      padding-bottom: 3em;
    }

    #education td {
      padding-bottom: 1em;
    }

    .resume-title {
      width: 300px;
    }

    #download-resume {
      font-family: "neue-haas-grotesk-text", sans-serif;
      font-weight: 400;
      font-style: bold;
      font-size: 20px;
      color: #446ff2;
      background-color: #d1dafb;
      border: 4px solid #446ff2;
      border-radius: 25px;
      padding: 10px 16px;
      grid-column: 2/3;
      grid-row: 2/3;
      transition-duration: 0.4s;
      margin-left: 3em;
      margin-bottom: 2em;
      display: inline-block;
      width: fit-content;
      height: fit-content;
      margin-top: 2em;
    }

    #download-resume:hover {
      background-color: #446ff2;
      color: white;
    }

    /***********************************************
    Page element styling for About page
    ************************************************/

    .site-about {
      margin: 3em auto;
      max-width: 1460px;
      padding: 3em;
    }

    .main-area-about {
      max-width: 900px;
      margin: 2em auto;
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto auto auto;
    }

    #headshot {
      grid-row: 1/2;
      grid-column: 1/2;
      max-width: 300px;
      margin: 1em auto;
    }

    #headshot-photo {
      max-width: 300px;
      margin: 1em auto;
    }

    #bio {
      grid-row: 2/3;
      grid-column: 1/2;
      margin: 0 auto 1em;
      max-width: 600px;
    }

    #bucket-list {
      grid-row: 3/4;
      grid-column: 1/2;
      margin-top: 2em;
      border-top: 1px solid white;
    }

    #bucket-list-items {
      margin: 1em auto;
      display: table;
      font-size: 25px;
    }

    #bucket-header {
      font-style: bold;
      color: #ff6666;
      margin-top: 1em;
      font-size: 25px;
    }

    .bucket {
      margin-bottom: 7px;
    }

    #my-name {
      text-align: center;
      color: #ff6666;
      font-size: 30px;
    }
  }
}