@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,400;1,300;1,400&display=swap');
body {
    background: #222;
}

.main-menu-flexbox {
    display: flex;
    align-items: center;
    width: 16em;
    margin: 0 auto;
    flex-direction: column;
    font-size: 5vw;
}
@media(min-width:20cm) {
    .main-menu-flexbox{
        font-size:1cm
    }
}
.main-text-container {
    width: 18em;
    font-size: 5vw;
    margin: 6pt auto;
    border-radius: .5em .5em .5em .5em;
}
@media(min-width:30cm) {
    .main-text-container{
        font-size: 1cm
    }
}
.main-textbox {
    padding: 4pt 2pt 4pt 2pt;
    margin-left: 4pt;
    margin-right: 4pt;
    color: #fff;
}

.main-textbox a:link, .main-textbox a:visited {
    text-decoration:none;
    color: #fff;
    padding: 0px 4pt 0px 4pt;
    display: inline-block;
    border: solid 1pt;
}

.main-textbox a:hover {
    color: #222;
    background: #fff;
}

.main-menu-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 3em;
    width: 100%;
    margin-bottom:.25cm;
    background-image: linear-gradient(90deg,
        #2220 0%,
        #2220 50%,
        #fff 55%,
        #fff 100%);
    background-size: 220%;
    transition: background-position .5s ease-in-out
}
a.main-menu-row:link {
    text-decoration:none;
}
a.main-menu-footer-row:link, a.main-menu-footer-row:visited {
    text-decoration:none;
    color: #fff
}
.main-menu-footer-row {
    font-family: "JetBrains Mono", sans-serif;
    font-size: 0.5em;
    font-weight: 300;
    margin-top: auto;
}
@media(min-width: 35cm) {
    .main-menu-footer-row {
        position: fixed;
        right: 0.25em;
        bottom: 0.1em;
    }
}
.main-menu-icon {
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
    transition: width .5s ease-in-out, opacity .2s ease-in-out
}
.main-menu-icon > svg {
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    fill: #eee;
    stroke: #fff;
}

.main-menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    font-family: 'JetBrains Mono', sans-serif;
    font-weight: 100;
    /*border-radius:
     * .45em
     * .45em
     * .45em
     * .45em;*/
    transition: color .5s ease-in-out, background-color .5s ease-in-out, background-position .5s ease-in-out;
    color: #fff
}

.menu-label-textbox {
    font-size: 2em;
}
.main-menu-row:hover .main-menu-icon {
    width: 0em;
    opacity: 0;
}
.main-menu-row:hover .main-menu-label {
    color: #333;
}
.main-menu-row:hover {
    background-position: 100% 100%;
}

.name-part {
    font-size: 2em;
}
.name-start{
    overflow:hidden;
    white-space: nowrap;
    animation: name-start-grow 2s ease-in-out 2s both;
}
.name-mid {
    font-weight:400
}
.name-end{
    overflow:hidden;
    animation: name-end-shrink 2s ease-in-out 1s both;
}
.widthshrink {
    animation: widthshrink 2s ease-in-out 1s both
}
@keyframes widthshrink {
    0% {
        width: 3em;
        opacity:1
    }
    100% {
        width: 0em;
        opacity:0
    }
}
@keyframes name-start-grow {
    0% { max-width: 0em }
    100% { max-width: 10em }
}
@keyframes name-end-shrink {
    0% { max-width: 4em }
    100% { max-width: 0em }
}

.resume-section-header {
    color: #222;
    background-color: #fff;
    font-family: 'JetBrains Mono', sans-serif;
    font-weight: 300;
    font-size: 24pt;
    margin: 0 0 0;
}
.resume-section-header:before {
    content: "# "
}

.resume-entry-title {
    font-family: 'JetBrains Mono', sans-serif;
    font-weight: 400;
    font-size: 16pt;
    margin: 0;
}
.resume-entry-title:before{
    content: "## "
}
.resume-entry-subtitle {
    color: #fff;
    font-family: 'JetBrains Mono', sans-serif;
    font-weight: 400;
    font-size: 14pt;
    font-style: italic;
    margin: 0;
}
.resume-entry-detail {
    font-family: 'JetBrains Mono', sans-serif;
    font-weight: 400;
    font-size: 12pt;
    margin-top: 0pt;
}

ul { list-style-type: "- "; }

.general-text{
    font-size: 12pt;
    font-family: "JetBrains Mono", sans-serif;
}
.general-header {
    margin-top: 0pt;
    margin-bottom: 6pt;
    font-size: 24pt;
    color: #222;
    background-color: #fff
}
.general-header:before{
        content: "# "
}