body{
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Roboto Slab', serif;
    background-image: url("/assets/bg.jpg");
    background-repeat: repeat-y;
    background-size: cover;
}

.title{
    font-family: 'Bungee', cursive;
}

.font-size-xl{
    font-size: 3rem;
}

.bg-black{
    background-color: #000000;
}

.text-black{
    color:#000000 !important;
}

.text-shadow-2w{
    text-shadow: 2px 2px 0 #ffffff;
}

.text-shadow-2b{
    text-shadow: 2px 2px 0 #000000;
}

.logo{
    background-color: #000000;
    background-image: url("/assets/logo.svg");
    background-repeat: no-repeat;
    height: 120px;
}

.head-bg::before {
    content: " ";
    display: block;
    position: absolute;
    background-color: #f00;
    height: 11em;
    z-index: -1;
    -webkit-transform: rotate(2deg) translateY(-1.7rem) skewX(-6deg) skewY(0deg) translateX(50%);
    transform: rotate(2deg) translateY(-1.7rem) skewX(-6deg) skewY(0deg) translateX(50%);
    width: 50%;
}

.row-bg, .row-bg-2{
    position: relative;
}
.row-bg::before {
    content: " ";
    display: block;
    position: absolute;
    background-color: #f00;
    height: 140%;
    z-index: -1;
    -webkit-transform: rotate(1deg) translateY(-0.2em) translateX(-0.5em) skewX(9deg) skewY(-1deg);
    transform: rotate(1deg) translateY(-0.2em) translateX(-0.5em) skewX(9deg) skewY(-1deg);
    width: 110%;
}

.row-bg2::before {
    content: " ";
    display: block;
    position: absolute;
    background-color: rgba(0,0,0,.6);
    height: 110px;
    z-index: -1;
    -webkit-transform: rotate(1deg) translateY(-0.2em) translateX(-0.5em) skewX(-5deg) skewY(1deg);
    transform: rotate(1deg) translateY(-0.2em) translateX(-0.5em) skewX(-5deg) skewY(1deg);
    width: 56%;
}

.bg-orange{
    background-color: rgba(255, 112, 0, 0.7);
}

.bg-red{
    background-color: rgba(255, 0, 0, 0.71);
}