/****** CSS RESET ******/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-family: 'Roboto Mono', monospace;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: 100%;
}

ol, ul, li {
    list-style: none;
}

figure {
    font-size: 0;
    line-height: 0;
}

img, video {
    width: 100%;
}

a {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


/****** GLOBAL ******/

html {
    font-size: 10px;
}

body {
    margin: 2rem 1rem 0 1rem;
    position: relative;
}

.invisible {
    opacity: 0;
    cursor: initial;
}

/****** NAV ******/


nav {
    position: fixed;
    display: flex;
    top: 2rem;
    right: 2rem;
    align-items: center;
    z-index: 1;
}

nav a:nth-child(2) {
    padding-left: 2rem;
}

.refresh-button {
    height: 4.5rem;
    width: 4.5rem;
    background-image: url("../images/global/refresh.svg");
    background-repeat:no-repeat;
    background-position: center;
    background-size: contain;
    display: inline;
}

.info-button:after {
    content: "?";
    font-size: 4.5rem;
}

.close:hover:after {
    content: "×";
    font-size: 4.5rem;
}

/****** MAIN ******/

main {
    position: relative;
}

main ol {
    display: flex;
    flex-direction: column;
}

h1 {
    font-size: 6rem;
    font-weight: 700;
    line-height: 100%;
    text-align: center;

    display: block;
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index: 2;
}


p, a {
    font-size: 2rem;
}

.symbol-container {
    height: 2rem;
    display: inline-flex;
    align-items: center;
    vertical-align: text-bottom;
}


main ol li img {
    width: 2rem;
    height: auto;
    margin-left: 0.5rem;
}

.entry {
    margin-bottom: 1rem;
}




/* MEMORY SYSTEM */

.time-3 {
    margin-left: inherit;
}

.time-2 {
    margin-left: 30rem;
}

.time-1 {
    margin-left: 60rem;
}


.memory-3 {
    opacity: 1;
    filter: blur(0);
}

.memory-2 {
    opacity: 0.7;
    filter: blur(1.5px);
}

.memory-1 {
    opacity: 0.5;
    filter: blur(2.5px);
}

/****** FILTER ******/
.entry.inactive {
    display: none;
  }

/* Backgrounds */

.core {
    background: rgb(255,171,7);
    background: linear-gradient(90deg, rgba(255,171,7,1) 0%, rgba(255,255,255,1) 100%);
}

.good {
    background: rgb(255,92,11);
    background: linear-gradient(90deg, rgba(255,92,11,1) 0%, rgba(255,255,255,1) 100%);
}

.miss {
    background: rgb(255,70,70);
    background: linear-gradient(90deg, rgba(255,70,70,1) 0%, rgba(255,255,255,1) 100%);
}

.bloomin {
    background: rgb(241,101,136);
    background: linear-gradient(90deg, rgba(241,101,136,1) 0%, rgba(255,255,255,1) 100%);
}

.talk {
    background: rgb(181,108,238);
    background: linear-gradient(90deg, rgba(181,108,238,1) 0%, rgba(255,255,255,1) 100%);
}

.sad {
    background: rgb(83,100,255);
    background: linear-gradient(90deg, rgba(83,100,255,1) 0%, rgba(255,255,255,1) 100%);
}

.what {
    background: rgb(72,206,94);
    background: linear-gradient(90deg, rgba(72,206,94,1) 0%, rgba(255,255,255,1) 100%);
}


/* Center Symbols */

body:has(.symbol) h1 {
    display: none;
}

.symbol {
    width: 8rem;
    height: 8rem;
    display: block;
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index: 2;
}


body:is(.core) .core-symbol {
    background-image: url("../images/categories/core-category.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

body:is(.good) .good-symbol {
    background-image: url("../images/categories/good-category.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

body:is(.miss) .miss-symbol {
    background-image: url("../images/categories/miss-category.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

body:is(.bloomin) .bloomin-symbol {
    background-image: url("../images/categories/bloomin-category.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

body:is(.talk) .talk-symbol {
    background-image: url("../images/categories/talk-category.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

body:is(.sad) .sad-symbol {
    background-image: url("../images/categories/sad-category.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

body:is(.what) .what-symbol {
    background-image: url("../images/categories/what-category.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#reset {
    display: none;
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index: 3;
    height: 7rem;
    width: 13rem;
    background-color: #fff;
    border-radius: 50%;
}

#reset:hover,
.symbol:hover + #reset {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* CENTER IMAGE */

.entryImage-container {
    width: 100vw;
    height: 100vh;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s;
}

.entryImage-container div {
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
} 

.entryImage-container div img {
    max-height: 80vh;
    max-width: 65rem;
    width: auto;
}

/* transition */

.entryImage-appear {
    opacity: 1;
}


/****** INTRO ******/

.disclaimer p {
    position: fixed;
    top: 0;
    left: 2rem;
    transition: 1000ms;
    transition-timing-function: ease-out;
    opacity: 0;
}

.symbol-wrapper {
    display: flex;
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index: 2;
}

.symbol-wrapper img {
    margin-right: 3rem;
    width: 2.5rem;
    height: auto;
}

.symbol-wrapper img:last-child {
    margin-right: 0;
}





/****** RESPONSIVE ******/

/* Große Screens */

@media only screen and (min-width: 1441px) {


    html {
        font-size: 12px;
    }

    .time-2 {
        margin-left: 40rem;
    }
    
    .time-1 {
        margin-left: 80rem;
    }

    .entryImage-container div img {
        max-height: 80vh;
        max-width: 85rem;
    }

}


/* Tablet */

@media only screen and (max-width: 960px) {

    /* MAIN */

    main {
        margin-top: 9rem;
    }
    
    body:has(:not(.symbol)) #reset {
        display: none;
    }
    
    body:has(.symbol) #reset {
        display: flex;
        position: fixed;
        top: 2rem;
        left: 1rem;
        transform:translate(0%, 0%);
        height: 6rem;
        width: 14rem;
        align-items: center;
        justify-content: center;
    }

    

    .symbol:hover{
        pointer-events: none;
        cursor: initial;
    }


   

    /* Entry List */
    
    .time-2 {
        margin-left: 10rem;
    }
    
    .time-1 {
        margin-left: 20rem;
    }
}

/* Smartphone */

@media only screen and (max-width: 480px) {

    html {
        font-size: 8px;
    }

    body {
        margin: 1rem 1rem 0 1rem;
    }

    main {
        margin-top: 0rem;
        padding-top: 7rem;
    }

    /* Header */

    header {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 6rem;
        width: -webkit-fill-available;
        margin-right: 1rem;
        z-index: 1;
    }

    h1 {
        text-align: left;
        font-size: 4rem;
    
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0%, 0%);
    }

    nav {
        position: unset;
    }

    /* Memory System */

    .memory-2 {
        opacity: 0.7;
        filter: blur(1.25px);
    }

    .memory-1 {
        opacity: 0.5;
        filter: blur(2px);
    }

    /****** FILTER ******/
    .entry.inactive {
        display: none;
    }

    /* Filter */

    .symbol {
        display: inline-block;
        position: unset;
        transform: none;

        width: 4.5rem;
        height: 4.5rem;
    }



    body:has(.symbol) #reset {
        display: flex;
        position: unset;
        transform:translate(0%, 0%);
        height: 5rem;
        width: 10rem;
        align-items: center;
        justify-content: center;
        order: -1;
        font-size: 1.5rem;
    }

    




    /* Entry List */

    .entry {
        margin-bottom: 2rem;
    }
    
    .time-2 {
        margin-left: 2rem;
    }
    
    .time-1 {
        margin-left: 4rem;
    }

    

    /* Center Image */

    .entryImage-container div img {
        width: 70vw;
    }

    /* INFO PAGE */

    .close:after {
        content: "×";
        font-size: 4.5rem;
    }
}