/* 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." */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
 /* Raleway */


html {
    background-color: #839577;
    
}

body {
  color: #5A3E45;
  font-family: "Times New Roman"; 
}

h1 {
  color: #5A3E45;  /*#BD897E */
  font-family: "Raleway"; 
  font-size: 20px;
}

h2 {
  color: #5A3E45;
  font-family: "Raleway";
  font-variation-settings: 'wght' 550; /* Adjust the weight axis to make the font thinner */
  font-size: 20px;
}

.masonry-grid {
    column-count: auto;
    column-width: 40rem;
}

.normal-link {
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Makes the link color the same as the surrounding text */
}

.center-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 22vh; /* Center the container vertically within the viewport */
    text-align: center;
    margin-top: 20vh; /* Adjust as needed to position vertically */
}

.big-link {
    font-size: 26px;  /* Adjust the size as needed */
    color: #5A3E45;     /* Link color */
    text-decoration: none;  /* Remove underline */
    margin: 56px 0;   /* Spacing between links */
    transition: color 0.1s ease;  /* Smooth color transition */
}

.big-link:hover {
    color: #8C8C8C;  /* Change color on hover */
}