@font-face {
    font-family: 'Crimson Text';
    src: url('../fonts/CrimsonText-Regular.ttf');
}

@font-face {
    font-family: 'Patua One';
    src: url('../fonts/PatuaOne-Regular.ttf');
}

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

body, html {
    color: #000000;
    background: #FFFFFF;
    padding: 0;
    margin: 0;
}

#top-bar {
    position: fixed;
    display: flex;
    width: 100%;
    height: 50pt;
    top: 0;
    overflow: hidden;
    z-index: 3;
    font-family: 'Patua One', cursive;
    color: #000000;
    background: #EEEEEE;
}

#icon-top-bar {
    float: left;
    width: 50pt;
    height: 100%;
}

#icon-img-top-bar {
    height: 100%;
}

#top-bar-title {
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    margin: auto 0;
    font-size: 1.5em;
}

#top-bar-title p {
    margin: auto;
    text-align: left;
}

#page-content {
    font-family: 'Crimson Text', serif;
    font-size: 21pt;
    position: absolute;
    top: 50pt;
    overflow-y: auto;
    width: 100%;
}

#main-div {
    max-width: 800px;
    padding: 15pt 0;
    margin: 0 auto;
}

@media screen and (max-width: 800px) {
    #main-div {
        max-width: 90%;
    }

    iframe.full-width {
        border-radius: 0pt;
        width: 100%;
        margin: 0;
    }
}

h1, h2, h3 {
    font-family: 'Ubuntu', sans-serif;
    margin: 0pt;
    margin-bottom: 5pt;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.25em;
}

h3 {
    font-size: 1em;
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

p.signature {
    font-size: 0.7em;
}

p.text {
    text-indent: 25pt;
}

li {
    margin-bottom: 10pt;
}

#main-div p {
    
}

img {
    border-radius: 15pt;
    width: 100%;
}

img.clickable {
    border-style: solid;
    border-color: orangered;
    border-width: 0pt;
    box-sizing: border-box;
    transition: border-width 0.25s;
}

img.clickable:hover, img.clickable:hover {
    border-width: 4pt;
    cursor: pointer;
}