* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */

.row-three-columns {
  float: left;
  padding: 10px;
  height: ;
  
}

.column {
  float: left;
  padding: 0;
  height: ; /* Should be removed. Only for demonstration */
}

.one {
  width: 20%;
}

.two {
  width: 60%;
  padding: 48px 0 0 0;
  margin: 0 0 0 0;
}

.three {
  width: 20%;
}

 /* Ensures the rows take up full width and stack vertically */
        .row {
            display: flex;
            flex-direction: row;
            width: 100%;
            margin-bottom: 10px; /* Adds space between rows */
            
        }
        /* Makes each column take up exactly half (50%) of the row width */
        .imgcolr .imgcoll {
            flex: 100%;
            
        }

        .imgcolr {
          padding-right: 4px;
        }

        .imgcoll {
          padding-left: 4px;
        }


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
  
  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: ;
  background-color: ;
}

li a {
  display: block;
  color: #545454;
  padding: ;
  text-decoration: none;
}

/* Change the link and background color on hover */
li a:hover {
  
  color: #545454;
}

.flex-container {
  display: flex;
  gap: 8px; /* Optional space between columns */
}

.splitcolumn {
  flex: 1; /* Automatically forces both divs to share space equally */
}

body {
	font-family: Arial;
	font-size: 12px;
	line-height: 0;
	
	background-color: #ffffff;
	color: #555555;
	margin: auto;
	width: ; 
}

.title p {
  padding: 0 0 10px 0;
}

.caption p {
  font-size: 10px;
  margin: 10px 0 10px 10px;
}

.bio p {
  line-height: 2;
}

a {
  font-size: 10px;
  line-height: 2;
}

h1 {
	font-size: 16px;
	font-weight: 600;
  line-height: 4;
}

hr {
  margin-top: 40px;
}

img {
  padding: 10px 0 0 0;
}

.circle-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover; /* Keeps the original image proportions intact */
}

.homenav {
  text-align: left;
  padding: 20px 0 0 10px;
}

.homenav a {
  text-decoration: none;
  color: black;
  font-size: 10px;
}

.donations p {
  margin: 40px 10px 0 10px;
  line-height: 2;
  text-align: center;
}

.footer p {
  padding: 40px 0 40px 0;
  font-family: Times New Roman;
}

@media (max-width: 768px) {

  .column {
    float: none;      /* Removes the side-by-side floating behavior */
    width: 100%;      /* Forces the element to take the full row width */
    display: block;   /* Ensures the element acts as a block */
    
  }
  
 .one {
    text-align: center;
  }

  .row {
    flex-direction: column; /* Force images to stack vertically */
  }
  
    .imgcolr {
      padding: 0px;
    }

    .imgcoll {
      padding: 0px;
    }
  
}