@font-face {
    font-family: 'function_pro';
    src: url('../fonts/FunctionPro-Book-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'function_pro';
    src: url('../fonts/FunctionPro-Demi-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

html, body {
    font-family: 'function_pro', sans-serif;
    font-size: 18px;
}

a:not([class]), .text-underline-hover {
    text-decoration: none;
}

a:not([class]):hover, .text-underline-hover:hover {
    text-decoration: underline;
}

.nav-link.active > span {
    border-bottom: 3px solid rgb(47,141,237);
}

.http-status {
    font-size: 8rem;
}

#iframewin {
    display: block;
    width: 100%;
    height: 620px;
}

.cardimg {
    width: 15%
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(145, 155, 160, 0.5);
    z-index: 1000;
    backdrop-filter: blur(4px);
}

#overlay > div {
    width: 5rem;
    height: 5rem;
    border-width: 0.5rem;
}

.code-div {
    font-size: 14px;
    font-family: 'Ubuntu Mono', monospace;
    white-space: nowrap;
    overflow: auto
}

.tumbleweed {
    display: none;
    position: absolute;
    top: 30%;
    left: -300px;
    width: 300px;
    height: 300px;
    animation: bounce linear 3s infinite;
    opacity: 0.5;
}
@keyframes bounce {
    0% {
        transform: translateX(-300px) translateY(0) rotate(0deg);
    }
    20% {
        transform: translateX(-300px) translateY(0) rotate(calc(0.2 * 360deg));
    }
    40% {
        transform: translateX(0vw) translateY(0) rotate(calc(0.4 * 360deg));
    }
    50% {
        transform: translateX(25vw) translateY(-40px) rotate(calc(0.5 * 360deg));
    }
    60% {
        transform: translateX(50vw) translateY(0) rotate(calc(0.6 * 360deg));
    }
    80% {
        transform: translateX(80vw) translateY(-80px) rotate(calc(0.8 * 360deg));
    }
    100% {
        transform: translateX(calc(100vw + 300px)) translateY(0) rotate(360deg);
    }
}