@font-face {
    font-family: RobotoCondensed;
    src: url(assets/fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf);
}

@font-face {
    font-family: LilitaOne;
    src: url(assets/fonts/Lilita_One/LilitaOne-Regular.ttf);
}

@font-face {
    font-family: Cousine;
    src: url(assets/fonts/Cousine/Cousine-Regular.ttf);
}

@font-face {
    font-family: Jersey10;
    src: url(assets/fonts/Jersey_10/Jersey10-Regular.ttf);
}

@font-face {
    font-family: Dogica;
    src: url(assets/fonts/dogica/TTF/dogica.ttf);
}

@font-face {
    font-family: KA;
    src: url(assets/fonts/karmatic_arcade/ka1.ttf);
}

@font-face {
    font-family: Rubik;
    src: url(assets/fonts/Rubik/Rubik-VariableFont_wght.ttf);
}

/* general styling */
body {
    background-color: #DABBED;
    margin: 0px;
    font-size: 130%;
}

h1,h3,h4,h5 {
    font-family: Jersey10;
    letter-spacing: 3px;
}

.heading {
    font-family: Jersey10;
    font-size: 150%;
}

h1 {
    letter-spacing: .05em;
}

h4 {
    color: #3A701F;
}

p, li {
    font-family: Rubik;
    /* font-size: 0.6em; */
    line-height: 1.4;
    /* letter-spacing: 1.5px; */
}

a {
    text-decoration: none;
    color: black;
}

hr {
    /* background-color: #EBDFF2; */
    background-color: #DABBED;
    height:1px;
    border:none;
}

li {
    list-style-type: "☆ ";
}

/* nav bar */
#navigation {
    text-align: right;
    position: fixed;
    top: 0px;
    background-color: #DABBED;
    width: 100%;
    height: 64px;
    z-index: 2;
    border-bottom: 5px solid black;
}

#navigation a {
    color: black;
    font-size: 20px;
    text-decoration: none;
    transition-property: color, font-size;
    transition-duration: 0.5s;
}

#navigation a:hover {
    color: #9b9b9b;
    font-size: 27px;
}

#navigation h3 {
    display: inline-block;
    margin: 5px;
    margin-right: 20px;
}

#navigation #inner {
    width: 50%;
    margin: auto;
}

#left-align {
    float: left;
    text-align: left;
}

#left-align a {
    font-size: 48px;
    transition-property: color, font-size;
    transition-duration: 0.5s;
}

#left-align a:hover {
    color: #9b9b9b;
    font-size: 58px;
}

#inner #left-align + h3 {
    margin-top: 15px;
}

/* classes */
.main {
    margin:auto;
    margin-top: 50px;
    padding: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 60%;
    background-color: white;
    border: 5px solid black;
    border-radius: 20px;
}

.main a {
    color: #ac6fd2;
}

.footer {
    bottom: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #DABBED;
}

.subtitle {
    font-size: 0.6em;
}

.footericon {
    display: inline-block;
    width: 2em;
    padding: 4px;
    background-color: #3A701F;
    border-radius: 5px;
}

.footer-inner {
    width: 50%;
    margin: auto;
}