body{
    background: #F8F8F8;
    max-width: 3000px;
    min-width: 250px;
    margin: 0% 8% 0% 8%;
}

header{
    background: #F8F8F8;
    border-top: 3px solid #1E3163;
    border-bottom: 3px solid #1E3163;
    padding: 4px;
    margin: 25px 4px 4px 4px;
}

footer{
    margin: 4px 4px 25px 4px;
    border-top: 3px solid #1E3163;
}

.block{
    background: #F8F8F8;
    border-top: 2px solid #1E3163;
    border-bottom: 2px solid #1E3163;
    padding: 2px;
    margin: 10px;
}

.lblock{
    background: #F8F8F8;
    border-top: 2px solid #1E3163;
    border-bottom: 2px solid #1E3163;
    padding: 2px;
    margin: 10px;
}

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.small{
    font-size: .9em;
    list-style-type: none;
}

p{
    font-size: 1.2em;
    margin:6px;
    padding: 6px;
    font-family: "Helvetica", sans-serif;
    text-align: justify;
}

.block p{
    animation-name: fadein;
    animation-duration: 800ms;
    animation-timing-function: ease-in;
}

h1 {
    font-size: 2.4em;
    margin: 0px;
    padding: 0% 15% 0% 15%;
    font-family: serif;
    font-weight: 400;
    animation-name: fadein;
    animation-duration: 400ms;
    animation-timing-function: ease-out;
}


h2 {
    font-size: 1.6em;
    margin: 5px;
    padding: 15px 15px 0px 15px;    
    font-family: serif;
    font-weight: 500;
}

.block h2{
    animation-name: fadein;
    animation-duration: 400ms;
    animation-timing-function: linear;
}


h3{
    font-size: 1em;
    margin: 3px;
    padding: 12px 12px 0px 12px;
    font-family: "Helvetica", sans-serif;
}

.block h3{
    animation-name: fadein;
    animation-duration: 400ms;
    animation-timing-function: ease-in;
}


#subtext{
    font-size: 1em;
    font-family: "Charm", cursive;
    font-weight: 100;
    font-style: oblique;
    margin: 0% 12% 0% 12%;
    animation-name: fadein;
    animation-duration: 600ms;
    animation-timing-function: ease-in;
}

.credentials{
    font-size: .9em;
    text-align: left;
    padding: 2px 2px 2px 10px;
    margin: 1px;
}

a{
    font-size: 1em;
    color: #2D46B9;
}

a:hover{
    color: #F037A5;
}


ul{
    padding: 0px 5px 5px 30px;
    margin: 6px;
}

li{
    font-family: "Helvetica", sans-serif;
    font-size: 1em;
    padding: .2em;
    margin: 2px;
}

.navigation li{
    font-size: 1.1em;
    font-variant: small-caps;
    list-style-type: square;
    margin: 0;
}

.small li{
    padding: .1em;
    margin: 1px;
}

.block li{
    animation-name: fadein;
    animation-duration: 600ms;
    animation-timing-function: ease-in;
}

li:hover{
    color: rgb(12, 12, 24);
    font-weight: 100;
    transform: translate(6px, 0px)
}


img {
    border: 3px solid #1E3163;
    margin: 10px 10% 5px 10%;
}

 

@keyframes fadein { 
    0% { opacity: 0;}
    100%   { opacity: 1;}
}


#IPA:after{
    content: "IPA (ROM.): [anˈdrej munˈte̯anu]"
}

#IPA:hover:after{
    content: "IPA (ENG.): [ˈɑndɹeɪ̯ mənˈtænu]"
}

#russian:after{
    content: "Russian (nat.)";
}

#russian:hover:after{
    content: "Русский";
}

#romanian:after{
    content: "Romanian (nat.)"
}

#romanian:hover:after{
    content: "Română"
}

#latin:after{
    content: "Latin (inter.)"
}

#latin:hover:after{
    content: "Latina"
}

#japanese:after{
    content: "Japanese (inter.)"
}

#japanese:hover:after{
    content: "日本語";
    font-size: .50em;
}

#greek:after{
    content: "Ancient Greek (beg.)"
}

#greek:hover:after{
    content: "Ἑλληνική"
}

#oe:after{
    content: "Old English (beg.)"
}

#oe:hover:after{
    content: "Englisc"
}

#ocs:after{
    content: "Old Church Slavonic (beg.)"
}

#ocs:hover:after{
    content: "Словѣньскъ"
}

#orcid:before{
    content: "";
    display: block;
    background: url(ORCID_iD.svg);
    width: 16px;
    height: 16px;
    float: left;
    margin: 0 6px 0 0;
}

#osf:before{
    content: "";
    display: block;
    background: url(osf_icon.svg);
    width: 16px;
    height: 16px;
    float: left;
    margin: 0 6px 0 0;
}