/* This is the css file for Amateur. Written by Jim Andrews, Jan 2024.  */

html, body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    background-color: hsl(10, 15%, 75%);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    /* This final value prevents highlight showing in Android when something's clicked.  */
}
#title {
    /* Amateur title at top left  */
    font-variant: small-caps;
    position: absolute;
    z-index: 10;
    top:10px;
    left:10px;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 1px 1px hsl(10, 15%, 85%);
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: font-size 0.5s, color 0.5s, text-shadow 0.5s;
}
#title:hover {
    /* Title at top left  */
    font-size:1.6em;
    color:maroon;
    text-shadow: 1px 1px black;
}
#fullscreen {
    /* Fullscreen button at top right  */
    position: absolute;
    z-index: 10;
    right:10px;
    top:10px;
    cursor: pointer;
}
#layerContainer {
    /* Div that contains (as children) all layers managed by ZIndexMgr.
       Each layer is full size. */
    z-index: 1;
    position: absolute;
    width:100%;
    height:100vh;
    margin:0;
    background-color: #c9b9b6;
}
.layer {
    /* Each layer managed by ZIndexMgr has this style.
       Each layer is full sized. */
    position:absolute;
    width:100%;
    display: flex;
    justify-content: center;
    background-color: hsl(10, 15%, 75%);
    margin:0;
    height:100vh;
    color:black;
    font-family:Garamond, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: 1px 1px hsl(10, 15%, 85%);
    text-decoration: none;
    visibility: hidden;
    opacity:0;
    transition: opacity 1.5s;
}
.centered {
    /* Centers vertically  */
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.centered2 {
    /* Attached to content div (story div)  */
    max-width: 500px;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
@font-face {
    /* This is the story text's font. On all devices.
       The literary font is important in this piece. */
    font-family: Garamond;
    src: url(../fonts/GARA.TTF);
}
@font-face {
    font-family: Garamond;
    src: url(../fonts/GARABD.TTF);
    font-weight: bold;
}
@font-face {
    font-family: Garamond;
    src: url(../fonts/GARAIT.TTF);
    font-style: italic;
}
#content {
    /* Div that displays the content  */
    text-align: left;
    padding:20px;
    font-family:Garamond, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: 1px 1px hsl(10, 15%, 80%);
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
#vispoLogo {
    /* Logo at bottom right  */
    position: fixed;
    z-index: 10;
    right: 5px;
    bottom: 5px;
}
.redButton {
    /* Red buttons  */
    font-size:0.6em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    transition: font-size 0.5s, background-color 0.5s, color 0.5s;
    margin: 0 auto;
    margin-top:25px;
    text-align: center;
    background-color: maroon;
    color:#eee;
    text-shadow: 1px 1px black;
    padding:7px;
    border-radius: 7px;
    border: 1px solid black;
    cursor: pointer;
    width: 120px;
    transition: background-color 1s color 1s;
}
.redButton:hover {
    background-color: #a00000;
    font-size:0.7em;
}
.designer {
    /* Displays Design: Jim Andrews  */
    font-size:0.8em;
    text-align: center;
    font-variant: small-caps;
    letter-spacing: 0.25em;
}
.jim {
    /* Displays Jim's name  */
    color:black;
    font-size:0.9em;
    font-variant: small-caps;
    text-shadow: 1px 1px hsl(10, 15%, 85%);
    transition: color 1s, text-shadow 1s, font-size 0.3s;
    cursor: pointer;  
}
.jim:hover {
    color:maroon;
    font-size:1.2em;
    text-shadow: 0px 1px black;
}
.author {
    /* Displays Kirill's name  */
    font-size:1.2em;
    text-align: center;
    font-variant: small-caps;
}
.author2 {
    /* Displays Kirill's name  */
    font-size:1.3em;
    text-align: center;
    font-variant: small-caps;
}
.kirill {
    /* Displays Kirill's name  */
    color:black;
    font-size:1.1em;
    text-align: center;
    font-variant: small-caps;
    text-shadow: 1px 1px hsl(10, 15%, 85%);
    transition: color 1s, text-shadow 1s, font-size 0.3s;  
    cursor: pointer;
}
.kirill:hover {
    color:maroon;
    font-size:1.2em;
    text-shadow: 1px 0px black;
}
.pdfLink {
    /* Unused  */
    text-decoration: none;
    color:black;
    transition: font-size 1s, color 1s;
}
.pdfLink:hover {
    /* Unused  */
    color:maroon;
    font-size: 1.1em;  
}
.pdf {
    /* Unused */
    font-size: 0.7em;
    margin-top:20px;
    text-align: center;
    transition: font-size 1s;
}
.pdfLink2 {
    /* Displays 'Summary', 'Full text', 'About', 'Help'  */
    text-decoration: none;
    color:black;
    font-size: 1em;
    text-align: center;
    font-variant: small-caps;
    transition: font-size 0.3s, color 1s, text-shadow 1s;
    cursor: pointer;
    text-shadow: 1px 1px hsl(10, 15%, 85%);
}
.pdfLink2:hover {
    color:maroon;
    font-size: 1.6em;
    text-shadow: 1px 1px black;
}
.summary {
    /* Story summary  */
    font-size:0.8em;
    max-width:500px;
    padding:20px;
    text-shadow: 1px 1px hsl(10, 15%, 80%);
}