:root{
  --primaryFont: "Outfit", sans-serif;

  --Blue500: hsl(215, 51%, 70%);
  --Cyan400: hsl(178, 100%, 50%);
  --Blue950-mainBG: hsl(217, 54%, 11%);
  --Blue900-cardBG: hsl(216, 50%, 16%);
  --Blue800-line: hsl(215, 32%, 27%);
  --White: hsl(0, 0%, 100%);
}

*,*::after,*::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body{
    min-height: 100vh;
}

body{
  background-color: var(--Blue950-mainBG);
  font-family: var(--primaryFont);
  font-size: 1.125rem;
  padding: 2rem 1rem;
  display: flex; 
  justify-content: center;
  align-items: center;
}
img{
  max-width: 100%;
  height: auto;
}
.container{  
  max-width: 25rem;
  width: 100%;
  background-color: var(--Blue900-cardBG);
  padding: 2rem;
  border-radius: 1.5rem;
}
.image_area{
  position: relative;
  cursor: pointer;

  
}
.main_image{
    border-radius: .75rem; 
    display: block; /* Prevent unwanted whitespace below image */
    
}
.overlay{
  /*
  background-color: var(--Cyan400);
  width: 100%;
  height: 100%;
  position: absolute; 
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
   border-radius: .75rem; 
   opacity: 0;
   visibility: hidden;*/
  
  background-color: var(--Cyan400);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: .75rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* optional: stops blocking click */
}
.hover_icon{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%); 
  opacity: 0;
  visibility: hidden;
 }
.image_area:hover .overlay{
  opacity: .4;
  visibility: visible;
}
.image_area:hover .hover_icon{
  opacity: 1;
  visibility: visible;
}

.header_area{
padding: 1.125rem 0;
}
.header_area h1{
  color: var(--White);
  font-size: 2rem;
  margin-bottom: 1.125rem;
  cursor: pointer;
}
.header_area h1:hover{
  color: var(--Cyan400);
}
.header_area p{
  color: var(--Blue500);
}
.icon{
  display: flex;
  justify-content: space-between; 
  font-size: .85rem;font-weight: normal;
  border-bottom: 1px solid var(--Blue800-line);
  padding-bottom: 1.125rem;
  margin-bottom: 1.125rem;
  
}
.ethereum{
  display: flex;
  align-items: center;
  color:var(--Cyan400);  
}
.ethereum h2{
  font-weight: normal;
  margin-left: .5rem;
}
.time{
  display: flex;
  align-items: center;
  color:var(--Blue500);   
}
.time h2{
  font-weight: normal;
  margin-left: .5rem;
}
.avatar{
  display: flex;  
  align-items: center;  
}
.avatar img{
width: 4rem;
border: 1px solid var(--White);
border-radius: 50%;

}
.avatar p{
  color: var(--Blue500);
  margin-left: .5rem;
}
.avatar p span{
  color: var(--White);
  cursor: pointer;
}
.avatar p span:hover{
  color: var(--Cyan400);
}
.avatar_photo{
  display: inline-block;

}

@media only screen and (max-width:37.5rem){
body{
  padding: 2rem 1rem;
}  
.container{
  width:96%;
  padding: 1rem;
  border-radius: 1rem;
}
}