:root {
    --text: oklch(0.65 0.136 45);
    --background: #222;
    --overlay: var(--background);

    --hero-height: 95vh;
}

* {
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--background);
    color: var(--text);
    overflow-x: hidden;
    font-family: "Noticia Text", serif;
}

img {
    pointer-events: none;
}

a {
    text-decoration: none;
}

/*========== UTILITY ==========*/

.container {
    padding: 3rem 8%;
}

.img-container {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    place-items: center;
}

.img-container > * {
    grid-area: stack;
}

.img-container .bg {
    z-index: 1;
    width: 100vw;
}

.img-container .content {
    z-index: 2;
}

/*========== HEADER ==========*/

header {
      height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
}

header .hero {
    display: flex;
    flex-direction: column;
    height: var(--hero-height);
    background: url("https://picsum.photos/1600/900") no-repeat center center/cover;
}

header .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

header .navbar .logo {
    margin: 0 1.25rem;
    font-size: 1.5rem;
}

header .navbar .logo a:link,
header .navbar .logo a:visited {
    color: var(--text);
}

header .navbar nav {
    display: flex;
    font-size: 1.2rem;
}

header .navbar nav a {
    /* border: 2px solid green; */
    padding: 1rem 1.25rem;
    /* display: inline-block; */
    transition: color 0.05s ease-in; 
}

header .navbar nav a:link,
header .navbar nav a:visited {
    color: var(--text);
}

header .navbar nav a:hover,
header .navbar nav a:active {
    color: var(--overlay);
}

header .hero h1 {
    margin: auto 0;
    padding: 0 8%;
    text-align: center;
    font-size: 3rem;
}

header .header-peek {
    display: flex;
    height: calc(100 - var(--hero-height));
    flex-direction: column;
    justify-content: space-between;
    place-items: center;
    margin: auto 0;
}

/*========== INDEX.html ==========*/

#call-to-action {
    text-align: center;
}

#explore-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
    padding: auto 0;
}
.explore-btn {
    background: var(--text);
    border: 2px solid var(--text);
    border-radius: 6px;
    color: var(--background);
    cursor: pointer;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 10vh 5.5rem;
    flex: 1;
    text-align: center;
}

.explore-btn:hover,
.explore-btn:active {
  background-color: initial;
  background-position: 0 0;
  color: var(--text);
}

.explore-btn:active {
  opacity: .5;
}


/*========== ABOUT.html ==========*/

#biography {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2vw;
}

#biography img {
    max-height: 90vh;
    min-width: 20vw;
    border-radius: 16px;
}

#biography .bio-content{
    flex: 1;
    min-width: min(25rem, 50vw);
}

#biography h2 {
    font-size: 4rem;
    font-weight: 700;
}

#biography p {
    font-family: "Roboto", sans-serif;
}

/*========== Portfolio.html ==========*/

.photo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.photo-grid img {
    border-radius: 6px;
    max-height: 95vh;
    max-width: 100vw;
}

/*========== FOOTER ==========*/

footer {
    display: grid;
    place-items: center;
}

footer #social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

footer #social-icons > *:hover {
    transform: scale(1.1);
}

footer .youtube-icon {
    height: 50px;
}

footer .instagram-icon {
    height: 50px;
}

footer .linkedin-icon {
    height: 36px;
    padding: 7px 0; /* keep the link area the same size as the others */
}

footer hr {
    margin-bottom: 2rem;
    border: none;
    border-top: 2px solid var(--text);
    min-width: 90%;
}

footer p {
    padding: 1rem 1.25rem;
    text-align: center;
    max-width: 70%;
}