:root {
   --clr-bg: #23283e;
   --clr-bg-alt: #1b1e31;
   --clr-fg: #bdbddd;
   --clr-fg-alt: #cdcdff;
   --clr-primary: #90a0d9;
   --shadow: rgba(0, 0, 0, 0.5) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

::-moz-selection {
   background: var(--clr-primary);
   color: var(--clr-bg);
}

::-webkit-selection,
::selection {
   background: var(--clr-primary);
   color: var(--clr-bg);
}

h1,
h2,
h3,
h4 {
   color: var(--clr-fg-alt);
}

h1 {
   font-size: 4rem;
}

h2 {
   font-size: 2rem;
}

h3 {
   font-size: 1.5rem;
}

h4 {
   font-size: 1.3rem;
}

span.highlight {
   color: var(--clr-primary);
}

* {
   margin: 0;
   scroll-behavior: smooth;
}

body {
   font-family: "Poppins", sans-serif;
   color: var(--clr-fg);
   background-color: var(--clr-bg);

   display: flex;
   flex-direction: column;
   height: 100vh;
}

nav {
   position: sticky;
   background-color: var(--clr-bg-alt);
   padding: 16px;
   display: flex;
   justify-content: center;
   gap: 64px;
   box-shadow: var(--shadow);
   z-index: 100;
   border-bottom: 2px solid var(--clr-fg);
}

main {
   overflow-y: scroll;
}

main::-webkit-scrollbar {
   width: 16px;
}

main::-webkit-scrollbar-track {
   background: var(--clr-bg-alt);
}

main::-webkit-scrollbar-thumb {
   background: var(--clr-fg);
}

main::-webkit-scrollbar-thumb:hover {
   background: var(--clr-primary);
}

section.introduction {
   background-color: var(--clr-bg-alt);
   border-bottom: 2px solid var(--clr-fg);
}

.section-title {
   text-align: center;
   margin-bottom: 1em;
   text-transform: uppercase;
}

.section-content {
   padding: 64px 16px;
   max-width: 900px;
   margin: 0 auto;
}

.split {
   display: flex;
   gap: 32px;
   align-items: flex-start;
}

.split > div {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

.split img {
   width: 100%;
   object-fit: cover;
   outline: 2px solid var(--clr-primary);
}

@media (max-width: 768px) {
   .split {
      flex-direction: column;
   }
}

.social-links {
   display: flex;
   width: 100%;
   justify-content: space-evenly;
}

a {
   text-decoration: none;
   -webkit-user-drag: none;
   -khtml-user-drag: none;
   -moz-user-drag: none;
   -o-user-drag: none;
}

a.link {
   color: var(--clr-fg);
   position: relative;
   display: inline-block;
}

a.link:hover {
   color: var(--clr-primary);
}

a.link::before {
   content: "";
   display: inline;
   width: 0%;
   height: 0.2em;
   position: absolute;
   bottom: 0;
   background-color: var(--clr-primary);
   transition: width 0.2s ease-in;
}

a.link:hover::before,
a.link:focus-visible::before {
   width: 100%;
}

a.button {
   padding: 0.8em 1.4em;
   font-weight: 500;
   font-size: 0.9rem;
   text-transform: lowercase;
   transition: color 0.2s ease-in-out;
   color: var(--clr-primary);
   border: 2px solid var(--clr-primary);
   position: relative;
   overflow: hidden;
   z-index: 1;
   width: fit-content;
}

a.button:focus,
a.button:hover {
   color: var(--clr-bg);
}

a.button::before {
   content: "";
   position: absolute;
   background-color: var(--clr-primary);
   left: 0;
   top: 0;
   width: 0;
   height: 100%;
   z-index: -1;
   transition: width 0.2s ease-in-out;
}

a.button:hover::before,
a.button:focus::before {
   width: 100%;
}

.projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 32px;
   max-width: 900px;
}

@media (min-width: 900px) {
   .projects-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

.project-card {
   position: relative;
   aspect-ratio: 1;
   overflow: hidden;
   cursor: pointer;
   outline: 2px solid var(--clr-fg);
   transition: transform 0.2s ease-in-out;
}

.project-card:hover {
   transform: scale(1.05);
   outline: 2px solid var(--clr-primary);
}

.project-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.project-card-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
   padding: 16px;
   display: flex;
   align-items: flex-end;
}

.project-card-title {
   color: var(--clr-fg-alt);
   font-size: 1.2rem;
   font-weight: 500;
}

/* Modal */
.modal {
   display: none;
   position: fixed;
   z-index: 1000;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
}

.modal.active {
   display: flex;
}

.modal.visible {
   opacity: 1;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.modal-content {
   background-color: var(--clr-bg-alt);

   padding: 0 16px;
   width: 900px;
   margin: 0 auto;

   overflow-y: auto;
   position: relative;
   box-shadow: var(--shadow);
   border: 2px solid var(--clr-fg);
}

.modal-content::-webkit-scrollbar {
   width: 12px;
}

.modal-content::-webkit-scrollbar-track {
   background: var(--clr-bg);
}

.modal-content::-webkit-scrollbar-thumb {
   background: var(--clr-fg);
}

.modal-content::-webkit-scrollbar-thumb:hover {
   background: var(--clr-primary);
}

.modal-close {
   position: absolute;
   top: 16px;
   right: 16px;
   background: var(--clr-bg);
   color: var(--clr-fg);
   border: 2px solid var(--clr-primary);
   font-size: 2rem;
   width: 48px;
   height: 48px;
   cursor: pointer;
   z-index: 1001;
   transition: all 0.2s ease-in-out;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}

.modal-close:hover {
   background: var(--clr-primary);
   color: var(--clr-bg);
}

.modal-body {
   display: flex;
   flex-direction: column;
   gap: 32px;
   padding: 32px;
}

.modal-image {
   max-height: 400px; /* limit vertical size */
   max-width: 100%; /* scale down with viewport */
   width: auto; /* maintain aspect ratio */
   height: auto; /* maintain aspect ratio */
   object-fit: contain; /* ensure image isn’t cropped */
   outline: 2px solid var(--clr-fg);
   flex-shrink: 0; /* prevent flexbox from squishing it oddly */
   margin: 0 auto; /* center horizontally */
   display: block; /* prevent inline gaps */
}

.modal-info {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.modal-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.modal-tag {
   background: var(--clr-bg);
   color: var(--clr-primary);
   padding: 6px 12px;
   font-size: 0.85rem;
   border: 1px solid var(--clr-primary);
}

.modal-links {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
}

.modal-links .button {
   display: flex;
   align-items: center;
   gap: 8px;
}