.blogs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1vh;
}

.blogcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 25vh; /*not temp, this just clears it up*/
  width: 95%;
  border-radius: 3.5vh;
  border: 0.1vh solid var(--highlight);
  box-shadow: 0px 0px 2vh var(--highlightshadow);
  background-color: rgba(11, 11, 11, 0.1);
  margin: 0 auto;
  overflow: hidden;
}

.blogcontainervideo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  height: 48vh;
  border-radius: 3.5vh;
  border: 0.1vh solid #79c5c2;
  box-shadow: 0px 0px 2vh var(--highlightshadow);
  background-color: rgba(11, 11, 11, 0.1);
  margin: 0 auto;
  overflow: hidden;
}

.blogcontainer:hover .blogheader4 img {
  opacity: 0.7;
}

.blogcontainer:hover .blogheader2darken img {
  opacity: 0.7;
}

.blogcontainervideo:hover .blogheader4 img { /*ditto, for video*/
  opacity: 0.7;
}

.blogcontainervideo:hover .blogheader2darken img {
  opacity: 0.7;
}

.blogheader {
  display: flex;
  align-items: center;
  min-height: 8vh;
  width: 100%;
  background-blend-mode: darken;
  background-color: var(--background);
  background-image: url('images/gradientheading.png');
  background-size: 100% 100%;
  padding: 0.25vh;
  overflow: hidden;
}

.blogheader img {
  opacity: 0.5;
}

.blogheader1 { /*spacer*/
  min-width: 1%;
  height: 100%;
}

.blogheader2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 4vh;
  height: 100%;
}

.blogheader2kam {
  height: 4vh;
  width: 100%;
  background-image: url('/images/kam.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  mix-blend-mode: exclusion;
}

.blogheader2kam img{
  opacity: 1;
}

.blogheader2darken {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5vh;
  width: 3.5vh;
  background-color: var(--background);
  border-radius: 0.5vh;
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box; /*stops padding changing it i guess*/
  padding: 0.3vh;
}

.blogheader2darken img {
  width: 100%;
  height: 100%;
}

.blogheader3 { /*spacer*/
  min-width: 0.75%;
  height: 100%;
}

.blogheader4 {
  min-width: 8vh;
  height: 8vh;
  object-fit: fill;
}

.blogheader4 img{ /*'station' style img*/
  width: 100%;
  height: 100%;
}

.blogheader5 { /*spacer*/
  min-width: 0.75%;
  height: 100%;
}

.blogheader6 { /*text*/
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 8vh;
  overflow-x: auto;
  overflow-y: hidden;
}
  
.blogheader6quote {
  width: 100%;
  height: 1.75vh;
  font-size: 1.75vh;
  font-family: blitzbold;
  line-height: 100%; /*to stop it going over*/
  white-space: nowrap;
}

.blogheader6title {
  width: 100%;
  height: 6.25vh;
  font-size: 6vh;
  font-family: blitzbold;
  line-height: 100%; /*to stop it going over*/
  white-space: nowrap;
}

.blogcontentpreview {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.blogcontentvideo {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.blogcontenttext {
  box-sizing: border-box;
  padding: 1vh;
  height: 100%;
  width: 75%;
  overflow-x: hidden;
  overflow-y: auto;
}

.blogcontentother {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  width: 25%;
}

.blogcontentprevideo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  height: 3vh;
  font-size: 1.75vh;
  line-height: 100%;
  margin-bottom: 0.5vh;
}

.blogtextprevideo {
  width: 100%;
  height: 2.5vh;
  padding-left: 1vh;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.blogdatevideo {
  text-align: right;
  height: 3vh;
  font-family: nindot;
  font-size: 1.5vh;
  color: green;
  mix-blend-mode: saturation;
  white-space: nowrap;
  text-shadow: none;
}

.blogvideo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-bottom: 2vh;
}

.blogvideo iframe {
  border-radius: 2.5vh;
  border: 0.1vh solid #79c5c2;
  box-shadow: 0px 0px 1vh var(--highlightshadow);
}

.blogdate {
  text-align: right;
  height: 35%;
  width: 100%;
  font-family: nindot;
  font-size: 1.5vh;
  color: green;
  mix-blend-mode: saturation;
  white-space: nowrap;
  text-shadow: none;
}

.blogbutton {
  box-sizing: border-box;
  width: 100%;
  height: 65%;
  border-radius: 7vh 7vh 0 7vh;
  border: 0.1vh solid var(--highlight);
  border-bottom: none;
  border-right: none;
  box-shadow: 0px 0px 2vh var(--highlightshadow);
  overflow: hidden; /*padding wont work due to method im using and allat, so this is pretty much as good as its gonna get*/
}

.blogbutton img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  mix-blend-mode: lighten;
}

.blogbutton:hover img {
  opacity: 1;
}

 @media (max-width: 1250px) { /*mobile*/
 
  .blogheader6 {
    font-size: 1.5vw;
    }
  }