@font-face {
    font-family: 'dreamers_brush';
    src: url('dreamers_brush-dreamers.eot');
    src: url('dreamers_brush-dreamers.eot?#iefix') format('embedded-opentype'), url('dreamers_brush-dreamers.woff2') format('woff2'), url('dreamers_brush-dreamers.woff') format('woff'), url('dreamers_brush-dreamers.ttf') format('truetype'), url('dreamers_brush-dreamers.svg#dreamers_brushregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    overflow-x: hidden;
}

header {
    width: 100vw;
    height: 100vh;
    background-image: url(pexels-photo.jpeg);
    background-size: cover;
    transition: height 99999s;
    transition: width 99999s;
}

main {
    height: 200vh;
}

.title {
    font-family: "dreamers_brush";
    margin: 0;
    text-align: center;
    font-size: 30vh;
    max-width: 100vw;
    color: white;
    padding-top: 30vh;
}

#mountain {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border: 0;
    background-image: url(pexels-photo-mountain.png);
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 1) 95%), url(pexels-photo-mountain.png);
    background-size: cover;
    position: absolute;
    transition: height 99999s;
    transition: width 99999s;
    top: 0;
    left: 0;
    z-index: 6;
}

.triangle-r {
    width: 0;
    height: 95vh;
    border-style: solid;
    border-width: 0 0 100px 100vw;
    border-color: transparent transparent white black;
}

header .particles-js-canvas-el {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}