.blogNavLink{
  color:red;
  font-weight: bold;
}

body{
  font-family:roboto;
  background-color: rgb(33, 33, 33);
}

p{
  margin:0px;
}


.blogHeaderImageWrapper{
  display:flex;
  justify-content: center;
  margin-top:3.5vw;
  
}

.blogHeaderImage{
  width:100%;
  height: 30vw;
}

.blogSectionWrapper{
  display:flex;
  flex-direction: column;
  width:100%;
  top:0vw;
  align-items: center;
  margin: -16vw 0 0 0;
}



.blogWrapper{
  display:flex;
  justify-content: center;
  border-style: solid;
  border-radius:2vw;
  border-width: 2px;
  box-shadow: 3px 3px 8px darkgray;
  width:70%;
  margin-bottom:1vw;
}



.blogDateWrapper{
  display:none;
  border-top-left-radius:2vw;
  border-bottom-left-radius: 2vw;
  background-color: blue;
  width:10%;
  color:white;
  font-size: 2vw;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left-color: lightgray;
  border-style: solid;
  border-width: 2px;
}

.blogContentWrapper{
  display:flex;
  flex-direction: column;
  margin:0;
  width:100%;

}


.blogTitleWrapper{
  display:flex;
  height:10vw;
  border-top-right-radius: 2vw;
  border-top-left-radius: 2vw;
  background-color: gray;
  
  border-color:lightgray;
  border-style:solid;
  border-width:2px;
  align-items: center;
  height:auto;
  padding:2vw 1vw;
}

.blogTitleWrapper h1{
  font-size:1.6em;
}


.blogBodyWrapper{
  display:flex;
  flex-direction:column;
  border-bottom-right-radius: 2vw;
  border-bottom-left-radius: 2vw;
  background-color: lightgray;
  padding: 2vw 2vw;
  font-size:1em;
}

.backToBlogsLink{
  display:flex;
  color:white;
  justify-content:center;
  width:100%;
  margin-bottom:5vw;
  font-size: 1.5vw;
}



@media(min-width:801px) and (max-width:1000px){
  .blogHeaderImageWrapper{
    margin-top:6vw;
  }

  .backToBlogsLink{
    margin-top:3vw;
    margin-bottom:5vw;
    font-size: 3.5vw;
    }
}


@media(min-width:601px) and (max-width:800px){
  .blogDateWrapper{
    width:20%;
    font-size: 4.0vw ;
  }

  .blogHeaderImageWrapper{
    margin-top:10vw;
  }

  .backToBlogsLink{
  margin-top:3vw;
  margin-bottom:5vw;
  font-size: 3.5vw;
  }
}






@media(max-width:600px){
  .blogHeaderImageWrapper{
    margin-top:14vw;
  }

  .blogWrapper{
    width:90%;
  }

  .backToBlogsLink{
    margin-top:5vw;
    margin-bottom:5vw;
    font-size: 5.5vw;
  }

}