html {
  box-sizing: border-box
}

@media only screen and (max-width: 799px) {
  .container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "nav"
      "main"
      "sidebar"
      "work"
      "footer";
    grid-gap: 0.4rem;
    text-align: center;
  }
  nav {
    text-align: center;
    grid-area: nav;
  }
  main {
    grid-area: main;
  }
  #sidebar {
    grid-area: sidebar;
  }
  #work {
    grid-area: work;
  }
  footer {
    grid-area: footer;
  }
  li {
    display: inline;
  }
  #juanSantiagoJpg {
    max-width: 400px;
    max-height: 400px;
    margin: 30px 0px 30px 0px;
    border-radius: 20px;
  }  
  .title {
    opacity: 0;
    transition: opacity 3s ease;
  }
  .fadeIn {
    opacity: 1;
  }
  .socialIcon {
    text-decoration: none;
    margin: 0 10px;
  }
  ion-icon {
    font-size: 64px;
    color: a4161a;
  }
  #aboutSection, #resumeSection, #workSection, #contactSection {
    margin-top: 100px;
    margin-bottom: 15px;
    text-decoration: underline;
  }
  #card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .card-title {
    color: black;
  }
  .card-text {
    color: black;
  }
  .btn-primary, .btn-secondary {
    background-color: #181818;
    border-color: #181818;
  }
}

@media (min-width: 800px) {
  .container {
    display: grid;
    height: 100vh;
    grid-template-columns: .5fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1fr 1fr 0.2fr;
    grid-template-areas:
      "nav nav nav nav"
      "sidebar main main main"
      "sidebar work work work"
      "sidebar footer footer footer";
    grid-gap: 0.4rem;
    text-align: center;
  }
  nav {
    text-align: right;
    grid-area: nav;
  }
  main {
    grid-area: main;
  }
  #sidebar {
    grid-area: sidebar;
  }
  #work {
    grid-area: work;
  }
  footer {
    grid-area: footer;
  }
  li {
    display: inline;
  }
  #juanSantiagoJpg {
    max-width: 400px;
    max-height: 400px;
    margin: 30px 0px 30px 0px;
    border-radius: 20px;
  }  
  .title {
    opacity: 0;
    transition: opacity 3s ease;
  }
  .fadeIn {
    opacity: 1;
  }
  .socialIcon {
    text-decoration: none;
    margin: 0 10px;
  }
  ion-icon {
    font-size: 32px;
  }
  #aboutSection, #resumeSection, #workSection, #contactSection {
    margin-top: 15px;
    margin-bottom: 15px;
    text-decoration: underline;
  }
  #card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .card-title {
    color: black;
  }
  .card-text {
    color: black;
  }
  .btn-primary, .btn-secondary {
    background-color: #181818;
    border-color: #181818;
  }
  #btns {
    margin: 0;
    padding: 0;
  }
}

@media only screen and (min-width: 1000px) {
  .container {
    display: grid;
    height: 100vh;
    grid-template-columns: .1fr .5fr .5fr .5fr;
    grid-template-rows: 0.2fr .5fr .5fr 0.2fr;
    grid-template-areas:
      "nav nav nav nav"
      "sidebar main main main"
      "sidebar work work work"
      "sidebar footer footer footer";
    grid-gap: 0.4rem;
    text-align: center;
  }
  nav {
    text-align: right;
    grid-area: nav;
    align-self: end;
  }
  main {
    grid-area: main;
  }
  #sidebar {
    grid-area: sidebar;
  }
  #work {
    grid-area: work;
  }
  footer {
    grid-area: footer;
  }
  li {
    display: inline;
  }
  #juanSantiagoJpg {
    max-width: 400px;
    max-height: 400px;
    margin: 30px 0px 30px 0px;
    border-radius: 20px;
  }  
  .title {
    opacity: 0;
    transition: opacity 3s ease;
  }
  .fadeIn {
    opacity: 1;
  }
  .socialIcon {
    text-decoration: none;
    margin: 0 10px;
  }
  ion-icon {
    font-size: 32px;
  }
  
  #aboutSection, #resumeSection, #workSection, #contactSection {
    margin-top: 15px;
    margin-bottom: 15px;
    text-decoration: underline;
  }
  
  #card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .card-title {
    color: black;
  }
  .card-text {
    color: black;
  }
  .btn-primary, .btn-secondary {
    background-color: #181818;
    border-color: #181818;
  }
  #btns {
    margin: 0;
    padding: 0;
  }
}

@media (prefers-color-scheme: no-preference) {
  body {
    background-color: #121212;
    color: #F8F9FA;
    /* Use a system font, if none are available use an available sans-sarif font */
    font-family: 'Kdam Thmor Pro', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }
  nav {
    background-color: #282828;
  }
  main {
    background-color: #181818;
  }
  #sidebar {
    background-color: #282828;
  }
  #work {
    background-color: #181818;
  }
  footer {
    background-color: #282828;
  }
  #aboutBtn, #resumeBtn, #workBtn, #contactBtn {
    background-color: #282828;
    color: #F8F9FA;
    border: none;
  }
  .socialIcon {
    color: #F8F9FA;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #F8F9FA;
    /* Use a system font, if none are available use an available sans-sarif font */
    font-family: 'Kdam Thmor Pro', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }
  nav {
    background-color: #282828;
  }
  main {
    background-color: #181818;
  }
  #sidebar {
    background-color: #282828;
  }
  #work {
    background-color: #181818;
  }
  footer {
    background-color: #282828;
  }
  #aboutBtn, #resumeBtn, #workBtn, #contactBtn {
    background-color: #282828;
    color: #F8F9FA;
    border: none;
  }
  .socialIcon {
    color: #F8F9FA;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #F8F9FA;
    color: #F8F9FA;
    /* Use a system font, if none are available use an available sans-sarif font */
    font-family: 'Kdam Thmor Pro', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }
  nav {
    background-color: #B3B3B3;
  }
  main {
    background-color: #282828;
  }
  #sidebar {
    background-color: #B3B3B3;
  }
  #work {
    background-color: #282828;
  }
  footer {
    background-color: #B3B3B3;
  }
  #aboutBtn, #resumeBtn, #workBtn, #contactBtn {
    background-color: #B3B3B3;
    color: #F8F9FA;
    border: none;
  }
  .socialIcon {
    color: #181818;
  }
}