/* -----------------------------------------------Base Styles----------------------------------------------- */
:root {
  --spacing-unit: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", arial, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #767676;

/* -----------------------------------------------Main Container----------------------------------------------- */
.main-container {
  padding: 32px 16px 0 16px;
}

/* -----------------------------------------------Grid Layout----------------------------------------------- */
.main {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.5fr 0.5fr 1fr 120px;
  grid-template-rows:
    minmax(200px, auto)
    auto
    auto
    minmax(300px, auto)
    auto
    auto;
  gap: 0;
  row-gap: 24px;
  min-height: 100vh;
}

.main {
  grid-template-areas:
    "photo photo aboutme aboutme aboutme header"
    "photo photo aboutme aboutme aboutme header"
    "photo photo aboutme aboutme aboutme header"
    "services services lamda lamda lamda header"
    "services services lamda lamda lamda header"
    "footer footer footer footer footer footer";
}

/* Grid Items */
.grid-item {
  padding: calc(var(--spacing-unit) * 2);
  background-color: rgba(255, 255, 255, 0.6);
/*border: 1px dashed #ccc;*/
}

a {
  transition: color 0.3s ease;
}

/* -----------------------------------------------Grid Sections----------------------------------------------- */
.header {
  grid-area: header;
  writing-mode: vertical-rl;
  text-align: center;
  background-color: #ffffff;
  color: #020218;
  padding: calc(var(--spacing-unit) * 2);
  font-size: 3.8vw;
  font-family: 'Playfair Display', serif;
  letter-spacing: 2px;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.5px;
  background: linear-gradient(to bottom, transparent, #ccc 20%, #ccc 60%, transparent);
}

.header h1 {
  font-size: 3.8vw;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  letter-spacing: 2px;
  color: #020218;
}

.aboutme {
  padding-top: 12px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* Important inside grids */
  justify-self: center; /* Important inside grid */
}

/* Photo Section */
.photo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.photo img {
  width: 100%;
  height: auto;
  max-width: 400px;
  border-radius: 8px;
  object-fit: cover;
}

.services {
  min-width: 300px;
}

.lamda {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lamda-logo {
  max-width: 50%;
  height: auto;
  margin-top: 16px;
}

.lamda a {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Links Section */

.footer {
  color: #1c1919;
  text-align: center;
  padding: 24px;
  font-size: 0.9rem;
  position: relative;
}

.footer-top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 16px;
}

.footer-top p {
  margin: 0;
}

.footer-top ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-top li {
  margin: 0;
  color: #1e1e1e;
}

.footer-top a {
  color: #1c1919;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-top a:hover {
  color: #1c1919;
  text-decoration: underline;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5px;
  background: linear-gradient(to right, transparent, #ccc 20%, #676767 80%, transparent);
}

/* -----------------------------------------------Typography----------------------------------------------- */
h2 {
  font-size: 1.5em;
  margin-bottom: var(--spacing-unit);
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  margin: 0 0 20px 0;
}

/* -----------------------------------------------Media----------------------------------------------- */
@media (max-width: 768px) {
  .main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "photo"
      "aboutme"
      "services"
      "footer"
      "lamda"
      ;
    grid-template-rows: auto;
    row-gap: 16px;
  }

  .header {
    font-size: 8vw;
    padding: calc(var(--spacing-unit) * 2) 0;
    writing-mode: horizontal-tb;
    width: 100%;
    max-width: none;
  }

  .header h1 {
    font-size: 8vw; /* or 7vw */
  }
}

  .photo img {
    max-width: 90vw;
    max-height: 60vh;
    object-fit: contain;
  }
}

@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantinfant/v20/HhyCU44g9vKiM1sORYSiWeAsLN99xfs9KOOc_agJPrgvYNWUjjg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v37/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}