/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {text-align:center;font-family: "Almendra"; background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/broken-noise.png");}

p {border: 7px solid #6B806E;text-align:center}
p {color: #6B806E;font-family: "Almendra"}
h1 {color: #6B806E;text-align:center;font-family: "Almendra", serif; margin-top: 60px}




/* Top navigation bar */
.sidenav {
  width: 100%;
  height: auto;
  position: fixed; /* stays at top */
  bottom: 0;
  left: 0;
  background-color: #6B806E; opacity:0.5;
  display: flex;              /* makes items go horizontal */
  justify-content: flex-start; /* align left (or use center/space-around) */
  padding: 5px;
  
}

/* Navigation links */
.sidenav a {
  padding: 10px 16px;
  text-decoration: none;
  font-size: 15px;
  color: #191919;
  display: inline-block; /* no longer block-stacked */
}

/* Hover effect */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Page content */
.main {
  margin-left: 0;      /* remove sidebar spacing */
  margin-top: 60px;    /* add space for top nav */
  padding: 10px;
}

.almendra-regular {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: normal;
}

.almendra-bold {
  font-family: "Almendra", serif;
  font-weight: 700;
  font-style: normal;
}

.almendra-regular-italic {
  font-family: "Almendra", serif;
  font-weight: 400;
  font-style: italic;
}

.almendra-bold-italic {
  font-family: "Almendra", serif;
  font-weight: 700;
  font-style: italic;
}


.pixelify-sans-<uniquifier> {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
}


.containertats {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 10px;
}

/* About Me Section */
.aboutclack {
  background-color: #6B806E;
  padding: 10px;
  width: 250px;
  flex-shrink: 0; /* prevents shrinking */
}

.aboutclack h1 {
  font-size: 30px;
  font-family: "Almendra";
  color: #191919;
  margin: 0 0 10px 0;
}

.aboutclack p {
  font-size: 14px;
  font-family: "Pixelify Sans";
  color: #191919;
  text-align:left;
}

.aboutclack li {
  font-size: 14px;
  font-family: "Pixelify Sans";
  color: #191919; 
  text-align: left;
}

/* Portfolio Section */
.portfolio {
  background-color: #dca7ac;
  padding: 10px;
  width: 600px;
  max-width: 100%; /* prevents overflow */
}

.portfolio h1 {
  font-size: 20px;
  font-family: "Pixelify Sans";
  color: #191919;
  margin: 0 0 10px 0;
}

.portfolio p {
  font-size: 14px;
  font-family: "Pixelify Sans";
  color: #191919;
}

/* ✅ Mobile responsiveness */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* stack vertically */
  }

  .aboutclack,
  .portfolio {
    width: 100%; /* full width on mobile */
  }
}