@import 'reset';

$base-color: rgb(1, 79, 102);
$background-color: #e6e6e6;
$content-background-color: #f6f1ea;

body {
  background-color: $background-color;
  margin: 0;
  display: grid;
  color: $base-color;
}

@media (min-width: 1025px) {
  body {
    grid-template-columns: 250px;
    grid-template-areas: 'menu title' 'menu content';
  }

  #navbar {
    height: 100vh;
    position: fixed;
    padding: 1rem;
    margin-right: 1rem;
  }
}

@media (max-width: 1024px) {
  body {
    grid-template-areas: 'title' 'menu' 'content';
  }

  #navbar {
    width: 100%;
    margin-bottom: 1rem;
  }
}

#title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-transform: uppercase;

  h1 {
    margin: 0;
    font-size: xx-large;
    font-weight: bold;
  }

  h2 {
    margin: 0;
    font-size: x-large;
  }
}

#navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: $base-color;
  list-style: none;
  grid-area: menu;

  li {
    &:not(:first-child) {
      margin-top: 1rem;
    }

    &:last-child {
      margin-bottom: 1rem;
    }

    a {
      color: white;
    }
  }
}

#logo {
  width: 150px;
}

#content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: $content-background-color;
  margin-right: 2rem;
  margin-left: 2rem;
  padding: 1rem;
  font-size: large;

  h1 {
    font-size: x-large;
    font-weight: bold;
  }

  p {
    margin: 1rem;
  }

  ul {
    list-style: disc;
    margin: 1rem;
    padding-left: 1rem;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  a {
    margin: 0.5rem;
    width: 20%;
    img {
      max-width:100%;
      max-height:100%;
    }
  }
}

.portfolio {
  h1 {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 3rem;
  }
  #portfolio-gallery {
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    flex-wrap: wrap;
    a {
      img {
        max-width: 100%;
      }
      &:first-child {
        width: 100%;
      }
      &:nth-child(3n) {
        margin-left: 1rem;
        margin-right: 1rem;
      }
      &:not(:first-child) {
        width: 33.333333%;
        flex: 0 1 calc(33.333333% - 0.666666rem);
        margin-top: 1rem;
      }
    }
  }
}