/*
   Define colors. They're taken from Tailwind CSS and can be found
   here: https://tailwindcss.com/docs/colors
*/

:root {
   --blue: oklch(74.6% 0.16 232.661);
   --dark-blue: oklch(27.8% 0.033 256.848);
   --darker-blue: oklch(13% 0.028 261.692);

   --white: oklch(98.5% 0 0);
   --lighter-gray: oklch(70.5% 0.015 286.067);
   --light-gray: oklch(27.4% 0.006 286.033);
   --gray: oklch(21% 0.006 285.885);
   --black: oklch(14.1% 0.005 285.823);

   --font: Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
}

html, body {
   overflow-y: auto;
   margin: 0;
   padding: 0;
}

/*
   Generic style
*/

a {
   font-family: var(--font);
   color: var(--blue);
   text-decoration: none;
   cursor: default;
   font-weight: 500;
}

a.link-disabled {
   color: var(--lighter-gray)
}

a:hover:not(.link-disabled) {
   text-decoration: underline;
   cursor: pointer;
}

:not(p) > a {
   margin-block: 1.2rem;
   margin-inline: 0.7rem;

   @media (width >= 40rem) {
      margin-inline: 1.4rem;
   }
}

img {
   display: block;
   width: 100%;
   border-radius: 12.5px;
}

/*
   Header
*/

header {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

/*
   Body
*/

body {
   background-color: var(--gray);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100vh;
}

article {
   margin-inline: auto;
   padding-inline: 1rem;
   margin-bottom: auto;
   max-width: 42rem;
   width: auto !important;
}

article h1 {
   font-weight: bold;
   font-family: var(--font);
   font-size: 2.25rem;
   line-height: 1.1;

   text-align: center;
   margin-block: 1.4rem;
   color: var(--white);
}

article h2 {
   font-weight: bold;
   font-family: var(--font);
   font-size: 1.9rem;
   line-height: 0.9;

   text-align: left;
   margin-block: 1rem;
   color: var(--white);
}

article h3 {
   font-family: var(--font);
   font-size: 1rem;

   text-align: center;
   color: var(--lighter-gray);
}

article p {
   font-family: var(--font);
   color: var(--white);
   font-size: 1rem;
   line-height: 1.5;
   margin-block: 5px;
}

article p span {
   margin-left: 25px;
}

/*
   Footer
*/

footer {
   background-color: var(--black);
   margin: 0;
   padding: 0;

   width: 100vw;
   height: 140px;
   padding-top: 20px;
   margin-top: 20px;
}

footer h1, footer p {
   text-align: center;
   font-family: var(--font);
   color: var(--white);
   font-size: 1.05rem;
   letter-spacing: 0.075rem;
   margin-block: 5px;
}

footer div {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

/*
   projects.html specifics
*/

#projects {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 15px;
}

#projects div {
   margin-block: 10px;
   padding: 20px;
   background-color: var(--light-gray);
   border-radius: 12.5px;
   box-shadow: 3px 7.5px 10px var(--black), -3px 7.5px 10px var(--black);
   transition: scale 100ms, background-color 100ms, box-shadow 100ms;
}

#projects div:hover {
   scale: 1.03;
   background-color: var(--dark-blue);
   box-shadow: 3px 7.5px 10px var(--darker-blue), -3px 7.5px 10px var(--darker-blue);
}

#projects a {
   margin: 0;
   margin-bottom: 5px;
}

#bad-search {
   text-align: center;
   display: none;
   color: var(--lighter-gray);
}

#search-bar {
   width: 100%;
   padding: 5px;
   box-sizing: border-box;
   text-align: left;
   margin-block: 12.5px;
   border-radius: 12.5px;
   background-color: var(--light-gray);
   border: 1.5px solid;
   border-color: var(--lighter-gray);
   color: var(--white);
   font-family: var(--font);
   box-shadow: 1.5px 3px 5px var(--black), -1.5px 3px 5px var(--black);
   transition: background-color 100ms, border-color 100ms;
}

#search-bar:focus {
   background-color: var(--dark-blue);
   border-color: var(--blue);
}

/*
   Project page specifics
*/

#gallery {
   background-color: var(--light-gray);
   border-radius: 12.5px;
   box-shadow: 3px 7.5px 10px var(--black), -3px 7.5px 10px var(--black);
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 7.5px;
   padding: 7.5px;
   margin-block: 7.5px;
}

#gallery img {
   cursor: pointer;
   padding: 1;
   transition: scale 100ms;
}

#gallery img:not(.selected-img):hover {
   scale: 1.03
}

#gallery img.selected-img {
   max-width: 100%;
   max-height: 100%;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   margin: auto;
   overflow: auto;
   position: fixed;
   object-fit: contain;
   transition: none;
}

#screen {
   height: 100vh;
   width: 100vw;
   position: fixed;
   display: none;
   background-color: var(--gray);
   top: 0;
   left: 0;
   margin: 0;
   padding: 0;
}