*{
  box-sizing: border-box;
}
body{
display:grid;
grid-gap: 50px;
background:rgb(28, 28,28) ;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,59,0,1) 72%, rgba(38,92,75,1) 100%);
}
a {
  text-decoration: none;
  font-family: "Moulpali";
  color: rgb(236,255,237);
}
.navbar-nav{
  display: flex
}
nav{
  height: 100px;
  width:100%;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,59,0,1) 72%, rgba(38,92,75,1) 100%);
  display: grid;
  grid-template-columns:3fr 1fr;
}
nav img{
   height: 200px;
   text-align: center;
}
#logo {
  width: 160px;
  height: 80px;
}
main{
 
position:static;
  
}

.gallery-cell {
  position:static;
   font-family: "Moulpali";
   color: rgb(236,255,237);
  width: 100%;
  height: 400px;
  margin-right: 10px;
  background:rgb(44,87,65);
  counter-increment: gallery-cell;
  display:grid;
  grid-template-areas:
  "image image image word word "
  "image image image word word";
 
 
}
.info {
  padding-right: 60px;
  padding-left: 60px;
  padding-top: 30px;
}

.circle:hover{
   box-shadow: 0px 12px 22px 12px rgb(0,0,0);
}

.circle {
background:linear-gradient(90deg, rgba(88,154,141,1) 0%, rgba(0,117,102,1) 72%, rgba(38,92,75,1) 100%);
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  height: 500px;
  transition: all 1s ease-in-out;
  width: 500px;
  z-index: 5;
  display:grid;
  justify-content:center;
  text-align: center;
  font-size: 20px;
  
}
.circle figure{
  justify-self:center;
  align-self:center;
  width: 100px;
    height: 100px;
    border-radius: 25%;
}
.space{
  width: 300px;
}

.flickity-page-dots .dot {
  width: 15px;
  height: 15px;
  opacity: 1;
  background: transparent;
  border: 2px solid white;
}
.flickity-page-dots .dot.is-selected {
  background: white;
}
.img1{
  
  grid-area:image;
  max-width: 100%;
  height: auto;
  
}
/* fit images to container */
img {
  text-align: center;
    max-width: 100%;
    height: auto;
}
.info{
  grid-area:word;
  max-width: 100%;
  max-height: 100%;
}

.addinfo{
  display:flex;
  flex-direction:row;
}
aside{
   font-family: "Moulpali";
   color: rgb(236,255,237);
   
}
.labelc{
  display: flex;
background-color: rgb(236,255,237);
  height: 100px;
  
}
.titles{
  font-family:"Moul";
  text-align: center;
}
@keyframes morph {
  0% {
			border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background:linear-gradient(90deg, rgba(88,154,141,1) 0%, rgba(0,117,102,1) 72%, rgba(38,92,75,1) 100%);
	} 
	
	50% {
			border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
		background:linear-gradient(90deg, rgba(88,154,141,1) 0%, rgba(0,117,102,1) 72%, rgba(38,92,75,1) 100%);
	}
  
	100% {
		border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
	background:linear-gradient(90deg, rgba(88,154,141,1) 0%, rgba(0,117,102,1) 72%, rgba(38,92,75,1) 100%);
	} 
}
.get-involved{
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: Moulpali;
  outline: none;
  color: #FFFFFF;
  background-color: #589A8D;
  border: none;
  border-radius: 27px;
  box-shadow: 0 9px #999;
  height: 55px;
  width: 180px;
  justify-self:center;
}
.get-involved:hover {background-color: #005B00}
.get-involved:active {
  background-color: #005B00;
  box-shadow: 0 5px #666;
  transform: translateY(4px);

}
ul {
  list-style-type: none;
}
 .site-footer{
    font-family: "Moulpali";
    display: flex;
    color: rgb(236,255,237);
    justify-content: center;
}
#copyright-text{
  font-size: 36px;
} 
@media screen and (max-width: 600px){
  .labelc{
    height: 75px;
  }
  .get-involved{
    font-size:15px;
  }
  .titles{
    font-size: 30px;
  }
  .gallery-cell{
  grid-template-rows:2fr 2fr;
   grid-template-areas:
  " word word"
  "image image  ";
 

  }
.circle{
  height:400px;
  width:400px;
}
.space{
  width: 100px;
}
.site-footer{
  font-size:20px;
}
}