@font-face {
    font-family: 'Black-Chancery';
    src: url('./assets/BLKCHCRY.TTF');
}

@font-face {
    font-family: 'Magi';
    src: url('./assets/ALPMAGI.TTF')
}

html {
    height: 100vh;
}
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #001;
    color: #eee;
    margin: 0;
}

::-webkit-scrollbar {
    background-color: #002;
    width: 12px;
    border: 1px solid #007;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: #007;
    border-radius: 6px;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #00c;
}

#content {
    height: calc(100vh - 40px);
    width: 100%;
}
#content ul {
    padding-left: 0;
}

#menuBar {
    grid-area: menu;
    height: fit-content;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 5px black;
    font-family: "Black-Chancery";
    font-size: 1.5em;
    user-select: none;
    background-color: #004;
    z-index: 10;
}

#mainMenu {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: black;
}

.menuItem {
    padding: 5px 25px;
    box-shadow: 2px 0 2px inset black, -2px 0 2px inset black;
    background-color: #004;
}
.menuItem:first-child {
    box-shadow: 5px 0 5px inset black, -2px 0 2px inset black;
}
#mainMenu .menuItem:nth-last-child(2) {
    box-shadow: 2px 0 2px inset black, -5px 0 5px inset black;
}
.menuItem:hover {
    background-color: #00c;
}
.menuItem .runes {
    font-family: "Magi";
    font-size: 75%;
}
.menuItem .translating {
    font-family: "Magi";
    color: #0de;
    font-size: 75%;
}

.menuButton {
    display: none;
}

.expandedMenu {
    position: absolute;
    display: flex;
    min-width: fit-content;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    user-select: none;
    background-color: #007;
    font-size: 1.5em;
    height: 0;
    transition: height 0.25s;
    font-family: "Black-Chancery";
    z-index: 10;
    border-bottom: 2px solid ;
    border-left: 2px solid;
    border-right: 2px solid;
    border-color: #06d;
    border-radius: 5px;
}
.expandedMenu .menuItem {
    box-shadow: 0 3px 3px black;
    width: calc(100% - 50px);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.expandedMenu .menuItem:not(:first-child) {
    margin-top: 3px;
}

#socials {
    justify-self: flex-end;
    display: flex;
    flex-direction: row;
    height: 100%;
    background-color: #004;
}
.socials {
    box-shadow: 2px 0 2px inset black, -2px 0 2px inset black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    width: 60px;
}
.socials:hover {
    background-color: #00c;
}
#twitter {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMTcxLjUwNTQiCiAgIGhlaWdodD0iMTM5LjM3ODM5IgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjQgcjk5MzkiCiAgIHNvZGlwb2RpOmRvY25hbWU9IlR3aXR0ZXJfYmlyZF9sb2dvXzIwMTIuc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzNCIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6em9vbT0iMy43MjAwNTcxIgogICAgIGlua3NjYXBlOmN4PSIxMDEuMjk0MTMiCiAgICAgaW5rc2NhcGU6Y3k9IjUwLjE4MTE0MiIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEyODAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTYyIgogICAgIGlua3NjYXBlOndpbmRvdy14PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iLTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBmaXQtbWFyZ2luLXRvcD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIgLz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE3Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaWQ9ImxheWVyMSIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjgyLjMyMDUzLC0zOTYuMzA3MzQpIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMmFhOWUwIgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIGlkPSJwYXRoNSIKICAgICAgIGQ9Im0gNDUzLjgyNTkzLDQxMi44MDYxOSBjIC02LjMwOTcsMi43OTg5NyAtMTMuMDkxODksNC42ODk4MiAtMjAuMjA4NTIsNS41NDA0OSA3LjI2NDEzLC00LjM1NDU0IDEyLjg0NDA2LC0xMS4yNDk5MiAxNS40NzA2NywtMTkuNDY2NzUgLTYuNzk5MzQsNC4wMzI5NSAtMTQuMzI5Myw2Ljk2MDU1IC0yMi4zNDQ2MSw4LjUzODQxIC02LjQxNzc1LC02LjgzODc5IC0xNS41NjI0MywtMTEuMTExIC0yNS42ODI5OCwtMTEuMTExIC0xOS40MzE1OSwwIC0zNS4xODY5NiwxNS43NTM2NSAtMzUuMTg2OTYsMzUuMTg1MjUgMCwyLjc1NzgxIDAuMzExMjgsNS40NDM1OSAwLjkxMTU1LDguMDE4NzUgLTI5LjI0MzQ0LC0xLjQ2NzIzIC01NS4xNjk5NSwtMTUuNDc1ODIgLTcyLjUyNDYxLC0zNi43NjM5NiAtMy4wMjg3OSw1LjE5NjYyIC00Ljc2NDQzLDExLjI0MDQ4IC00Ljc2NDQzLDE3LjY4OTEgMCwxMi4yMDc3NyA2LjIxMTk0LDIyLjk3NzQ3IDE1LjY1MzMyLDI5LjI4NzE2IC01Ljc2NzczLC0wLjE4MjY1IC0xMS4xOTMzMSwtMS43NjU2NSAtMTUuOTM3MTYsLTQuNDAwODMgLTAuMDA0LDAuMTQ2NjMgLTAuMDA0LDAuMjk0MTIgLTAuMDA0LDAuNDQyNDggMCwxNy4wNDc2NyAxMi4xMjg4OSwzMS4yNjgwNiAyOC4yMjU1NSwzNC41MDI2NiAtMi45NTI0NywwLjgwNDM2IC02LjA2MTAxLDEuMjMzOTggLTkuMjY5ODksMS4yMzM5OCAtMi4yNjczLDAgLTQuNDcxMTQsLTAuMjIxMjQgLTYuNjIwMTEsLTAuNjMxMTQgNC40NzgwMSwxMy45Nzg1NyAxNy40NzIxNCwyNC4xNTE0MyAzMi44Njk5MiwyNC40MzQ0MSAtMTIuMDQyMjcsOS40Mzc5NiAtMjcuMjEzNjYsMTUuMDYzMzUgLTQzLjY5OTY1LDE1LjA2MzM1IC0yLjg0MDE0LDAgLTUuNjQwODIsLTAuMTY3MjIgLTguMzkzNDksLTAuNDkyMjMgMTUuNTcxODYsOS45ODQyMSAzNC4wNjcwMywxNS44MDk0IDUzLjkzNzY4LDE1LjgwOTQgNjQuNzIwMjQsMCAxMDAuMTEzMDEsLTUzLjYxNTI0IDEwMC4xMTMwMSwtMTAwLjExMzg3IDAsLTEuNTI1NTQgLTAuMDM0MywtMy4wNDI1MSAtMC4xMDIwNCwtNC41NTI2MSA2Ljg3Mzk0LC00Ljk1OTk1IDEyLjgzODkxLC0xMS4xNTY0NiAxNy41NTYxOCwtMTguMjEzMDUgeiIgLz4KICA8L2c+Cjwvc3ZnPgo=");
}
#bluesky {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogbm9uZTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS40MDY1OTM0MDY1OTM0MDE2IDEuNDA2NTkzNDA2NTkzNDAxNikgc2NhbGUoMi44MSAyLjgxKSI+Cgk8cGF0aCBkPSJNIDE5LjUwOSAxMC43MTIgQyAyOS44MjcgMTguNDU5IDQwLjkyNSAzNC4xNjUgNDUgNDIuNTk0IGMgNC4wNzUgLTguNDI4IDE1LjE3MyAtMjQuMTM1IDI1LjQ5MiAtMzEuODgyIEMgNzcuOTM3IDUuMTIzIDkwIDAuNzk4IDkwIDE0LjU2IGMgMCAyLjc0OCAtMS41NzYgMjMuMDg4IC0yLjUgMjYuMzkgYyAtMy4yMTMgMTEuNDggLTE0LjkxOSAxNC40MDggLTI1LjMzMiAxMi42MzYgQyA4MC4zNyA1Ni42ODQgODUgNjYuOTQ1IDc1IDc3LjIwNiBjIC0xOC45OTEgMTkuNDg4IC0yNy4yOTYgLTQuODkgLTI5LjQyNSAtMTEuMTM2IGMgLTAuMzkgLTEuMTQ1IC0wLjU3MyAtMS42ODEgLTAuNTc1IC0xLjIyNSBjIC0wLjAwMyAtMC40NTYgLTAuMTg1IDAuMDggLTAuNTc1IDEuMjI1IGMgLTIuMTI4IDYuMjQ2IC0xMC40MzMgMzAuNjI1IC0yOS40MjUgMTEuMTM2IEMgNSA2Ni45NDUgOS42MyA1Ni42ODMgMjcuODMyIDUzLjU4NiBDIDE3LjQxOCA1NS4zNTggNS43MTIgNTIuNDMgMi41IDQwLjk1IEMgMS41NzYgMzcuNjQ4IDAgMTcuMzA4IDAgMTQuNTYgQyAwIDAuNzk4IDEyLjA2MyA1LjEyMyAxOS41MDkgMTAuNzEyIEwgMTkuNTA5IDEwLjcxMiB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigwLCAxMzMsIDI1NSk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9nPgo8L3N2Zz4=");
}
#email {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTYwLTE2MHEtMzMgMC01Ni41LTIzLjVUODAtMjQwdi00ODBxMC0zMyAyMy41LTU2LjVUMTYwLTgwMGg2NDBxMzMgMCA1Ni41IDIzLjVUODgwLTcyMHY0ODBxMCAzMy0yMy41IDU2LjVUODAwLTE2MEgxNjBabTMyMC0yODBMMTYwLTY0MHY0MDBoNjQwdi00MDBMNDgwLTQ0MFptMC04MCAzMjAtMjAwSDE2MGwzMjAgMjAwWk0xNjAtNjQwdi04MCA0ODAtNDAwWiIvPjwvc3ZnPg==");
}

@media only screen and (orientation: portrait) {
    #content {
        height: calc(100vh - 30px);
    }
    #menuBar {
        position: fixed;
        font-size: 1.2em;
        width: 0;
        max-width: 100%;
        transition: width 0.25s;
        overflow: hidden;
    }
    .menuItem {
        padding: 5px 15px;
    }
    .expandedMenu .menuItem {
        width: calc(100% - 30px);
    }
    .menuItem .runes {
        font-size: 65%;
        line-height: 200%;
        vertical-align: bottom;
    }
    .menuItem .translating {
        font-size: 65%;
        line-height: 200%;
        vertical-align: bottom;
    }
    
    .menuButton {
        display: block;
        background-color: #007;
        background-size: cover;
        background-repeat: no-repeat;
        font-family: "Black-Chancery";
        font-size: 1.25em;
    }
    #menuExpand {
        position: fixed;
        height: 28px;
        width: 125px;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjRkZGIj48cGF0aCBkPSJNNTA0LTQ4MCAzMjAtNjY0bDU2LTU2IDI0MCAyNDAtMjQwIDI0MC01Ni01NiAxODQtMTg0WiIvPjwvc3ZnPg==");
        background-position: 100px -1px;
        background-size: auto 30px;
        padding-top: 2px;
        padding-left: 5px;
    }
    #menuShrink {
        height: 24px;
        width: 24px;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjRkZGIj48cGF0aCBkPSJNNTYwLTI0MCAzMjAtNDgwbDI0MC0yNDAgNTYgNTYtMTg0IDE4NCAxODQgMTg0LTU2IDU2WiIvPjwvc3ZnPg==");
        background-size: cover;
        background-position-y: center;
        padding-left: 0;
    }
    
    .expandedMenu {
        font-size: 1.2em;
    }

    #socials {
        display: none;
    }
}