body {
    background-color:#13070c;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight:lighter;
    color:beige;
    margin:10px;
}


img {
    border: 1px solid black;
    filter: grayscale(100%) sepia(50%) brightness(130%) invert(80%);
}


@font-face {
    src:url("fonts/bugs.woff");
    font-family:"bugs";
}

@font-face {
    src:url("fonts/bugs1.woff");
    font-family:"bugs1";
}

@keyframes coloreffect {
    0% {
        color:pink;
    }
    50% {
        color:blue;
    }
    100% {
        color:lime;
    }
}

@keyframes moveright {
    0% {
        position:relative;
    }
    100% {
        margin-right:2pt;
    }
}

@keyframes fade {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}


img {
    width:100%;
}

video {
    width:100%;
}




/* Container holding the image and the text */
div.imgcontainer {
    position:relative;
    text-align:center;
    color:white;
}

div.centered {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

div.bottom-left {
    position:absolute;
    bottom:5px;
    left:5px;
}

div.bottom-right {
    position:absolute;
    bottom:5px;
    right:5px;
}

div.top-left {
    position:absolute;
    top:5px;
    left:5px;
}

div.top-right {
    position:absolute;
    top:5px;
    right:5px;
}





/* Typography */


div.cap {
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size:10vw;
    line-height:10vw;
    text-align:center;
}

div.title {
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size:10vw;
    line-height:20vw;
    text-align: center;
}

div.largetext {
    font-size:355px;
    line-height:300px;
}

div.largetextvw {
    font-size:40vw;
    line-height:40vw;
    animation:coloreffect 5s infinite alternate linear;
}

div.mediumtext {
    font-size:36px;
    line-height:22px;
}

div.smalltext {
    font-size:14px;
    line-height:15px;
}

/* colors */

div.blacktext {
    color:black;
}

div.beigetext {
    color:beige;
}

div.bluetext {
    color:#226ce0;
}

div.greentext {
    color:#7fefbd;
}

div.pinktext {
    color:#f88dad
}

div.redbg {
    background-color:red;
}

div.bluebg {
    background-color:#226ce0;
}

div.whitebg {
    background-color:white;
}


/* layout */

div.width20 {
    width:20%;
}

div.width40 {
    width:40%;
}

div.width60 {
    width:60%;
}

div.width50 {
    width:50%;
}

div.width80 {
    width:80%;
}


div.width33 {
    width:33%;
}

div.width66 {
    width:66%;
}

div.width100 {
    width:100;
}


/* image types */

div.square {
    height:20vw;
    width:19vw;
    padding:1vw;
}

div.squarelarge {
    height:40vw;
    width: 39vw;
    padding:1vw;
}

div.portrait {
    height:20vw;
    width:14vw;
    padding:1vw;
}

div.portraitlarge {
    height:40vw;
    width:29vw;
    padding:1vw;
}

div.landscape {
    height:20vw;
    width:25.666666667vw;
    padding:1vw;
}

div.landscapelarge {
    height:40vw;
    width:59vw;
    padding:1vw;
}

div.wide {
    height:20vw;
    width:34.55555555555555vw;
    padding:1vw;
}

div.widelarge {
    height:40vw;
    width:70.111111111111vw;
    padding:1vw;
}

div.thumbnails img {
    width: 100%;
    height:100%;
}

div.mb10 {
    margin-bottom:10px;
}

div.mb20 {
    margin-bottom:20px;
}

div.mb50 {
    margin-bottom:50px;
}

div.mb200 {
    margin-bottom:200px;
}

div.mb30 {
    margin-bottom:30px;
}

div.textcentre {
    text-align:center;
}

div.centre {
    margin-left:auto;
    margin-right:auto;
}

div.mrrain {
    margin-right: 39.2vw;
}

div.mrborn {
    margin-right:5.1vw;
}

div.mrauto {
    margin-right:auto;
}

div.mlauto {
    margin-left:auto;
}


div.circle {
    width:500px;
    height:500px;
    border-radius:100%;
}

div.container {
    display:flex;
    flex-wrap:wrap;

}

div.flexright {
    justify-content: flex-end;
}


div.flexcenter {
    justify-content: center;
}

div.flexspace {
    justify-content: space-around;
}

div.break {
    flex-basis:100%;
    height:0;
}



div.move {
    animation:moveright 80ms infinite alternate linear;
}

div.fade {
    opacity:0;
    animation:fade 2s linear;
    animation-delay:5s;
}

div.caption {
    width: 100%;
    text-align: center;
    font-size: 75px;
}

div.endcre {
    width:79%;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:lighter;
}

div.endcre2 {
    width:20%;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:lighter;
}

div.endcre3 {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:lighter;
    text-align: center;
}


div.nav {
    font-family:"bugs1";
    font-weight:bolder;
    position: fixed;
    top:10px;
    left:0px;
    width: 100%;
    z-index: 1;
    text-align: center;
    font-size: 30px;
    color:lime;
    mix-blend-mode: exclusion;
}