/* SETUP */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.visuallyHidden:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; margin: -1px;border: 0;padding: 0;white-space: nowrap;clip-path: inset(100%);clip: rect(00 0 0);overflow: hidden;}

/* STRIPPING STYLES ------------------------------------------- */
html,
body,
nav,
header,
main,
footer,
h1,
h2,
h3,
h4,
h5,
ul,
li,
p,
a,
button,
form,
input,
label,
textarea {
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

button,
input,
textarea {
    border: none;
    background: none;
}

textarea {
    resize: none;
}

li {
    list-style: none;
}

img {
    width: 100%;
    height: auto;
}

/* GLOBAL STYLES */
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-size: 1.6rem;
    color: #222;
    background-color: #f1ece5;
    background-image: url("assets/lined-paper.png");
    background-repeat: repeat;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
a,
p {
    font-family: "ff-providence-sans-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.9rem;
}

h1 {
    font-size: clamp(1.8rem, 2vw, 2.4rem);
    padding-bottom: .25em;
}

h2 {
    font-size: clamp(1.7rem, 1.9vw, 2.3rem);
    padding-bottom: .5em;
}

.wrapper {
    max-width: 1500px;
    width: 95%;
    margin: 0 auto;
}


/* BUTTONS */
.underscore-hov {
    position: relative;
}

.underscore-hov::before {
    content: '';
    background-repeat: no-repeat;
    background-size: 100% 70%;
    background-position: 50%;
    padding: 3px;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 50%;
    position: absolute;
    left: -5px;
    bottom: 1px;
    z-index: -10;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.red::before {
    background-image: url('assets/highlight-red.png');
}

.blue::before {
    background-image: url('assets/highlight-blue.png');
}

.green::before {
    background-image: url('assets/highlight-green.png');
}

.yellow::before {
    background-image: url('assets/highlight-yellow.png');
}

.orange::before {
    background-image: url('assets/highlight-orange.png');
}

.underscore-hov:hover::before,
.underscore-hov:focus::before {
    opacity: 1;
    visibility: visible;
}

/* HEADER & FOOTER */
.main-menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    margin-top: 20px;
    max-width: 200px;
}

.menu {
    position: absolute;
    right: 20px;
}

footer {
    padding: 40px 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-icon {
    width: 20px;
}

/* WELCOME PAGE */
body.welcome {
    background-image: url("assets/welcome-lined-paper.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}

.welcome-wrap {
    max-width: 1200px;
    width: 70%;
    margin: 0 auto;
    height: 100vh;
}

.welcome-flex,
.welcome-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-img {
    flex-direction: column;
    width: 50%;
}

.welcome-img img {
    max-width: 400px;
}

.welcome-img p {
    font-size: 14px;
    text-align: center;
}

.welcome-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.welcome-text a {
    display: block;
    margin-top: 20px;
    font-size: 18px;
    padding: 5px;
}

.welcome-text .logo {
    max-width: 250px;
}

.coffee-stain {
    max-width: 300px;
    position: absolute;
    top: 50%;
    left: 40%;
    z-index: 0;
}

/* HOMEPAGE */
#photoGrid {
    visibility: hidden;
}

#loadingIndicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    font-size: 2em;
}

.category-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 80%;
    gap: 2px;
    margin: 0 auto 10px;
}

.category-btn {
    text-transform: lowercase;
    margin: 0 .5em;
    padding: 5px 10px;
    position: relative;
    transition: all .5s ease;
}

.category-btn:hover,
.category-btn:focus {
    transform: translateY(-5px);
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.img-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%;
}

.photo-item {
    cursor: pointer;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.menu-close {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    background: none;
    border: none;
    color: #435A68;
    cursor: pointer;
    z-index: 1002;
}

.menu-toggle {
    display: none;
    font-size: 20px;
    color: #222;
    padding: 20px;
    margin: 0 auto;
    cursor: pointer;
}

/* STICKERS */
#stickerButton {
    background: #435A68;
    color: #f1ece5;
    position: fixed;
    bottom: 60px;
    left: 20px;
    z-index: 2000;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

#stickerButton:hover {
    background: #222;
}

.sticker-menu {
    padding: 30px;
    position: fixed;
    top: 0;
    left: -100%;
    width: 40%;
    min-width: 200px;
    height: 100%;
    background: #f1ece5;
    background-image: url("assets/lined-paper.png");
    background-repeat: repeat;
    box-shadow: -3px 0 5px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease;
    z-index: 2020;
    overflow-y: scroll;
}

.close-btn {
    font-size: 28px;
    position: absolute;
    right: 15px;
    top: 15px;
    color: #435A68;
    cursor: pointer;
}

.sticker-menu.active {
    display: block;
    left: 0;
}

.sticker-menu-header {
    text-align: center;
    padding: 20px;
}

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
}

.sticker {
    width: 80px;
    cursor: pointer;
}

.sticker.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.draggable-sticker {
    position: absolute;
    max-width: 100px;
    cursor: pointer;
}

.circle-sticker {
    margin: 20px;
    position: relative;
}

.circle-sticker::before {
    content: '';
    background-image: url('assets/circle-red.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -7px;
    bottom: -5px;
    z-index: -10;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.circle-sticker:hover::before,
.circle-sticker:focus::before {
    opacity: 1;
    visibility: visible;
}

/* DIARY ENTRY */
.entry-details {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.entry-img {
    width: 70%;
}

.entry-text {
    width: 30%;
    margin: 0 1em 4em;
}

#photoInfo {
    margin-top: 20px;
}

.directional-btns {
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.separator {
    margin: 20px 10px;
}

/* INFO PAGE */
.img-wrap {
    padding: 20px 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrap img {
    max-height: 400px;
    max-width: 350px;
}

.about-info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.about-head,
.about-text {
    width: 50%;
}

.about-text p {
    padding-bottom: 20px;
}

.extra-info {
    width: 50%;
    margin: 40px auto;
}

/* MEDIA QUERIES */
@media(max-width: 830px) {

    .sticker-menu {
        padding: 20px;
        width: 60%;
    }

    .category-buttons {
        width: 100%;
    }

    .photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .diary-entry {
        min-height: 80vh;
    }

    .extra-info {
        width: 80%;
    }
}

@media(max-width: 670px) {

    .welcome-wrap {
        width: 80%;
        height: 100vh;
    }

    .welcome-flex {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .welcome-img {
        display: none;
    }

    .sticker-menu {
        width: 100%;
    }

    .menu {
        right: 15px;
        top: 15px;
    }

    .category-buttons {
        display: none;
        gap: 10px;
    }

    .menu-toggle,
    .menu-close {
        display: block;
    }

    .category-buttons.flyout-menu.active {
        background-color: #f1ece5;
        background-image: url("assets/lined-paper.png");
        background-repeat: repeat;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 2010;
        transition: ease all .5s;
    }

    .category-buttons.flyout-menu.active button {
        padding: 0;
    }

    .entry-details,
    .about-info {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .entry-img,
    .entry-text,
    .about-head,
    .about-text {
        width: 100%;
    }

    .entry-text,
    .about-text {
        margin-top: 20px;
    }

    .extra-info {
        width: 100%;
    }

    .directional-btns {
        margin-top: 20px;
    }

    .sticker {
        width: 80px;
    }

    .draggable-sticker {
        max-width: 50px;
    }
}