@font-face{
    font-family:'orgon-medium';
    src:
        local('orgon-medium'),
        url("https://www.dafontfree.net/data/482/o/199679/Orgon-Medium.otf") format("opentype"),
        url("https://www.dafontfree.net/data/482/o/199679/Orgon-Medium.otf") format("truetype"),
        url("https://www.dafontfree.net/data/482/o/199679/Orgon-Medium.otf") format("woff")
}

body {
    background-color: #17181B;
    margin: 0px;
    padding: 0px;
}
.app-logo {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    display: flex
}
.app-logo svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    display: block; /* Removes extra space below SVG */
}
.app-name {
    position: absolute;
    font-family: 'orgon-medium', sans-serif;
    color: rgb(18,111,166);
    padding: 40px;
    height: 50%;
    top: 25%;
    left: 40%;
    animation: logo-name 10s ease-in-out;
}
.app-logo image {
    animation: logo-name 10s ease-in-out;
}
.app-name path {
    filter: drop-shadow(1px 1px 1px #0E1013)
}
.logo-svg {
    position: absolute;
    display: block;
    animation: logo-svg 7s ease-in-out;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 0%;
    transform: translateX(-35%) translateY(-32%) scale(0.26458);
    transform-origin: center;
}
.logo-svg path {
    stroke: rgba(49, 49, 68, 0.319);
    stroke-dasharray: 1200 1000;
}
.logo-svg path:not(#hand) {
    stroke-width: none;
    z-index: 100000;
    animation: logo-svg-shield 5s ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}
#hand {
    position: absolute;
    fill: url(#grad1);
    transform: scale(0.85) translateY(28%) translateX(5%);
    top: 50%;
    left: 50%;
    z-index: 1;
    transform-origin: top;
}
@keyframes logo-name {
    0% {
        opacity: 0
    }
    60% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes logo-svg {
    0% {
        transform: translate(-15%, -50%) scale(0.4);
    }
    60% {
        transform: translate(-15%, -50%) scale(0.4);
    }
    100% {
        transform: translate(-35%, -32%) scale(0.26458);
    }
}
@keyframes logo-svg-shield {
    0% {
        opacity: 0.5;
        transform: translateZ(30px) rotateZ(30deg) rotateX(50deg) rotateY(10deg) scale(2);
    }
    50% {
        transform: translateZ(-20px) rotateZ(-30deg) rotateX(-20deg) rotateY(-5deg) scale(0.7);
    }
    100% {
        opacity: 1;
        transform: translateZ(0px) rotateZ(0deg) rotateX(0deg) scale(1);
    }
}