html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
    width: 100%;
}

img { max-width: 100%; vertical-align: bottom; }

.cf::after {
    content: "";
    display: table;
    clear: both;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/*========================*/
/*Universal*/
/*========================*/

/*Fonts*/
@font-face {
      font-family: Emoji;
      src: url(assets/font/emojifont.ttf);
}
@font-face {
      font-family: OsanpoR;
      src: url(assets/font/osanpor.ttf);
}

:root {
    --bg: #EBE9E6;
    --textmain: #634321;
    --line: #85B9BB;
    --blue: #CAD9EB;
    --purple: #C2BDDE;
    --pink: #F5D5D5;
    --accent: #E982AD;
}

.space-after { margin-bottom: 4rem; }
.title { font-weight: 600; }

/*========================*/
/*Basic Tags*/
/*========================*/

html { color: var(--textmain); font-size: 10pt; font-family: monospace; line-height: 1.2rem; }
body {
    background-image: url(assets/layout/background/blanket.png), linear-gradient( var(--pink), var(--blue));
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed, scroll;
}

h1, h2 {
    font-size: 4.5rem;
    margin: 4rem 0;
    color: var(--bg);
    filter: drop-shadow(1px -1px 0 var(--blue)) drop-shadow(-1px 1px 0 var(--pink)) drop-shadow(-1px -1px 0 var(--line)) drop-shadow(1px 1px 0 var(--line));
}
h1.shift { margin-top: -.5rem; }

h2 {
    font-size: 3rem;
    font-style: normal;
    margin: 2rem 0;
}

p { margin-bottom: 1rem; font-family: Tahoma, sans-serif; line-height: 1.5rem; }

a { color: var(--accent); }
a:hover { color: var(--line); }

/*========================*/

.wrapper {
    min-height: 100vh;
    max-width: 100%;
    padding: 0 5%;
}
.flexwrap {
    display: flex;
    justify-content: center;
}

.banner {
    width: 100%;
    height: 4rem;
/*    background: no-repeat center;*/
    background-size: contain;
    margin-bottom: -2rem;
    position: relative;
    z-index: 100;
}

.main, .content {
    max-width: 900px;
    margin: 4rem auto;
    border: var(--line) 4px double;
    border-bottom: var(--accent) 8px solid;
    background: url(assets/layout/deco/flower-l.svg) top left, url(assets/layout/deco/flower-r.svg) top right;
    background-color: var(--bg);
    background-size: 16px;
    background-repeat: repeat-y;
}
.flexwrap .content { margin: 0; }

.main { 
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.content {
    padding: 4rem 60px;
}

.cal, .info { padding: 20px; }

.cal {
    width: 35%;
    border-right: var(--line) 1px solid;
}
.info {
    width: 65%;
}

.nav {
    max-width: 900px;
    margin: 2rem auto;
    display: flex;
    justify-content: space-between;
}

.nav a {
    text-align: center;
    background: var(--bg);
    padding: 20px;
    width: 30%;
    border: var(--line) 4px double;
}
.nav a:hover {
    background: var(--pink);
}


/*========================*/

.webring .title { margin-bottom: 0; background: none }

.webring .icon{
    margin-right: 10px;
    width: 40px;
}
.flexcontain {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

/*========================*/

.calwrap {
    width: 100%;
    display: flex;
}

#calendar {
    border: var(--line) 4px double;
    border-bottom: none;
}

#calendar tr {
    border-bottom: var(--line) 4px double;
}
#calendar td {
    padding: 6px;
}
#calendar td:first-child {
    border-right: var(--line) 4px solid;
    text-align: center;
}
#calendar td:first-child span {
    font-weight: 600;
    display: block;
    font-size: 2rem;
    margin-top: 6px;
}
#calendar td.month {
    font-weight: 600;
    background: var(--pink);
    border-right: none;
}

.shortcal tr:nth-child(2) {
    background: var(--blue);
}
.shortcal td:nth-child(2) { width: 50%; }

.fullcal { width: 80%; }
.calpos {
    width: 20%;
}
.calnav {
    list-style: none;
    position: fixed;
    background: var(--bg);
    border: var(--line) 4px double;
    padding: 20px;
    line-height: 2rem;
}
.calnav ul { list-style: none; }
.calnav.alt { display: none; position: static; }

/*========================*/

table.catalog { margin: .5rem 0 2.5rem 0; border: var(--line) 4px double; }
table.catalog td { border: var(--line) 1px solid;  vertical-align: top; }
table.catalog td p, table.catalog td ul { margin: 10px; list-style: none; }
table.catalog img { object-fit: contain; }

div.catalog { border: var(--line) 4px double; }
div.catalog .cells p { font-family: MS Gothic, monospace; margin: 10px; }

div.catalog .row {
    display: flex;
    border-bottom: var(--line) 1px solid;
    width: 100%;
}
div.catalog .row:last-child {
    border-bottom: none;
}

div.catalog .details, div.catalog .cells { width: 50%; }
div.catalog .details {
    padding: 20px;
    border-right: var(--line) 1px solid;
}
div.catalog .cells { display: flex; }
div.catalog .cells div {
    border-right: var(--line) 1px solid;
}
div.catalog .cells div:last-child { border: none; }

.swap img:last-child, .swap:hover img:first-child { display: none; }
.swap:hover img:last-child { display: block}
.swap img { display: flex; }




/*========================*/
@media screen and (max-width: 800px) {
    .wrapper {
        display: block;
    }
    .cal {
        width: 100%;
        border-right: none;
        max-height: 25vh;
        overflow-y: auto;
        border-bottom: var(--line) 1px solid;
    }
    .info { width: 100%; }
    .content { padding: 5%; }
    
    .calwrap { display: block; }
    .calnav { position: static; border: none; }
    .fullcal, .calpos { width: 100%; }
}