/* 
// color:
//      darkgreen   #18503d     rgb(24,80,61)     Text
//      greenblue   #c0e0c5     rgb(194,224,197)  Hover
//      yellow      #dae259     rgb(218,226,89)   Button background color
//      lightgreen  #ecf4e0     rgb(236,244,224)  Background color
//
// font:
//      Heading     Helvetica   600         SemiBold
//      Paragraph   Helvetica   400         Regular
//      Button      Helvetica   400         Bold
*/

body {
  background-color: #ecf4e0;
  color: #18503d;
}

h1,h2,h5 {
  font-family: "Helvetica", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #18503d;
}

p,li {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #18503d;
}

button {
  font-family: "Helvetica", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #18503d;
}

/* CLASS */
.greenblue {
  background-color: #c0e0c5;
}

.darkgreen {
  background-color: #18503d;
  box-shadow: 3px 3px 10px 1px #333;
}

.yellow {
  background-color: #dae259;
}

.lightgreen {
  color: #ecf4e0;
}

.text-darkgreen {
  color: #18503d;
}

.bg-blur {
  box-shadow: 0 0 20px 20px #c0e0c5;
}

.bg-darkgreen-gradient {
  background-color: rgba(24, 80, 61, 0.5);
  border-radius: 1rem 8rem 1rem 1rem;
  background-image: linear-gradient(to bottom left, #18503d, gray);
}

@media screen and (max-width: 576px){
  .bg-darkgreen-gradient {
    background-color: rgba(24, 80, 61, 0.5);
    border-radius: 1rem;
    background-image: linear-gradient(to bottom left, #18503d, gray);
  }
}

.top {
	/* set an offset to hide the button
	until 50px after scrolling from top*/
  --offset: 86px; 
	
	/* button position */
  position: sticky;
  bottom: 20px;  
  padding: 20px;
  margin-right: 50px;    

	/* 100vh = 1 screen vertical height */
  margin-top: calc(100vh + var(--offset));
}

.btn-yellow{
  /* button styling */
  text-decoration: none;
  padding: 10px;
  color: #18503d;
  background: #dae259;
  border-radius: 100px;
	white-space: nowrap;
  box-shadow: 3px 3px 10px 1px #333;
}

.btn-yellow:hover{
  background: #c0e0c5;
  color: #000;
}

.anchor{
  scroll-margin-top: 90px;
}

.image2{
  position: absolute;
  left: 25%;
  width: 25%;
  top: 210%;
}

.imgExpand:hover, .textExpand:hover{
  transform: scale(1.2);
}

.imgShadow{
  filter: drop-shadow(3px 3px 10px #333);
}

.cardShadow{
  box-shadow: 3px 3px 10px 1px #333;
}

.textShadow{
  text-shadow: 2px 2px 4px #222;
}

.card-title{
  color: #18503d;
}

#user-container {
  display: flex;
  flex-direction: column;
}

.active {
  border-radius: 20px;
  background-color: #18503d;
}

#comments-list {
  width: 60%;
  height: 80%;
  margin: 0 auto;
  position: relative;
}