* {
    margin: 0px;
    padding: 0;
    box-sizing: border-box;

    user-select:none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; -o-user-select:none;

    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

html {
    position: fixed;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    /* border: 1px solid red; */

    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    scrollbar-width: none;

    -webkit-font-smoothing: antialiased;
    /* -moz-osx-font-smoothing: grayscale; */
    text-rendering: optimizeLegibility;
}

body {
    display: flex;
    
    top:0 !important;
    left:0 !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    /* BACKGROUND */
    background-image: url("images/bg_a2.png");
    background-position: center;
    background-repeat: repeat;
    background-size: auto;
    background-color: rgb(255, 227, 180);

    /* FONTS */
    font-family: 'Bookman Old Style';
    font-weight: bold;
    font-style: italic;
    /* overflow: hidden; */

    -webkit-overflow-scrolling : touch !important;
    overflow: hidden !important;
    scrollbar-width: none;

    /* border: 2px solid orange; */

    transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;;
}


.credit {
    display: block;
    position: absolute;

    max-width: 50%;
    word-wrap: break-word;
}

.credit p {
    font-style: normal;
    font-weight: 400;
}

/* BASE ELEMENTS */
a, h1 {
    color: black;
}

a { 
    transition: font-size 0.1s linear;
    -moz-transition: font-size 0.1s linear;
    -webkit-transition: font-size 0.1s linear;
    -o-transition: font-size 0.1s linear;
    -ms-transition: font-size 0.1s linear;
}

p { transition: font-size 0.1s linear;
    -moz-transition: font-size 0.1s linear;
    -webkit-transition: font-size 0.1s linear;
    -o-transition: font-size 0.1s linear;
    -ms-transition: font-size 0.1s linear;
}

@media screen and (max-device-width:1920px) {
    a {
        font-size: 140%;
    }

    p, span { font-size: 130%; }

    .credit, .credit p {
        font-size: 120%;
    }
}

@media screen and (max-device-width:1200px) {
    a { font-size: 150%; }
    p, span { font-size: 130%; }
    
    .credit, .credit p {
        font-size: 100%;
        /* color: red; */
    }
}

@media screen and (max-device-width:800px) {
    a { font-size: 160%; }
    p, span { font-size: 145%; }
    
    .credit, .credit p {
        font-size: 100%;
        /* color: green; */
    }
}

img { border: 8px solid black; max-height: 100vh; }

/* M PLAYER */
audio {
    position: fixed;
    top: 0;
    right: 0;
        
    max-width: 50%;
    
    opacity: 0.2;

    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
audio:hover {
    opacity: 0.7;
}

/* EXPLORER */
#explorer {
    position: fixed;

    width: 100px;
    height: 200px;

    left: -100px;
    top: 10px;

    /* border: 1px dotted white; */
    transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -webkit-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
}
#explorer #back {
    display: block;
    width: fit-content;
    height: 35px;
    padding: 3px;

    background-color: transparent;

    text-align: center;
    line-height: 26px;
    font-size: 20px;
    opacity: 0.2;
    
    border-radius: 12px;
    
    transition: background-color 0.1s linear, color 0.08s linear, opacity 0.2s linear, opacity 0.2s ease-out;
    -moz-transition: background-color 0.1s linear, color 0.08s linear, opacity 0.2s linear, opacity 0.2s ease-out;
    -webkit-transition: background-color 0.1s linear, color 0.08s linear, opacity 0.2s linear, opacity 0.2s ease-out;
    -o-transition: background-color 0.1s linear, color 0.08s linear, opacity 0.2s linear, opacity 0.2s ease-out;

    /* border: 1px solid white; */
}
#explorer #back:hover {
    opacity: 1;
    cursor: pointer;
}

#explorer #back:active {
    color: rgb(255, 227, 180);
}

/* CONTENT */
#content {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    
    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    scroll-behavior: auto;
    
    /* border: 2px dashed red; */
}

.original {
    display: inline-block;
    text-decoration: none;
    vertical-align: super;
    font-size: 80%;
}

.original:hover {
    text-decoration: none;
    vertical-align: super;
}

/* /////////////// */
/* PAGE 1 */
/* /////////////// */

/* STAMP */
#stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85vw;
    height: 85vh;
    margin: auto;

    background-image: url("images/stamp.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* background-attachment: fixed; */

    /* border: 1px dotted blue; */
}

.rune {
    width: 8vmin;
    height: 8vmin;
    display: inline-block;

    margin:0;
    padding: 0;

    transform-origin: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    cursor: help;

    /* border: 5px solid red; */
}

.runeLeft { 
    background-image: url("images/stampRuneLeft.png"); 
    transform: translateX(-400%);
    -webkit-transform: translateX(-400%);
}
.runeRight { 
    background-image: url("images/stampRuneRight.png"); 
    transform: translateX(420%);
    -webkit-transform: translateX(420%);
}

/* /////////////// */
/* PAGE 2 */
/* /////////////// */

#legals {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    box-sizing: content-box;

    margin: 0;

    overflow: hidden;

    /* border: 2px solid green; */
}

#legalsArea {
    width: auto;
    height: 100%;
    margin: 1% 1% 0 1%;
    box-sizing: content-box;
    overflow: hidden;
    scrollbar-width: none;
    transform-style: preserve-3d;

    transform-origin: center top;
    -moz-transform-origin: center top;
    -webkit-transform-origin: center top;
    -o-transform-origin: center top;
    -ms-transform-origin: center top;

    perspective-origin: bottom center;
    -moz-perspective-origin: bottom center;
    -webkit-perspective-origin: bottom center;
    -ms-perspective-origin: bottom center;

    perspective: 400px;
    -moz-perspective: 400px;
    -webkit-perspective: 400px;
    -ms-perspective: 400px;

    /* border: 2px solid yellow; */
}

@-moz-document url-prefix() {
    #legalsArea { perspective: none; -webkit-perspective: none; }
}

#legalAgreement::-webkit-scrollbar { width: 0 !important; }
#legalAgreement {
    display: block;
    position: relative;
    box-sizing: content-box;
    
    height: 300%;
    width: 105%;
    padding-right: 5%;
    top:-200%;
    margin: auto;
    
    text-align: justify;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    
    transform-style: inherit;
    transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    -ms-transform-origin: center bottom;

    transform: rotateX(12deg) translate3d(0, 0, 0);
    -moz-transform: rotateX(12deg) translate3d(0, 0, 0);
    -webkit-transform: rotateX(12deg) translate3d(0, 0, 0);
    -o-transform: rotateX(12deg) translate3d(0, 0, 0);
    -ms-transform: rotateX(12deg) translate3d(0, 0, 0);

    /* border: 1px solid green; */
}

#legalAgreement a {
    position: relative;
    display: block;
    transform-style: inherit;

    transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
}

#legalButton, #legalButton:visited, #legalButton:default {
    background-color: transparent;
    color: black;

    /* width: fit-content; */
    height: fit-content;

    padding: 5px;
    border-radius: 3px;
    border: 2px solid black;
    margin: auto 30%;
    margin-top: 5px;
    transform-style: preserve-3d;

    text-align: center;
    cursor: help;

    transition: background-color 0.07s linear, color 0.05s linear, border 0.13s linear;
    -moz-transition: background-color 0.07s linear, color 0.05s linear, border 0.13s linear;
    -webkit-transition: background-color 0.07s linear, color 0.05s linear, border 0.13s linear;
    -o-transition: background-color 0.07s linear, color 0.05s linear, border 0.13s linear;
}

#legalButton:hover {
    background-color: black;
    color: white;

    border: 2px solid black;
}

#legalButton:active {
    background-color: white;
    color: black;

    border: 2px solid black;
}

/* /////////////// */
/* MENUS  */
/* /////////////// */

.menuHolder {
    display: flex;
    
    width: 85%;
    height: 80%;
   
    margin: auto;
    
    transition: flex-direction 0.2s linear;
    /* border: 1px solid red; */
}

.menuImage {
    margin: 0 1% 0 auto;

    width: 59%;
    height: 100%;

    transition: margin 0.5s linear, width 0.2s linear, height 0.2s linear;
    /* border: 1px solid yellow; */
}

.menuImage img {
    display: block;
    object-fit: contain;
    object-position: top right;
    
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    
    margin: 0 0 auto auto;
    padding: 0px;

    transition: margin 0.5s linear, width 0.2s linear, height 0.2s linear;
}

.menuGrid {
    display: grid;
    grid-template-columns: 30% 70%;
        
    margin: 3%;
    min-height: 94%;

    /* border: 1px solid yellow; */
}
.menuGrid .romanNumeral {
    margin: 0 10% 0 auto;

    height: fit-content;
    width: fit-content;

    padding: 2% 10%;
    border-radius: 30px;
}

.menuItems::-webkit-scrollbar { width: 0 !important; }
.menuItems {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    margin-left: 1%;

    width: 39%;
    height: fit-content;
    min-height: 30%;
    max-height: 100%;

    text-align: left;
    word-wrap: break-word;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    transition: margin 0.3s linear, width 0.2s linear, height 0.2s linear;

    border: 3px solid black;
}

@media screen and (max-device-width:800px) {
    .menuHolder {
        width: 95%;
        flex-direction: column;

        align-items: stretch;
    }

    .menuImage {
        margin: auto auto 5% auto;
        width: 90%;
        height: 50%;
    }

    .menuImage img {
        display: block;
        object-fit: contain;
        object-position: top center;
        
        margin: auto;
    }

    .menuItems {
        margin: auto;
        width: 100%;
    }
}

.menuHolder .deadLink, .menuHolder .deadLink:default, .menuHolder .deadLink:visited, .menuHolder .deadLink:link, .menuHolder .deadLink:hover, .menuHolder .deadLink:active {
    display: block;
    margin: 5%;

    text-decoration: none;
    font-weight: normal;
}

.menuHolder .staticLink, .menuHolder .staticLink:default, .menuHolder .staticLink:visited {
    /* margin-bottom: 5vh; */
    display: block;

    margin: 5%;
    /* height: 10vh; */

    text-decoration: none;
    cursor: pointer;

    /* border: 1px solid green; */
}

.menuHolder .linkItem, .menuHolder .linkItem:default, .menuHolder .linkItem:visited {
    margin: 0;
    margin-bottom: 2vh;

    text-decoration: none;
    cursor: pointer;

    /* border: 1px solid green; */
}

.menuHolder #moreBelow {
    position: sticky;
    
    display: block;
    text-align: center;
    font-size: 100%;
    bottom: -2px;
    margin: 0;

    
    /* background-image:   radial-gradient(rgb(255, 227, 180, 0.7) 70%, rgba(0, 0, 0, 0) 30%), url("images/bg_a2.png");; */
                        /* -webkit-radial-gradient(rgb(255, 227, 180, 0.7) 70%, rgba(0, 0, 0, 0) 30%),
                        -moz-radial-gradient(rgb(255, 227, 180, 0.7) 70%, rgba(0, 0, 0, 0) 30%); */
    background-image: url("images/bg_a2.png");
    background-color: rgb(255, 227, 180);

    border-top: 2px solid black;
}

.menuHolder .staticLink:hover, .menuHolder .staticLink:focus, .menuHolder .linkItem:hover, .menuHolder .linkItem:focus {
    text-decoration: underline;
}

/* @media screen and (max-width:768px) {
}

@media screen and (min-device-width: 375px) {
    .menuHolder {
        width: 90vw;
    }
} */

.Section1::-webkit-scrollbar { width: 0 !important; }
.Section1 {
    width: 95vw;
    max-width: 800px;
    height: 100vh;

    margin: auto;
    padding: 5vh 1vw;
    
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    transition: width 0.1s linear;
    -moz-transition: width 0.1s linear;
    -webkit-transition: width 0.1s linear;
    -o-transition: width 0.1s linear;
}

.Section1 img {
    display: block;
    object-fit: contain;

    min-width: 50%;
    max-width: 94vw;
    height: auto;
    max-height: 70%;
    
    margin: 0 auto;

    transition: width 0.2s linear, margin 0.2s linear;
    -moz-transition: width 0.2s linear, margin 0.2s linear;
    -webkit-transition: width 0.2s linear, margin 0.2s linear;
    -o-transition: width 0.2s linear, margin 0.2s linear;
}

.Cinema {
    color: white;
    text-align: center;
}
.Cinema p {
    margin: 2%;
}

.Cinema .origin {
    text-align: left;
}

/* PHOTO COLLAGE */

#kinimatografos::-webkit-scrollbar{display: none;}
#kinimatografos {
    margin: auto;

    width: 100%;
    height: 100%;
    max-height: 80%;

    scrollbar-width: none;
    scroll-behavior: smooth;
    
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;

    /* border: 2px dashed pink; */
}

#charactersCollage {
    height: 100%;
    width: max-content;

    display: flex;
    flex-direction: row;
    align-items: center;

    margin: 0;
    /* scrollbar-width: none; */
    overflow: hidden;

    /* border: 1px solid orange; */
}

.characterImage {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 50vw;
    height: 95%;
    margin: auto 1vw;
   
    /* border: 1px solid khaki;  */
    transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
}

.characterImage:hover {
    width: 51vw;

    height: 100%;
}

.characterImage:active {
    width: 50vw;

    height: 95%;
}