/*
Arvo = Heading
Lato = Body
Maybe Garamond
#EBF4F6 Lightest / White
#7AB2B2 Light Blue
#088395 Blue
#09637E Darkest Blue

*/

body {
  font-family: Garamond, serif;
  background-color: #EBF4F6;
  color: black;
  margin: 20px;
}

header {
  background-color:#7AB2B2;
    padding: 2rem 1rem;
    text-align: center;
}
h1 {
  color: white;
  text-align: center;
  font-family: Garamond, serif;
}
h2 {
  color: black;
  text-align: center;
  font-family: Garamond, serif;
}

p {
  color: black;
  font-size: 20px;
}

.projectdesc {
    flex-wrap: wrap;
    justify-content: center; 
    margin-top: 20px;
    align-items: center;
}

.menu {
  display: flex;  
  justify-content: center;
  align-items: center;
  background-color: #088395;
}
 .menu a {
  
  font-family: Lato, serif;
      font-size: 20px;
      font-weight: bold;
      color: black;
    padding: 1rem 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

    .menu a.active {
    background-color: #088395; 
    color: black;           
    border-radius: 8px;       
  }
  .menu a:hover {
    background: #09637E;
    color: #ffffff;
}

  .textbox {
    flex: 1;
    /*Layout*/
    margin:10px;
    padding: 1rem;
    /*Visuals*/
    background-color: whitesmoke;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    /*Text*/
    color: black;
}

.blog{
    background: #EBF4F6;
    color: black;
    padding: 2rem;
    border-radius: 14px;
}
.resume{
  height: 90vh;
  width: 100%;
  /*border: none; This will give no border if wanted*/
}
.resume-section {
    flex: 1;
    display: flex;
    flex-direction: column;  /* Stack header + PDF */
    gap: 20px;
}

.resume-section h2 {
    margin-bottom: 10px;
}

/* https://www.educative.io/answers/how-to-create-columns-in-html*/
.container {
    display: flex; /* Activates Flexbox on the parent container */
    /*flex-direction: row;*/
    align-items: flex-start; /* to prevent stretching */
    gap: 20px; /* Adds space between the two columns */
    max-width: 1200px;
    min-height: 80vh; /* Ensures the container takes up most of the viewport height */
}


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

    .resume {
        height: 70vh;
    }
}