body{ background-color: #524f4f;
      color: #ffffff;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;}

    .barnav {  
    height: 100%; 
    width: 175px; 
    position: fixed; 
    top: 0; 
    left: 0;
    background-color:#424244;
    padding-top: 20px;
    line-height: 3;
  
  }
  
 
  .barnav a {
    padding: 5px 5px 5px 5px;
    text-decoration: none;
    font-size: 23px;
    color: #ffffff;
    display: block;
    

  }
  

.barnav a:hover {
    color: #949494;
    transition: color 0.3s ease;
}

nav ul li {list-style-type: none;}



 .main {margin-left: 175px; 
        padding: 0px 10px; 
       
      
      }
        

header{ text-align: center;
        font-size: 40px;
        color: white; }


.module-border-wrap 
{ background: linear-gradient(to right, red, purple);
  padding: 5px;}
      
.module 
{background: #424243;
color: white;
padding: 2rem;}


h2{text-align: center;
   font-size: 40px;

}


.img_1{float: left;
       width: 35%;
       max-width: 100%;
       height: auto;
       border-radius: 25px;
       padding: 20px;
       box-shadow: 0 4px 8px rgba(0,0,0,0.3);
       box-sizing: border-box;
      }

.img_2{float: right;
       width: 35%;
       max-width: 100%;
       height: auto;
       border-radius: 25px;
       padding: 20px;
       box-shadow: 0 4px 8px rgba(0,0,0,0.3);
       box-sizing: border-box;
       }

main p {
    overflow: hidden;
}

main{font-size: 25px;
     line-height: 1.5;
}

#main { 
  min-height: 375px;
  width: 70%;
  padding-left: 1em;}




.col-container {display: table;
  width: 100%;}

.col {display: table-cell;}

main::after{content: "";
display: table;
clear: both;}



.image-grid {
	--gap: 20px;
	--num-cols: 4;
	--row-height: 300px;

	box-sizing: border-box;
	padding: var(--gap);

	display: grid;
	grid-template-columns: repeat(var(--num-cols), 1fr);
	grid-auto-rows: var(--row-height);
	gap: var(--gap);
}

.image-grid>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  border-radius: 15px;
  padding: 10px;
}


input, textarea {display: block;
                 margin-bottom: 20px;
                align-items: center;
                }

input[type="submit"]{margin-left: 135px;}






@media screen and (max-width: 1024px) {
	.image-grid {
		--num-cols: 2;
		--row-height: 200px;
	}
}

footer{ text-align: center;
        margin-top: 40px;
        padding: 20px;
        background-color: #424244;}