*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background-color: rgba(51,51,51,100);
}

a {
    color: #00AA00;
    text-decoration: none;
}

    a:visited {
        color: #00AA00;
        text-decoration: none;
    }
    a:hover {
        color: #5400A8;
        text-decoration: none;
    }

#logo_wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    visibility: hidden;
    width: 608px;
    max-width: 80%;
    animation: move_to_corner 0.5s ease forwards 3.75s;
}

#logo_wrapper_shrunk {
    position: absolute;
    top: 0;
    left: 0;
    width: 486px;
    padding: 10px 10px;
    visibility: visible;
}

#logo {
    fill: none;
    
}

    #logo > path {
        stroke: #0f0;
        stroke-width: 2px;
    }

#tag {
    color: #fff;
    height: 30px;
    text-align: right;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 2.5s;
}

#tag_no_anim {
    color: #fff;
    height: 30px;
    text-align: right;
    opacity: 100;
}

#separator {
    visibility: visible;
    background-color: #0A0;
    position: absolute;
    width: 0px;
    height: 3px;
    top: 120px;
    left: 50%;
    transform: translate(-50%,0);
}

#wrapper {
    visibility: collapse;
    background-color: #fff;
    position: absolute;
    width: 100%;
    min-height: 100%;
    height:0;
    top: 124px;
    left: 0;
    opacity: 0;
    padding-left: 10px;
}

.h {
    color: #548841;
    font-size: 1.5em;
    margin-top: 10px;
}

nav {
    border-bottom: 1px solid black;
}
    nav a{
        color:#00AA00;
    }

.crumbs ol {
    list-style-type: none;
    padding-left: 0;
}

.crumb {
    display: inline-block;
}

    .crumb::after {
        display: inline-block;
        color: #000;
        content: ' | ';
        font-size: 80%;
        font-weight: bold;
        padding: 0 3px;
    }


@keyframes line-anim {
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes move_to_corner{
    to {
        top: 10px;
        left: 10px;
        transform: translate(-12.5%, -12.5%) scale(0.75,0.75);
    }
}

@keyframes separator_spread {
    to {
        width: 100%;
    }
}

@keyframes wrapper_fadeIn {
    0% {
        visibility: collapse;
        opacity: 0;
        height: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
        height: auto;
    }
}