body {
    /* font-family: rubik; */
    /* font-family: 'Quicksand', sans-serif; */
    font-family: 'Rubik', sans-serif;
    margin: 0px;
    padding: 0px;
    overflow: scroll;
}

/* .page-container {
    margin-bottom: 70px;
} */



nav {
    background-color: #222222;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.nav .logo {
    display: flex;
    align-items: center;
    
}



.nav .logo img {
    width: 58px;
    height: 56px;
    padding: 2px;
    border-radius: 2px;
    background-color: whitesmoke;
}

/* nav .logo .title {
    color: white;
    font-size: 24px;
    font-weight: bold;
    padding-left: 24px;
} */

nav ul {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    list-style: none;
}

nav ul li {
    color: white;
    padding: 22px 40px;
    background-color: #333333;
}

nav ul li:hover {
    background-color: #222222;
}

nav ul li.active {
    background-color: #222222;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.grid {
    display: grid;
    margin: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
  }
  
  .grid-item {
    background-color: lightblue;
    aspect-ratio: 1/1.3;
    /* border: 1px solid black; */
    border-radius: 2px;
    border: 3px solid whitesmoke;
    
  }

  .grid-item:hover {
    transform: scale(1.1);
    transition-duration: 0.7s;
  }

  .min-square {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    
  }

  .min-square a {
    width: 50%;
    height: 50%;
    border: 3px solid beige;
    background-color: beige;
    border-radius: 3px;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .min-square a:hover {
    transform: rotate(15deg);
    transition-duration: 0.7s;
  }

  img {
    width: 100%;
  }

  .name {
    color: #444444;
    font-size: 0.8rempx;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    aspect-ratio: 1/0.3;
  }

  .name:hover {
    color: #222222;
  }

footer {
    bottom: 0px;
    width: 100%;
    height: 50px;
    color: white;
    font-size: 0.8rem;
    background-color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
}

  
  /* .grid-item:nth-child(1) { background-color: #D74C4F; }
  .grid-item:nth-child(2) { background-color: #66A3C7; }
  .grid-item:nth-child(3) { background-color: #9D98C0; }
  .grid-item:nth-child(4) { background-color: #A4BD5F; }
  .grid-item:nth-child(5) { background-color: #E7C245; }
  .grid-item:nth-child(6) { background-color: purple; }
  .grid-item:nth-child(7) { background-color: pink; }
  .grid-item:nth-child(8) { background-color: teal; }
  .grid-item:nth-child(9) { background-color: gray; }
  .grid-item:nth-child(10) { background-color: brown; }
  .grid-item:nth-child(11) { background-color: red; }
  .grid-item:nth-child(12) { background-color: blue; }
  .grid-item:nth-child(13) { background-color: green; }
  .grid-item:nth-child(14) { background-color: yellow; }
  .grid-item:nth-child(15) { background-color: orange; } */

  .grid-item:nth-child(1) { background-color: #566976;}
  .grid-item:nth-child(2) { background-color: brown;}
  .grid-item:nth-child(3) { background-color: #E7C245; }
  .grid-item:nth-child(4) { background-color: #F4D0B0; }
  .grid-item:nth-child(5) { background-color: #9D98C0; }
  .grid-item:nth-child(6) { background-color: #A4BD5F; }
  .grid-item:nth-child(7) { background-color: #2F3C4F; }
  .grid-item:nth-child(8) { background-color: #333333; }
  .grid-item:nth-child(9) { background-color: #D74C4F; }
  .grid-item:nth-child(10) { background-color: #6A0572; }
  .grid-item:nth-child(11) { background-color: #FFA785; }
  .grid-item:nth-child(12) { background-color: #FF6B35; }
  .grid-item:nth-child(13) { background-color: #3D3D3D; }
  .grid-item:nth-child(14) { background-color: #118DF0; }
  .grid-item:nth-child(15) { background-color: #F4C724; }
  .grid-item:nth-child(16) { background-color: #8F3985; }
  .grid-item:nth-child(17) { background-color: #38A3A5; }
  .grid-item:nth-child(18) { background-color: #E85858; }
  .grid-item:nth-child(19) { background-color: #E9B15A; }
  .grid-item:nth-child(20) { background-color: #66A3C7; }
  .grid-item:nth-child(21) { background-color: #143D59; }
  .grid-item:nth-child(22) { background-color: #7CB518; }  
  .grid-item:nth-child(23) { background-color: #4C5F6B; }
  .grid-item:nth-child(24) { background-color: #F1E5E7; }