/* Constants */
.center { text-align: center; }

/* Main */
body {
    background-color: #cad7ff;
    font-size: 16px;
    color: #5e4ba0;
    font-family: sans-serif;
}

p, li {
    line-height: 24px;
}

main, nav, header {
    max-width: 600px;
    margin: 0 auto;
}

nav, .square {
    max-width: 800px;
    text-align: center;
}
nav ul {
    padding-left: 0;
}

nav.breadcrumb {
    width: fit-content;
    margin: 0 auto;
    padding: 0.5em;
    font-family: 'Courier New', Courier, monospace;
}
nav.breadcrumb, .card {
    border: 1px solid #cad7ff;
    border-radius: 0.5em;
    box-shadow: 2px 2px #cad7ff;
}

.square figure {
    display: inline-block;
    margin: 0.25em;
    font-weight: bold;
}
.square img {
    max-width: 128px;
    margin: 0 auto;
    border-radius: 0.5em;
}
.square.small img {
    max-width: 100px;
}

main img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

main, #fab-nav {
    background-color: #EBF4FF;
    /* margin: 2em auto; */
    padding: 1em;
    border-radius: 1em;
}

#fab-nav {
    width: fit-content;
    margin-top: 1em;
}

h1 {
    margin: 0.2em;
    text-align: center
}

blockquote {
    border-left: 0.25em solid #5E4BA0;
    padding-left: 1em;
}

/* Menu */
#menu {
    display: block;
}

#menu li {
    display: inline-block;
    background-color: #9115e4;
    padding: 0.25em;
    margin: 0.1em;
    font-size: 1.5em;
    border-radius: 0.25em;
}

#menu a, #menu a:visited {
    font-weight: bold;
    color: #EBF4FF;
    text-decoration: none;
}

/* Branding */
#eggle img { max-height: 40vh; }
#logo img { width: 100%; }
#page-logo img {
    background-color: #EBF4FF;
    padding: 0.5em;
    border-radius: 1em;

    max-height: 56px;
    margin: 0 auto;
    display: block;
}

#fab-nav .fab {
	font-size: 5em;
    color: #9300F5;
}



/* Gallery */
.gallery {
    text-align: center;
}
.gallery img {
    width: 180px;
    height: 180px;
    display: inline-block;
    object-fit: contain;
}

.tag {
    border: 2px solid #a8a3d2;
    color: #a8a3d2;
    padding: 0.25em;
    border-radius: 0.25em;
    display: inline-block;
    margin-top: 0.25em;
}

/* Flex table */

.flex-table .row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;

    border: 0.1em solid #cad7ff;
    border-radius: 0.5em;
    box-shadow: 2px 2px #cad7ff;
}

.flex-table .thumbnail {
    width: 100px;
    margin-right: 1rem;
    border-radius: 0.5em 0 0 0.5em;
}

.flex-table .text {
    flex: 1;
}


/* Articles */
#articles img {
    float: left;
    max-width: 128px;
    display: block;
    padding-right: 0.5em;
}

#articles .article {
    height: fit-content;
    display: inline-block;
    padding: 0.5em;
}

li {
    padding: 0.25em;
}

img.button {
    display: inline;
}

/* Cards */
.card {
    width: 100%;
    height: fit-content;
    display: inline-block;
    margin: 0.5em 0;
}

/* .card h3 {
    padding-left: 0.5em;
} */

.card h1, .card h2, .card h3, .card blockquote, .card ul {
    margin: 0.5em;
}

.card .icon {
    float: left;
    max-width: 128px;
    max-height: 128px;
    display: block;
    margin: 0.5em;
}

.card .icon img {
    border-radius: 0.25em;
}

.card ul {
    clear: both;
    padding-left: 1em;
    list-style-type: none;
}

.card .links ul li {
    display: inline;
}

.card .description {
    padding: 0 0.5em;
}

/* Fancy Crap */
.flipcover {
    width: fit-content;
    display: inline-block;
}
.flipcover img {
    max-width: 100px;

    transform: perspective(1500px) rotateX(15deg) rotateY(15deg);
    /* box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; */
    transition: transform 1s ease 0s;

    &:hover {
        transform: perspective(3000px) rotateY(5deg);
    }
}
.flipcover.right img {
    transform: perspective(1500px) rotateX(15deg) rotateY(-15deg);

    &:hover {
        transform: perspective(3000px) rotateY(-5deg);
    }
}

h2 small {
    /* font-weight:normal; */
    font-size: 0.7em;
}

.spoiler {
    color: transparent;
    background-color: #a8a3d2;
    border-bottom: 1px dotted #5e4ba0;
    cursor: pointer;
}
.spoiler.off {
    color: inherit !important;
    background-color: inherit !important;
}

.circle.header img {
    max-height: 256px;
    border-radius: 100%;
}

table {
    margin: 0 auto;
    /* border: 0.1em solid #5E4BA0; */
    border-radius: 0.25em;
    border-spacing: 0.5em;
}

td {
    border: 0.1em solid #cad7ff;
    text-align: center;
    border-radius: 0.5em;
    box-shadow: 1px 1px #cad7ff;
}

.map {
    height: 500px;
}