@font-face { font-family: "[kindergarten]"; src: url("kindergarten.ttf") format("opentype"); } 
body{
    margin:0 auto;
    background-image:url(/blog/images/bg.png);
    background-size:100vw 100dvh;
    font-family: "kindergarten", monospace;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
}

main{
    background-image: url(/blog/images/mainbg.jpg);
    background-size:cover;
    background-blend-mode:multiply;
    width: max(50vw);
    margin: 0 auto;

}

article{
    padding:min(2.5em,8%);
    background-image:url(/blog/images/articlebg.png);
    background-size:100% 100%;
    margin:2vh auto;
    width:30vw;
}

article h1{
    color:orange;
}
article p{
    color:blue;
    font-size: 1.2rem;
}

article img{
    max-width:30vw;
}

article video{
    max-width:30vw;
}

article a:hover{
    background-color: yellow;
}

header{
    text-align: center;
    width: max(50vw);
    margin: 0 auto;
    padding-bottom:1vh;
    margin-bottom:1vh;
    margin-top:-2vh;
    color:yellow;
    background-color: rgba(0, 58, 165, 0.514);

}

header a{
    color: yellow;
    background-color: blue;
    border:1px solid yellow;
    padding:3px;
}

header a:hover{
    background-color: cyan;
}

header img{
    width:30vw;
}

footer{
    text-align: center;
    color:yellow;
}
    @media only screen and (max-width: 800px) {

    main{
        width: 100vw;
    }    
    header{
        width: 100vw;
    }

    header img{
    width:100vw;
    }
    article{
        width:85vw;
    }
    article img {
        max-width:60vw;
        height:auto;
    }    
    article video {
        max-width:50vw;
        height:auto;
    }


    }