html, body {
    height: 100vh;
    width:  100%;
}

body {
    background:  #000000;
    color:       #888;
    font-family: "Barlow", sans-serif;
    font-size:   18px;
    position:    relative;
}

a { text-decoration: none !important; }

a:link, a:visited {
    color: #dd0000;
}

a:active, a:focus, a:hover {
    color: #ff0000;
}

.cover, #snow {
    height:   100%;
    left:     0;
    overflow: hidden;
    position: absolute;
    top:      0;
    width:    100%;
}

.cover {
    background-attachment: fixed;
    background-color:      #000;
    background-image:      url('/img/cover.jpg');
    background-position:   center;
    background-repeat:     no-repeat;
    background-size:       cover;
    opacity:               0.85;
    z-index:               0;
}

#snow {
    z-index: 25;
}

.credits {
    background: rgba(0, 0, 0, .8);
    bottom:     20px;
    color:      #888;
    font-size:  12px;
    padding:    5px 10px;
    position:   absolute;
    right:      20px;
    z-index:    50;
}

.credits a { color: #fff; }

.layout__wrapper {
    background: rgba(0, 0, 0, 0.8);
    clip-path:  polygon(
        0% 0%,
        calc(100% - 50px) 0%,
        100% 50px,
        100% 100%,
        50px 100%,
        0% calc(100% - 50px)
    );
    position:   relative;
    z-index:    100;
}

header img {
    background: #fff;
    border:     5px solid #dd0000;
    height:     150px;
    padding:    5px;
    width:      auto;
}

header h1 {
    color:          #ffffff;
    font-family:    "Stalinist One", cursive;
    font-size:      24px;
    text-transform: uppercase;
}

@media (min-width: 992px) {
    main {
        max-width: 30vw;
    }
}

main a {
    color: #fff !important;
}

.bs-popover-auto[x-placement^=bottom]>.arrow::after,
.bs-popover-bottom > .arrow::after {
    border-bottom-color: #dd0000;
}

.popover-body {
    background:     #dd0000;
    color:          #fff;
    font-family:    "Barlow", sans-serif;
    font-size:      14px;
    padding:        .25rem .5rem;
    text-transform: uppercase;
}