* {
    margin: 0; padding: 0; box-sizing: border-box;
}

.hometown .content {
 width: 70ch;
 margin: 0 auto;
}

.hometown .content p {
    margin-bottom: 16px;
    line-height: 1.7;
}

h1 {  
  background-color: rgb(56, 107, 95);
  border-radius: 50%;
  text-align: center;
  -webkit-text-stroke: .5px black;
  text-shadow: 2px 2px 2px rgb(255, 254, 255);
  font-family: 'Henny Penny', system-ui;
  font-size: 4rem; 
  margin-top: 20px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); 
  padding: 20px;
  
}

h2 {
  text-align: left;
  font-family: 'Courier New', monospace;
  font-size: 1.7rem; 
  color: rgb(0, 0, 0); 
  margin-left: 35px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); 
}




p {
  text-align: left;
  font-family: 'Courier New', monospace;
  font-size: 1.5rem; 
  color: rgb(255, 255, 255); 
  margin-top: 20px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); 
  padding: 20px;
  line-height: 1.7;
}




section {
   
   display: flex ;
   justify-content: baseline;
   flex-flow: row wrap;
   padding: 12px;
}
   
section article {
    max-width: 600px;
    max-height: 800px;
    margin: 10px;
    flex: 0 0 auto;
    
}

#art1 article {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);  
    
}

#art2 article {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);    
}

#art3 article {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); 
}

#art4 article {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); 
}

.nav-column {
  clear: both; 
  display: flex; 
  flex-direction: column;   
  align-items: flex-start;  
  margin-top: 20px;
  margin-left: 35px;
}

.nav-column a {
  color: goldenrod;
  text-decoration: none;
  font-size: 1.4rem;  
  margin: 8px 0; 
}

.nav-column a:hover {
  text-decoration: underline;
}
 body {
	 border: 15px dotted rgb(0, 0, 0); 
	 margin: 20px; 
	 padding: 20px; 
	 background-color: rgb(47, 67, 49);
}

header {
		
		text-align: center;
}
ol {
    font-family: 'Courier New', monospace;
    font-size: 1.4rem; 
    color: rgb(255, 255, 255); 
    clear: both; 
    display: flex; 
    flex-direction: column;   
    align-items: flex-start;  
    margin-top: 25px;
    margin-left: 55px;
}
/*main {
    
    border: 4px dotted black;
    display: flex;
    margin-top: 35px;
    margin-left: 35px;
    margin-right: 35px;
    margin-bottom: 35px;
}*/
main div {
    border: 4px dotted rgb(35, 195, 72);
    margin:25px auto;
    display: 1 1;
}
a {
    color: goldenrod;
    text-decoration: none;
    font-size: 1.4rem;  
    margin: 8px 0; 
}

div img{
    margin-left: 10%;
    margin-right: 10%;
    width: 500px; 
    border-radius: 15px; 
    padding: 10px; 
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); 
    text-align: center;
    
}

div {
    width: 70%;
    background: rgb(47, 67, 49);
    border-radius: 10px;
    padding: 4em;
    margin: 20px auto;
    padding-top: 20px;
    position: relative;
}




.nav-container {
  
  display:flex;          
  flex-wrap:wrap;            
  position: relative;
  gap: 30px;
  
}



.nav-container .card {
    width: 12%;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); 
    background: rgb(56, 107, 95);
    border-radius: 10px;
    padding: 2em;
    text-align: center;
    margin-left: 30px;
    margin-top: 50px;
    padding-top: 20px;
    position: relative;
    
    
}
@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.nav-container .card::after, .card::before  {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle), red, rgb(26, 26, 218),rgb(7, 157, 7),yellow,rgb(248, 111, 6),rgb(227, 44, 166),red);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 4px;
    border-radius: 10px;
    animation: 3s spin linear infinite;
    
}

.nav card::before  {
    filter: blur(.40rem);
}
@keyframes spin {
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}



footer a {
    color: goldenrod;
    text-decoration: none;
    font-size: 1.4rem;  
    margin: 8px 0;
}