/*
HTML source for Ethan Bayer's personal website
Copyright (C) 2025 Ethan Bayer

This file is part of the source code for studioeb.github.io.

The source code of studioeb.github.io is free software: you can
redistribute it and/or modify it under the terms of the GNU General
Public License as published by the Free Software Foundation, either
version 3 of the License, or (at your option) any later version.

The source code of studioeb.github.io is distributed in the hope
that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
PURPOSE.  See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

/* Lato font licensed under the SIL Open Font License v1.10 */
/* The license is available with an FAQ at: http://scripts.sil.org/OFL */

@font-face {
  font-family: "Arvo";
  src: url("../fonts/arvo-bold-webfont.woff2") format("woff2"),
    url("../fonts/arvo-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-regular-webfont.woff2") format("woff2"),
    url("../fonts/lato-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-italic-webfont.woff2") format("woff2"),
    url("../fonts/lato-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

/* Global Variables */
:root {
  --sidebar-width: 280px;
  --mobile-header-height: 55px;

  --heading-fonts: Arvo, Georgia, "Times New Roman", Times, serif;
  --body-fonts: Lato, Helvetica, Arial, sans-serif;

  /* Theme Colors */
  --navy: hsl(210, 98%, 16%);
  --accent: hsl(0, 100%, 70%);
  --white: hsl(210, 100%, 97%);
  --light-gray: hsl(209, 14%, 68%);

  --navy-dark: hsl(208, 100%, 10%);
  --navy-medium: hsl(210, 100%, 18%);
  --navy-light: hsl(210, 100%, 26%);
  --navy-dark-transparent: hsla(211, 96%, 11%, 0.94);

  --accent-medium: hsl(0, 66%, 61%);
  --accent-dark: hsl(0, 44%, 38%);

  --border-radius-large: 20px;
  --border-radius-small: 10px;

  scroll-behavior: smooth; /* Here for specificity's sake */
}

/* ---- Set defaults ---- */
body {
  background: var(--navy);
  text-align: center;
  margin: 0;
}
h1,
h2,
h3 {
  color: var(--white);
  font-family: var(--heading-fonts);
  font-weight: bold;
}
h1 {
  margin: 0;
}
p {
  color: var(--white);
  font-family: var(--body-fonts);
}
.italic {
  font-style: italic;
}
abbr {
  text-decoration: none;
}

/* Make headings bigger */
h2 {
  font-size: 2.2rem;
  margin: 0 0 1.2rem 0;
}
h3 {
  margin: 0 0 12px 0;
  font-size: 1.3rem;
}

/* ---- Footer ---- */
.scrolling-content {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
footer {
  background-color: var(--navy-dark);
  /* Add a bit of padding to copyright */
  padding: 0.4rem 1rem;
}
footer > p {
  /* Set font styling for footer paragraphs */
  color: var(--white);
  font-size: 0.7rem;
}
footer > p:last-child {
  /* Remove the default bottom margin on the final p in footer */
  margin-bottom: 0;
}
footer > p:first-child {
  /* Remove the default top margin on the first p in footer */
  margin-top: 0;
}

main {
  flex: 1; /* Pushes footer to bottom */
  padding: 0 1rem;
  margin-top: 2rem;
}
main section {
  margin-bottom: 4rem;
}

/* Main Page Portfolio */
.portfolio-grid {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-flow: row wrap;
}
.portfolio-grid article {
  position: relative;
  width: 250px;
  min-height: 180px;
  padding: 18px;
  background: linear-gradient(var(--navy-light), var(--navy-medium));
  border-radius: var(--border-radius-large);
  border: 1px solid var(--navy);
  box-shadow: hsla(0, 0%, 0%, 0.1) 0 1px 3px, hsla(0, 0%, 0%, 0.12) 0 8px 8px;
  transition: box-shadow 0.2s, transform 0.2s, border 0.15s,
    background-color 0.14s;
}
.portfolio-grid article p,
.portfolio-grid article h4 {
  margin: 0; /* Cut default margin */
}
.portfolio-grid article p {
  margin-top: 10px;
}
.portfolio-grid article h4 {
  margin-bottom: 10px;
}
.portfolio-grid img {
  border-radius: calc(var(--border-radius-large) - 5px);
}
.portfolio-grid p.card-link a {
  color: var(--light-gray);
  text-decoration: none;
  font-size: 0.75rem;
}
.portfolio-grid p.card-link a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: var(--border-radius-large);
}
.portfolio-grid p.card-link a::after {
  content: "";
  display: inline-block;
  background: url("../images/arrow-up-right-from-square.svg") no-repeat;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.25rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portfolio-grid article:hover {
    transform: scale(1.06);
    box-shadow: var(--accent) 0 2px 10px;
    border: 1px solid var(--accent);
    background: var(--accent-dark);
  }
}