/* Import fonts */
@font-face {
    font-family: 'Prata-Regular';
    src: url('/public/fonts/Prata-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/public/fonts/PlusJakartaSans.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans Italic';
    src: url('/public/fonts/PlusJakartaSans-Italic.ttf');
    font-weight: normal;
    font-style: italic;
}

/* Apply an animation between page navigation */
@view-transition {
    navigation: auto; /* TODO: Maybe you can put your own custom animation function here? */
}

:root {
    /* Font Styles */
    --font-title: 'Prata-Regular';
    --font-default: 'Plus Jakarta Sans';
    --font-color-default: black;
    --font-color-link: black;


    /* Colors */
    --woset-sand: #EAE9E5;
    --background: #f5f5f5;
    --woset-blue-og: #2D5193;
    --woset-yellow-og: #ECCA53;
    --woset-red-og: #A5001B;
    --woset-green: #054331;

    /* Animations */
    --fade-in: opacity 0.3s ease;

}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: var(--font-default);
    background-color: var(--background);
    color: var(--font-color-default);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
}

a {
    font-family: var(--font-title);
    text-decoration: none;
    position: relative;
    color: inherit;
}

/* Link underline */
a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: var(--font-color-default); /* or a hardcoded color like #000 */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

a:hover::after {
  transform: scaleX(1);
}

img {
    border-radius: 0.3rem;
}

.page-wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto; /* 3 rows: header, content, footer */
    justify-self: center;
    min-height: 100vh;
    max-width: 1200px;

}

.site-header {
    padding: 1rem;
    text-align: center;
    grid-row: 1; /* First row */
}

.site-nav {
    display: flex;
    justify-content: space-around;
    margin: 0 1rem 4rem 1rem;
    grid-column: 1;
}

.content {
    padding: 2rem;
    text-align: center;
    grid-row: 2; /* Second row for content */
}

.site-footer {
    color: white;
    text-align: center;
    padding: 1rem;
    grid-row: 3; /* Third row for footer */
}