html,
body {
    font-family: "Archivo", sans-serif;

    width: 100%;
    height: 100%;

}

body {
    background: #f8f8f8;
}

body > .container, body > nav {
    position: relative;
    z-index: 10;
}

.background {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 100%;
}

.background .dark-blue-layer {
    position: relative;
    z-index: 2;

    height: 200px;

    -webkit-transform: rotate(-1.5deg) scale(2);
    transform: rotate(-1.5deg) scale(2);

    background: #278bc4;
}

.background .light-blue-layer {
    z-index: 1;

    height: 330px;

    -webkit-transform: rotate(1.5deg) scale(1.2);
    transform: rotate(1.5deg) scale(1.2);

    background: #4c97ca;
}

.sudo-mode {
    background: #f5cfd5 !important;
    margin-bottom: 60px;
}

.sudo-mode .background .dark-blue-layer {
    background: #b30000;
}

.sudo-mode .background .light-blue-layer {
    background: #ff4d2a;
}

.sudo-mode-alert {
    z-index: 9999;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 5px;
    background-color: hsl(0, 100%, 50%);
    width: 100%;
    animation: color_change 3s infinite;
}

@-webkit-keyframes color_change {
    from {
        filter: hue-rotate(0);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

@keyframes color_change {
    from {
        filter: hue-rotate(0);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

.card {
    border-color: #ffffff;
}