/*==========Diary==========--------------------------*/

#banner {
    width: 100%;
    margin-top: 0;
    padding-top: var(--content-top-padding);
    padding-bottom: var(--content-side-padding);
    background: url(../layout/background/floraltexture_2.jpg) no-repeat center;
    background-size: cover;
}
#banner .menu {
    float: right;
}

.medialog {
    display: flex;
}
.medialog > a {
    display: block;
    width: 33.3%;
    margin: var(--side-padding-sm);
    border: var(--outline);
    position: relative;
}
.medialog div {
    height: 220px;
    background: var(--primary-dark);
    border: var(--outline-light);
    background-size: cover;
    background-repeat: no-repeat;
}

.medialog h4 {
    width: 100%;
    font: var(--body-sc);
    letter-spacing: var(--letter-spacing);
    text-shadow: var(--text-outline);
    border: none;
    text-transform: uppercase;
    margin: 1ch;

}

.medialog > a:hover {
    border-color: var(--attn);
}

.medialog > a:hover h4 {
    color: var(--attn);
}

.medialog a::after {
    content: '';
    display: block;
    background-size: contain;
    position: absolute;
}

#media {
    position: relative;
}

#media::after {
    content: '';
    display: block;
    width: 70px;
    height: 51px;
    background: url('../layout/deco/zucchiread.gif') no-repeat;
    position: absolute;
    right: -2px;
    bottom: -32px;
}

/*==========Collections==========--------------------------*/

.collection a img {
    border: none;
}

.collec {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    float: right;
}

.collection .collec {
    flex-wrap: wrap;
    float: left;
    margin: -1rem 0;
}

.collection .collec:nth-child(even) {
    float: right;
}

.collection .collec:nth-of-type(3n) {
    margin-top: -4vh;
}

.collec-item {
    z-index: 1;
    max-height: 18vh;
}

.collec-item {
    filter: var(--image-outline);
    -webkit-transition: all var(--speed), margin .15s;
    transition: all var(--speed), margin .15s;
}

.collec-desc {
    text-align: center;
    background: var(--secondary-light);
    padding: 4px;
    border: var(--white) 1px solid;
    position: absolute;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all var(--speed), margin .15s;
    transition: all var(--speed), margin .15s;
}


.collec-desc p {
    text-align: left;
}

.collec,
.collec:nth-child(3n) {
    max-width: 100%;
    margin: unset;
}

.collec .collec-desc,
.collec:nth-child(even) .collec-desc {
    margin: unset;
}

.collec .collec-desc p,
.collec:nth-child(even) .collec-desc p {
    padding: 12px;
}

.collec-item:hover {
    transform: scale(1.25, 1.25);
    position: relative;
    z-index: 2;
}

.collec-item:hover ~ .collec-desc {
    margin-top: -10px;
    opacity: 100;
}

.spin:hover { animation: spin .1s ease-in .3s infinite; }
@keyframes spin {
    0% { transform: rotate(0deg) scale(1.25,1.25)}
    100% { transform: rotate(360deg) scale(1.25,1.25)}
}


/*==========Scrapbook==========--------------------------*/

.scrapbook {
    width: 100%;
}

.scrapbook > * {
    float: left;
    max-width: calc(50% - 1rem);
}
.scrapbook > *:nth-child(odd) {
    margin-right: .5rem;
}
.scrapbook > *:nth-child(even) {
    margin-left: .5rem;
}

.scrapbook .memo {
    background: var(--secondary-light-light);
    padding: 12px;
}
.scrapbook .memo + .collec { margin-top: -1rem; }

.memo.flower.pink { background: var(--secondary-light-light) url(../layout/background/gingham.svg); background-size: 20px; }
.memo.flower.pink * { border-bottom: var(--gray) 1px dashed; line-height: 1.75; }
.memo.flower.purple { background: var(--secondary-light-light); line-height: 2; }
.memo.flower > *:first-child { border-bottom: none; }
.memo.flower ul { border-bottom: none; }
.memo.flower ul li { padding-left: 2ch; }
#content .memo.flower ul li::before { 
    content: "✿";
    position: absolute;
    margin-left: -2ch;
}

.memo.candy {
    background: url(../layout/borders/candy.svg) top left repeat-x, url(../layout/background/gingham.svg) bottom right repeat-x;
    background-size: 80px, 20px;
    background-color: var(--secondary-light-light);
    border: var(--primary-dark) 4px double;
    padding-top: 1.5rem;
}
.memo.candy ul li { padding-left: 2ch; margin-bottom: 0.5rem; }
.memo.candy ul li::before { 
    content: "✦";
    position: absolute;
    margin-left: -2ch;
}

.memo.picnic {
    color: var(--primary-dark);
    font-family: var(--subheading);
    font-size: 1.5rem;
    background: url(../layout/background/picnic_top.png) top left repeat-x, url(../layout/background/picnic_bottom.png) bottom right repeat-x;
    background-size: 400px;
    background-color: var(--secondary-light-light);
    border-radius: 10px;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.memo.simple {
    background: var(--secondary-light-light) url(../layout/background/gingham.svg);
    background-size: 10px;
    border: var(--primary-dark) 1px solid;
    padding: 6px;
}
.memo.simple p { letter-spacing: .1rem; }

.memo.yellow {
    background: #FFEE93;
}
.memo.yellow > *:first-child { color: #9FCFCF; }


/*==========Advent==========--------------------------*/
.calendar {
    width: 100%;
    display: flex;
    flex-wrap: wrap; 
}

.calendar > * {
    width: calc(100% / 6);
    height: 96px;
    background: var(--white);
    border: var(--primary-light) 1px solid;
    position: relative;
}

.calendar .day * {
    -webkit-transition: all 0.1s;
	transition: all 0.1s;
}

.calendar .day img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    border: var(--outline-light);
    opacity: .5;
}

.calendar .date {
    font: var(--body-sc);
    padding: 4px;
    width: 2rem;
    text-align: center;
    text-shadow: var(--text-outline);
    color: inherit;
    background: var(--primary-light);
    position: relative;
    z-index: 101;
    border: var(--outline-light);
    border-width: 0 1px 1px 0;
    margin: 0;
}

.calendar a.day:hover {
    border-color: var(--attn);
}

.calendar a.day:hover .date {
    background: var(--attn);
}

.calendar .collec-label { border: none; }

/*========================*/
/*Responsiveness*/
/*========================*/

@media screen and (max-width: 800px) {
    
    #banner .menu {
        margin: 0 auto;
        float: none;
    }
    
}