/********* HEADINGS ********/

h1 {
    text-align: center;
    font-family: "Slackey";
    font-size: 6vw;
    color:#fffbef; 
}

h2{ 
    text-align: center;
    font-family: "Avenir";
    font-size: 2.3vw;
    padding-top: 3%;
    margin-bottom: 0;
}


h4{
    text-align: center;
    font-family: "Avenir";
    font-size: 1.7vw;
    font-weight: 100;
    color: #b9c4c0;
    padding-top: 0.45%;
}

h5 {
    text-align: center;
    display:block;
    font-family: "Avenir";
    font-size: 1.5vw;
    font-weight:bold ;
    color:rgb(248, 239, 209); 
    letter-spacing: 0.2vw;
    margin-top: 10%
    
}
                
h1, h5 {
    margin: 1.5vw;
}

h2, h4 {
    margin: 0px;
}

h4, .column {
    margin: 0px;
}

ul{
    justify-content: center;
    margin-left: 15%;
}

ul li {
        display: block;
        color: rgb(101, 168, 108);
        text-align: center;
        padding: 2% 2%;
        font-family: "DigitalStrip 2 BB";
        font-size: 1.3vw;
        white-space:nowrap;
        
        
}


/********* NAVIGATION BAR ********/

.topbar {
    overflow: clip;
    position: sticky;
    position: -webkit-sticky;
    max width: fit-content; 
    margin-left: auto; 
    margin right: auto; 
    margin-inline:auto;
    width: 100%;
    background-color: #ffffff;

}

.topbar:before {
    
    height: 100%;
    width: 100%;
    z-index: -1;
}

.topbar a {
    color: rgb(97, 126, 110);
    text-decoration: none; 
    
}

.topbar ul {
    list-style-type: none;
    display: flex;
    column-gap: 2vw;
    justify-content: center;
    align-items: center;

}

/********* IMAGE COLLAGES ********/
.column {
    display: flex;
    flex-wrap: wrap;
    padding: 4% 45;
    justify-content: center;
    
}

.column img { 
    width: 30%;
    height: auto;
    margin-top: 8px;
    padding: 0.5% 0.5%;
    
}

.columnlong {


}

.columnlong img { 
    width: 80%;
    height: auto;
    margin-top: 8px;
    display: flex;
    padding: 1.5% 1.5%;
    margin: auto;
    display: block;

   
}
.fullsize {
    width: 100%;
    height: 100%;
    max-width: 100%;
    cursor: zoom-out;
    z-index: 999; 
    position:fixed;
    margin: auto;
    overflow: auto;
    position: fixed;
    background-color:black; 
    display: block; 


}
  

/********* TOP HEADER ********/
.header {
    list-style-type: none;
    background-color: rgb(191, 190, 129);
    padding: 0.75em; 
    text-align: center;
    
}
.header img {
    float: right;
    display: flex;
    justify-content: center;
    padding: 0.5% 0.5%;
    vertical-align: middle;
    transform: translateY(-8.2vw) translateX(-4vw);
}

.header img, .header name{ 
    vertical-align: middle;
}

/********* GENERAL SPACING ********/
.topbar, .header{
    top:0vw;
}

html,body{
    margin:0;
    padding: 0; 
}

.side-by-side-container {
  display: flex;       /* Automatically places the children side-by-side */
  align-items: center; /* Vertically centers the text relative to the image */
  gap: 20px;           /* Creates a clean 20px space between the image and text */
}

.side-image {
  max-width: 40%;      /* Prevents a large image from crowding out the text */
  height: auto;        /* Maintains the image's original aspect ratio */
  margin-left: 4%;
  margin-top: 2%;
  margin-bottom: 2%;
}

.text-block {
  flex: 1;             /* Tells the text to smoothly fill the remaining space */
  font-family: "Avenir";
  margin: 3%;
  line-height: 110%;
}