@font-face {
    font-family: 'SpaceMono';
    src: url('/assets/fonts/SpaceMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Beast';    /* Beast by Velvetyne */
    src: url('/assets/fonts/Beast-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: white;
    font-family: 'SpaceMono', sans-serif;
}

a {
    font-family: 'Beast', serif;
    color: #724dbb;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* nav bar */
nav {
    padding: 1em;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

/* nav links */
nav ul li {
    margin: 0 15px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-auto-rows: 40px;
    grid-gap: 10px;
    background-color: rgb(255, 255, 255);
}

.five {
    grid-row: span 5;
    background-color: rgb(224, 224, 224);
}

.six {
    grid-row: span 6;
    background-color: rgb(224, 224, 224);
}

.eight {
    grid-row: span 8;
    background-color: rgb(224, 224, 224);
}

.ten {
    grid-row: span 10;
    background-color: rgb(224, 224, 224);
}

.twelve {
    grid-row: span 12;
    background-color: rgb(224, 224, 224);
}

.image-item {
    display: flex;
    overflow: hidden;
    justify-content: center;
    position: relative;
}

.image-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.image-item:hover img {
    opacity: 1;
}

.image-item:hover .overlay {
    opacity: 1;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;    
    transition: 0.5s ease;
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  .text {
    color: rgb(0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    padding: 3%;
    text-align: left;

  }