/*
CSS STYLES FILE FOR VOLTAIC
====================================================
Contains the styling and sets the positioning for the in visible HTML elements in game.
Please see code reference [6] in REFERENCES.txt
Last modified by Joe Bevis 28/10/2021
====================================================
*/

/* body used to color the background, set up the page dimensions and set the font. */
body {
    background: rgb(83, 101, 107);
    font-family: "Lucida Console", "Courier New", monospace;
    text-align: center;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* unique styling of the game title - VOLTAIC */ 
#gameTitle {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    color: rgb(6, 190, 252);
    font-size: 75px;
    text-shadow: 5px 5px 5px rgb(38, 53, 58), 0px -5px 5px rgb(6, 190, 252);
}

/* unique styling for the start game button on the title screen */
#startButton {
    height: 100px;
    width: 300px;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 30px;
    border-radius: 5px;
    background: linear-gradient(to bottom, rgb(6, 190, 252), white)
}

/* appearance of the text entry field on the game title screen*/
input[type=text] {
    height: 10%;
    width: 70%;
    padding: 12px 20px;
    margin: 20px 0;
    box-sizing: border-box;
    border: 2px solid rgb(38, 53, 58);
    border-radius: 4px;
    font-weight: 700;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 30px;
    text-align: center;
}

/* general styling and central positioning for containers that should look similar */
.container {
    position: absolute;
    background: rgba(98, 148, 182, 0.726);
    padding: 20px;
    width: 70vw;
    border-radius: 5px;
    border-width: 7px;
    border-style: outset;
    border-color: rgb(55, 58, 58);
    box-shadow: 0px 5px 5px #62b4eb;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

/* adjusting positioning and dimensions of specific containers that make up the UI */
#batteryBox {
    width: 300px;
    height: 120px;
    transform: translate(-50%, -420px);
}
#nameEntryContainer {
    text-align: center;
    visibility: visible;
    font-size: 30px;
    width: 800px;
    height: 575px;
}
/* credits div is not displayed until the credits button is clicked */
#creditsContainer {
    display: none;
    text-align: center;
    visibility: visible;
    font-size: 30px;
    width: 800px;
    height: 575px;
}
/* adventure text and dialogue choices container divs are not visible until the game starts */
#dialogueChoicesContainer {
    visibility: hidden;
    width: 1400px;
    height: 175px;
    transform: translate(-50%, 200px);
}
#adventureTextContainer {
    visibility: hidden;
    position: absolute;
    padding: 40px;
    width: 750px;
    height: 100px;
    transform: translate(-50%, -10px);
}

/* styling and positioning for the name plates that indicate who is speaking */
.namePlate {
    visibility: hidden;
    padding: 5px;
    text-align: center;
    font-size: 25px;
    font-style: italic;
    text-shadow: 1px 1px 1px black;
    border-width: 5px;
    width: 150px;
    height: 30px;
    box-shadow: none;
}
/* text color for the nameplates matches the speaker text color */
#namePlateLeft {
    color: blue;
    transform: translate(-400px, -50px);
}
#namePlateRight {
    color: orange;
    transform: translate(200px, -50px);
}

/* adventure text is printed on screen using many span elements */
span {
    font-size: 35px;
    font-weight: bolder;
    text-shadow: 1px 1px 1px black;
}
/* the hidden and revealed classes are used by the typewriter effect in RevealSpanCharacters() to reveal the characters in the sentence over time */
span.hidden {
    opacity: 0;
}
span.revealed {
    opacity: 1;
}

/* grid of buttons with two columns for the dialogue options within a div inside the main dialogue choices container */
#dialogueChoices {
    visibility: hidden;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 10px;
    margin-top: 10px;
    max-height: 10%;
}

/* generic button class contains the styling for buttons of all types to appear consistent */
.genericButton {
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 25px;
    font-weight: bolder;
    text-shadow: 0.5px 0.5px 0.5px black;
    height: 50px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 5px 10px;
    background-color: transparent;
}
/* style change of the buttons when they are hovered over to indicate the interactivity */
.genericButton:hover {
    border: 3px solid black;
    background-color: white;
    padding: 4px 9px;
}

/* dialogue option button styles include the visibility of the parent div container to ensure that they get hidden properly */
.choiceButton {
    visibility: inherit;
    position: relative;
}

/* centralButton class ensures that the element appears in the center of the parent container div by using % */
.centralButton {
    visibility: hidden;
    position: absolute;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* styling and centering for each canvas with pointer events disabled to stop the canvas blocking button interactivity */
canvas {
    visibility: visible;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   
    pointer-events: none;
}
/* only the background canvas needs the outset style border and shadow */
#backCanvas {
    border-style: outset;
    border-width: 10px;
    border-color: rgb(55, 58, 58);
    box-shadow: 0px 10px 15px black;
    background: black;
}