html {
    font-size: calc(0.5em + 2.5vmin);
}

h1 {
    font-size: 48px;
    font-family: 'Cantata One', serif;
}

h2 {
    font-size: 16px;
    font-family: 'Alike Angular', serif;
}

h3 {
    font-size: 35px;
    font-family: 'Loved by the King', cursive;
}

h4 {
    font-size: 22px;
    font-family: 'Girassol', cursive;
    margin-bottom: 0px;
    font-weight: 400;
}

h5 {
    font-size: 18px;
    font-family: 'Girassol', cursive;
    margin-bottom: 0px;
    font-weight: 400;
}

h6 {
    font-size: 18px;
    font-family: 'Abel', sans-serif;
    text-align: right;
    align-self: center;
    margin-bottom: 0px;
}

h7 {
    font-size: 22px;
    font-family: 'Alegreya Sans', sans-serif;
    margin-bottom: 0px;
    font-weight: 400;
    font-variant: small-caps;
}

p {
    font-family: 'Abel', sans-serif;
    margin-bottom: 0px;
    color: #595959;
    font-size: calc(16px + 0.2vw);
}

.mobile {
    background-color: #f5f5f5;
    display: grid;
    grid-template-columns: minmax(2px,1fr) 12px minmax(120px,28em) minmax(15px,1fr);
    grid-template-rows: 60px 140px 3em 140px 4em auto 20px auto auto 30px auto auto 50px auto 20px auto auto auto 50px auto auto auto 50px auto auto auto 50px auto auto auto 40px 40px 20px 40px auto 100px 30px auto auto auto 30px 100px 100px 100px 100px 100px 100px;
    grid-gap: 4px;
    grid-template-areas: '. . menu-mobile .' '. . banner .' '. . . .' '. . ppic .' '. . . .' '. . head-research .' '. . . .' '. . head-flow .' '. . info-flow .' '. . . .' '. . head-fracture .' '. . info-fracture .' '. . . .' '. . head-selected .' '. . . .' '. . paper-01-head .' '. . paper-01-info .' '. . paper-01-gal .' '. . paper-01-end .' '. . paper-02-head .' '. . paper-02-info .' '. . paper-02-gal .' '. . . .' '. . paper-03-head .' '. . paper-03-info .' '. . paper-03-gal .' '. . . .' '. . paper-04-head .' '. . paper-04-info .' '. . paper-04-gal .' '. . . .' '. . end-research .' '. . end-line-01 .' '. . . .' '. . head-youtube .' '. . info-youtube .' '. . . .' '. . video-01-head .' '. . video-01-gal .' '. . video-01-info .' '. . . .' '. . video-02-head .' '. . video-02-gal .' '. . video-02-info .' '. . . .' '. . . .' '. . info-misc .';
}

.top-box {
    border-style: solid;
    border-width: 8px;
    width: 100%;
    height: 100%;
    max-height: 12em;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ppic {
    grid-area: 2 / 2 / 3 / 4;
    display: flex;
    justify-content: center;
}

.heading {
    grid-area: 2 / 3 / 3 / 3;
    display: flex;
    justify-content: center;
}

.pub-gal-01 {
    width: calc(18vw);
    max-width: 120px;
    margin-right: 0.2em;
}

.bullet-01 {
    grid-area: 10 / 2 / 11 / 3;
    background-color: #827d73;
    width: 8px;
    height: 8px;
    margin-top: 10px;
}

.pub-gal-02 {
    width: 36vw;
    max-width: 240px;
    margin-right: 0.4em;
}

a {
    text-decoration: none;
    color: #000000;
}

a:hover {
    text-decoration: none;
    color: #0969b2;
}