#steamCanvas {
  position: fixed;
  right: 0%;
  bottom: 24.5%;
  width: 15vw;
  height: 33vh;
  pointer-events: none;
  z-index: 510;
  animation-name: setCanvas;
  animation-duration: 6.66s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;

}




#blogHero {
    min-height: 100vh;
    align-content: center;
}

#blogMain {
}

#blogVideo {
    position: fixed;
}

.blogSiteHeroText {
    align-content: center;
}

.blogPostCols img {
    filter: drop-shadow(16px 8px 2px #651f0e)
}

.blogLogo {
    filter: drop-shadow(2px 2px 64px var(--redcolor))
}

.blogLogo img {
    width: 90%!important;
    filter: grayscale(100%)brightness(10%);
}

.blogButtons {
    margin-top: 1rem;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--redcolor);
    color: white;
    font-size: 20px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 4px;
    font-family: "Univia";
    position: relative;
    z-index: 50;
    filter: drop-shadow(8px 8px 2px #651f0e)
}

#blogPostWrapper {
    position: relative;
    padding-top: 33vh;
}

.postWraps {
    max-width: 50vw;
    perspective: 50vw;
    transform: translateX(50%);
    margin-bottom: 25vh;
}


.blogPost {
    transform-origin: right center;
    transform: rotateY(-3.5deg)rotate(3deg)translateX(-5rem)skew(-3deg);
    will-change: transform;
    color: white;
    transition: ease;
}

.blogPostCols {
    align-content: center;
    position: relative;
}

.blogPostCols h2 {
       position: relative;
    z-index: 60;
}

.blogPostText {
    align-content: center;
    font-family: 'UniviaRegular';
    font-size: 1.25rem;
    position: relative;
    z-index: 60;
}

.blogPost h2 {
    color: var(--redcolor);
    font-family: 'Univia';
    font-size: 3rem;
    line-height: 2.75rem;
    /* filter: drop-shadow(8px 8px 2px #651f0e); */
}

#blogSiteTitle {
    font-family: 'Univia';
    font-weight: 600;
}

.blogSiteDescription {
    font-family: 'UniviaRegular';
    font-size: 1.25rem;
}



.postWraps img {
    width: 100%;
}


#blogHeroWrapper img {
    width: 100%;
}


#blogHeroWrapper {
    width: 25vw;
    transform: scale(1);
    display: flex;
}


#blogTheme {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 192;
    inset: 0;
    z-index: 314;
    pointer-events: none;
}

#blogTheme img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}



#blogContactTitle {
    font-family: 'Univia';
    color: var(--redcolor);
    text-align: center;
    margin-bottom: 2rem;
}


.portScan {
    position: relative;
}

.blogStreak {
    position: absolute;
    font-size: 24rem;
    transform: translate(-2rem,-12rem);
    color: rgba(1,1,1,1);
    font-family: 'Univia';
    filter: drop-shadow(2px 2px 64px var(--redcolor));
    opacity: 100%;
}



@media screen and (max-width: 991px) {
    #posts {
        max-width: 75%;
    }

    #blogTheme {
        display: none;
    }

    .postWraps img {
        width: 33%;
    }
    .blogPost {
        transform: translate(0,0);
    }
    .postWraps {
        max-width: unset;
        transform: translate(0,0);
        padding: 1rem
    }
    #steamCanvas {
        display: none;
    }
    .blogStreak {
        transform: translate(2rem,-12rem);
    }
    #blogPostWrapper {
        padding-top: 16vh;
    }

}

@media screen and (max-width: 576px) {

    #posts {
        max-width: 100%;
        padding: 1rem;
        padding-top: 25vh;
    }

    .blogPost {
        padding-bottom: 25vh;
    }
}









#reverseLogo {
    transform: rotateY(180deg)translateX(-0.5rem);
    animation-name: reverseAnimation;
    animation-timing-function: linear;
    animation-duration: 1.2s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}

#nonreverseLogo {
    transform: translateX(-0.5rem);
    animation-name: nonreverseAnimation;
    animation-timing-function: linear;
    animation-duration: 1.2s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}




@keyframes setCanvas {
    0% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 33%;
    }
}



@keyframes nonreverseAnimation {
    0% {
        transform: translateX(-200px);
        filter: grayscale(100);
        opacity: 25%;
    }

    40% {
        transform: translateX(-200px);
        filter: grayscale(100);
        opacity: 25%;
    }

    50% {

        transform: translateX(-0.5rem);
        filter: grayscale(100);
        opacity: 25%;
    }

    90% {
        transform: translate(-100px, 0px)rotateY(-278deg)scale(1.8);
    }

    100% {
        transform: translate(120px, 0px)rotateY(-360deg)scale(2);
        filter: grayscale(0);
        opacity: 75%;
    }
}

@keyframes reverseAnimation {
    0% {
        opacity: 0;
        transform: rotateY(0deg)translateX(-0.5rem);
    }

    40% {
        transform: rotateY(0deg)translateX(-0.5rem);
        opacity: 0;
    }

    50% {
        transform: rotateY(180deg)translateX(-0.5rem);

    }

    90% {
        opacity: 0;
    }

    100% {
        transform: translate(-120px, 0px)rotateY(-540deg)scale(2);
        opacity: 100%;
        filter: grayscale(100%)
    }
}