/**
* COLOR SCHEME
* Background:   #191919     rgb(25, 25, 25)
* Detail:       #005AA1     rgb(0, 90, 161)
* Main:         #003C6C     rgb(0, 60, 108)
* Text:         white       rgb(255, 255, 255)
* Rare:         #FF6EC7     rgb(255, 110, 199)
* Danger:       #BE2625     rgb(190, 38, 37)
* Sneaky:       #C0C0C0     rgb(192,192,192)
* Blood:        #AF111C     rgb(175, 17, 28)
* Sanity:       #4B0082     rgb(75, 0, 130)
* Energy:       #FFCC11     rgb(255, 204, 17)
* Exertion:     #FF6EC7     rgb(255, 110, 199)
**/

/* General text */
@font-face {
    font-family: 'Body';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/selawkl.ttf') format('truetype');
}


/* Titles */
@font-face {
    font-family: 'Titles';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/selawk.ttf') format('truetype');
}

/* Speech */
@font-face {
    font-family: 'Speech';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/selawk.ttf') format('truetype');
}

/* Fancy titles */
@font-face {
    font-family: 'Fancy Titles';
    font-style: normal;
    font-weight: 400;
    src: local('Cinzel Decorative Regular'), local('CinzelDecorative-Regular'),
        url('../fonts/cinzel-decorative-v5-latin-regular.woff2') format('woff2'),
        url('../fonts/cinzel-decorative-v5-latin-regular.woff') format('woff');
}

/* Interface */
@font-face {
    font-family: 'Interface';
    font-style: normal;
    font-weight: 400;
    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
        url('../fonts/source-sans-pro-v10-latin-regular.woff2') format('woff2'),
        url('../fonts/source-sans-pro-v10-latin-regular.woff') format('woff');
}

/* Inputs - Monospace */
@font-face {
    font-family: 'MonoInput';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
        url('../fonts/ubuntu-mono-v6-latin-regular.woff2') format('woff2'),
        url('../fonts/ubuntu-mono-v6-latin-regular.woff') format('woff');
}

html{
    height: 100%;
}

body{
    font-family: "Body";
    margin: 0;
    min-height: 800px;
    min-width: 1200px;
    background-color: #191919;             /* Background */
}

@media (min-width: 1210px) and (min-height: 810px) {
    body {
        overflow: hidden;
    }
}

a{
    text-decoration: none;
    font-weight: bold;
}

a:link, a:visited{
    color: white;               /* Text */
}

p, h1, h2, h3, h4, h5, h6{
    margin: 0px;
}

button:focus, textarea:focus{
    outline: 0;
}

/* Speech-color. */
.blue{
    font-family: "Speech";
    color: #005AA1; /* Static */
}

/* Speech-color. */
.cyan{
    font-family: "Speech";
    color: #00A2E8; /* Static */
}

/* Speech-color. */
.greyishblue{
    font-family: "Speech";
    color: #5878A8; /* Static */
}

/* Speech-color. */
.pink{
    font-family: "Speech";
    color: #FF6EC7; /* Static */
}

/* Speech-color. */
.palepink{
    font-family: "Speech";
    color: #E4B1AB; /* Static */
}

/* Speech-color. */
.purple{
    font-family: "Speech";
    color: #AC3BE4; /* Static */
}

/* Speech-color. */
.yellow{
    font-family: "Speech";
    color: #C4BC1A; /* Static */
}

/* Speech-color. */
.brightred{
    font-family: "Speech";
    color: #BE2625; /* Static */
}

/* Speech-color. */
.red{
    font-family: "Speech";
    color: #AF111C; /* Static */
}

/* Speech-color. */
.darkred{
    font-family: "Speech";
    color: #800000; /* Static */
}

/* Speech-color. */
.pinkred{
    font-family: "Speech";
    color: #91273b; /* Static */
}

/* Speech-color. */
.green{
    font-family: "Speech";
    color: #61B329; /* Static */
}

/* Speech-color. */
.milgreen{
    font-family: "Speech";
    color: #669048; /* Static */
}

/* Speech-color. */
.lightgreen{
    font-family: "Speech";
    color: #9BDB9C; /* Static */
}

/* Speech-color. */
.white{
    font-family: "Speech";
    color: white; /* Static */
}

/* Speech-color. */
.black{
    font-family: "Speech";
    color: #191919; /* Static */
}

/* Speech-color. */
.brown{
    font-family: "Speech";
    color: #B47B2E; /* Static */
}

/* Speech-color. */
.orange{
    font-family: "Speech";
    color:  #FF6600; /* Static*/
}

/* Used in theme transitions. */
.themetransition{
    transition: background-color 2.0s ease, border-color 2.0s ease, color 2.0s ease !important;
}

/* Used in scenes and throughout the project. */
.bold{
    font-weight: bold;
}

/* Used in scenes and throughout the project. */
.italic {
    font-style: italic;
}

/* Used in scenes and throughout the project. */
.underline {
    text-decoration: underline;
}

/* Used in scenes and throughout the project. */
.strikethrough {
    text-decoration: line-through;
}

/* Used in scenes and throughout the project. */
.small {
    font-size: 12px;
}

/* Used in scenes and throughout the project. */
.big {
    font-size: 20px;
}

/* Used in scenes and throughout the project. */
.nomargin{
    margin-bottom: 0px !important;
}

/* Used in stat changes and scenes. */
.center{
    text-align: center !important;
}

/* Various parts that are not yet done. */
.todo{
    color: red;
    background-color: yellow;
}

/* Fixes button inner-outline in Firefox. */
button::-moz-focus-inner {
    border: 0;
}

/* Loading screen that shows when Kobold Adventure is loading. */
.loadingscreen{
    position: absolute;
    top: 0px;
    left: 50%;
    height: 100%;
    z-index: 100;
    transform: translate(-50%, 0%);
}

/* Wrapper to make loading screen cover everything. */
.loadingscreenwrapper{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #191919;  /* Background */
}

/* Warning shown on loading screen when hotloading is enabled. */
.hotloadwarning{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 101;
    color: white;
    font-family: "MonoInput";
}

/* Progress shown below hotloadwarning. */
.hotloadprogress{
    top: 16px;
}

/* Image background for fading in and out during scenes. */
.imagebackground{
    position: absolute;
    top: 0px;
    left: 0px;
    min-height: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
    z-index: -1;
}

/* Popup used in inventory window. */
.fullscreenpopup{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 50;
    background-color: rgba(25, 25, 25, 0.7);        /* Background */
}

/* Center of a popup. */
.popupcenter{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 600px;
    border-width: 2px;
    border-style: solid;
    border-color: #191919;              /* Background */
    transform: translate(-25%, -50%);
    background-color: #003C6C;          /* Main */
    overflow-y: auto;
}

/* Firefox scrollbar of the popup container. */
.popupcenter {
    scrollbar-width: thin;
    scrollbar-color: #005AA1 transparent;   /* Detail */
}

/* The scrollbar of the popup container. */
.popupcenter::-webkit-scrollbar{
    width: 8px;
}

/* The scrollbar of the popup container. */
.popupcenter::-webkit-scrollbar-track{
    background-color: transparent;
}

/* The scrollbar of the popup container. */
.popupcenter::-webkit-scrollbar-thumb{
    background-color: #005AA1;  /* Detail */
}

/* Content of the popup window. */
.popupcontent{
    position: absolute;
    left: 50px;
    top: 50px;
    width: 500px;
    height: 500px;
    color: white;               /* Text */
}

.popupfinish {
    height: 50px;
    width: 500px;
}

/* Control bar containing the "Okay" button. */
.popupcontrolbar{
    position: -webkit-sticky; /* Safari fix. */
    position: sticky;
    left: 0px;
    top: 550px;
    width: 100%;
    height: 50px;
    background-color: #003C6C;  /* Main */
}

/* Button at the bottom center of a popup. */
.popupbutton{
    padding: 2px 15px !important;
    font-size: 30px !important;
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translate(-50%, 0);
}

/* Kobold Adventure's link menu. */
.popupmenu{
    width: 816px;
    height: 603px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    color: white;               /* Text */
    transition: height 0.75s;
}

@media (max-width: 1200px), (max-height: 800px) {
    .popupmenu {
        transform: none;
        left: 100px;
        top: 40px;
    }
    .fullscreenpopup {
        width: 1200px;
        height: 800px;
    }
    .loadingscreenwrapper {
        width: 1200px;
        height: 800px;
    }
    .loadingscreen {
        top: 0px;
        left: 0px;
        transform: none;
    }
}

@media (min-width: 1599px) and (min-height: 899px) {
    .imagebackground {
        max-width: unset;
        max-height: unset;
    }
}

/* Makes the popup menu invisible. */
.popupmenuinvisible{
    height: 0px;
}

/* Close button for the link menu. */
.menuclosebutton{
    position: absolute;
    right: 0px;
    top: 0px;
    left: auto;
    width: 30px;
    height: 30px;
    background-color: #191919;  /* Background */
    cursor: pointer;
    transform: none;
    border-right: none;
    border-top: none;
}

/* Text in the menu. */
.menucontent{
    margin-left: 50px;
    margin-right: 50px;
    height: 75px;
}

/* Group of buttons in the menu. */
.menubuttons{
    width: 844px;
    margin: auto;
    margin-top: 50px;
    padding-right: 11px;
}

/* Individual buttons in the menu. */
.menubutton{
    width: 150px;
    height: 150px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    float: left;
    margin-left: 11px;
    margin-bottom: 11px;
    background-color: #191919;  /* Background */
    transition: background-color 0.5s;
}

/* Individual buttons in the menu. */
.menubuttonselected{
    background-color: #005AA1;  /* Detail */
}

/* Image icon for buttons. */
.menubuttonicon{
    width: 150px;
    height: 100px;
}

/* Bottom text of a menu button. */
.menubuttonbottom{
    line-height: 50px;
    text-align: center;
    margin: 0px !important;
}

/* Two rows of bottom text of a menu button. */
.menubuttonbottomdouble{
    line-height: 30px;
    text-align: center;
    margin: -20px 0 0 0 !important;
}

/* Entire panel. */
.koboldadventure{
    position: absolute;
    width: 1200px;
    height: 800px;
    margin: auto;
    left: 0px;
    right: 0px;
    background-color: #005AA1;  /* Detail */
    color: white;               /* Text */
}

/* "Responsive". */
@media screen and ( min-height: 800px ){
    .koboldadventure{
        top: 50%;
        margin-top: -400px;
    }
}

/* Everything left of the main view. */
.leftbar{
    width: 300px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    user-select: none;
}

/* Panel containing logo image and logo text. */
.logopanel{
    width: 300px;
    height: 180px;
}

/* Image logo. */
.logo{
    width: 300px;
    height: 170px;
    position: absolute;
    top: 10px;
    left: 0px;
}

/* Text to the right of logo. */
.logotext{
    width: 200px;
    height: 80px;
    position: absolute;
    top: 20px;
    left: 100px;
    text-align: center;
    vertical-align: middle;
    font-size: 30px;
    font-family: "Fancy Titles";
}

/* Panel containing tab buttons. */
.tabpanel{
    width: 300px;
    height: 480px;
    margin-top: 5px;
    text-align: center;
}

/* Tab button. */
.tab{
    width: 200px;
    height: 64px;
    margin-bottom: 15px;
    border: 0px;
    font-size: 30px;
    color: white;               /* Text */
    border-radius: 9px 60px 10px 30px;
    background-color: #003C6C;  /* Main */
    transition: background-color 0.6s ease;
    position: relative; /* Enables blinking */
    overflow: hidden;
}

/* Tab button onhover. */
.tab:hover{
    border-width: 4px 0px 3px 0px;
    border-color: white;        /* Text */
    border-style: solid;
}

/* White tab box thing (RIP). */
/*.tab::before {
    content: "";
    position: absolute;
    left: calc(50% - 100px);
    margin-top: -15px;
    height: 110px;
    width: 32px;
    transform: rotate(-20deg);
    background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.07) 20%, rgba(255,255,255,0.05), rgba(255,255,255,0.25));
}*/

/* Animation for blinking tab. */
@keyframes blinkingtab {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* Makes a tab button blink. */
.blinktab::after {
    content: "";
    position: absolute;
    left: calc(50% - 100px);
    margin-top: -15px;
    height: 64px;
    width: 200px;
    background-image: radial-gradient(rgba(255,255,255,0.4) 0%, transparent 65%, transparent);
    opacity: 0;
    animation: blinkingtab 2s infinite;
    animation-direction: alternate;
}

/* Active tab button. */
.tabactive{
    border-width: 4px 0px 3px 0px;
    border-color: white;
    border-style: solid;
    background-color: #005AA1;  /* Detail */
}

/* Active tab button - ensure no blinking. */
.tabactive::after{
    opacity: 0 !important;
    animation: none;
}

/* Button panel containing the four buttons at the bottom left. */
.buttonpanel{
    width: 300px;
    height: 120px;
    margin-top: 15px;
    text-align: center;
}

/* One of the four buttons at the bottom left. */
.uibutton{
    width: 100px;
    height: 35px;
    margin-bottom: 5px;
    border-radius: 5px;
    background-color: #003C6C;  /* Main */
    color: white;               /* Text */
    border: 0px;
    font-family: 'Interface';
    font-size: 16px;
    cursor: pointer;
}

/* Button at the bottom left on hover. */
.uibutton:hover{
    border-width: 2px; 
    border-color: #191919;      /* Background */
    border-style: solid;
}

/* Button ast the bottom left when clicked. */
.uibutton:active{
    background-color: #191919;  /* Background */
}

/* Container for the small text at the bottom left. */
.disclaimer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 215px;
    margin-bottom: 5px;
    margin-left: 5px; 
}

/* Text inside of the disclaimer container is small. */
.disclaimertext{
    font-size: 12px;
}

/* Global mute button at the bottom right of the left panel. */
.globalmute{
    margin: 0px;
    position: absolute;
    width: 30px;
    height: 30px;
    right: 48px;
    bottom: 10px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0px 4px 0px 3px;
}

/* Give globalmute a border like uibuttons when hovered. */
.globalmute:hover{
    width: 26px;
    height: 26px;
}

/* Global mute button, muted. */
.globalmuteon{
    background-image: url("../img/icons/audio-off.png");
}

/* Global mute button, unmuted. */
.globalmuteoff{
    background-image: url("../img/icons/audio-on.png");
}

/* Invisible things. */
.invisible{
    display: none;
}

/* The main container. */
.main{
    position: absolute;
    width: 900px;
    height: 800px;
    left: 300px;
    top: 0px;
    background-color: #003C6C;  /* Main */
    color: white;               /* Text */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Firefox scrollbar of the main container. */
.main {
    scrollbar-width: thin;
    scrollbar-color: #005AA1 transparent;   /* Detail */
}

/* The scrollbar of the main container. */
.main::-webkit-scrollbar{
    width: 8px;
}

/* The scrollbar of the main container. */
.main::-webkit-scrollbar-track{
    background-color: transparent;
}

/* The scrollbar of the main container. */
.main::-webkit-scrollbar-thumb{
    background-color: #005AA1;  /* Detail */
}

/* Saving throbber. */
.throbber{
    z-index: 40;
    display: none;
    position: absolute;
}

/* Loading and saving throbber images. */
.throbber img{
    width: 100%;
}

/* Loading throbber position. */
.loading{
    right: 0px;
    bottom: 0px;
}

/* Saving throbber position. */
.saving{
    right: 12px;
    bottom: 0px;
    height: auto;
}

/* Top right part of the save and load tabs. */
.savelimit{
    position: absolute;
    top: 5px;
    right: 10px;
    color: #C0C0C0;             /* Sneaky */
}

/* The control bar at the bottom of save/load tabs. */
.savecontrolbar{
    position: -webkit-sticky; /* Safari fix. */
    position: sticky;
    left: 0px;
    top: 700px;
    width: 100%;
    height: 100px;
    background-color: #003C6C;  /* Main */
}

/* The left button on the control bar. */
.saveleftbutton{
    position: absolute;
    width: 155px;
    left: 50px;
    bottom: 20px;
    padding: 2px 15px !important;
    font-size: 40px !important;
    transition: background-color 0.4s ease;
}

/* Small button below the control bar. */
.savesmallleftbutton{
    width: 75px;
    position: absolute;
    left: 53px;
    bottom: 3px;
    font-size: 11px !important;
    border-width: 1px !important;
}

/* Small button below the control bar. */
.savesmallrightbutton{
    width: 75px;
    position: absolute;
    left: 773px;
    bottom: 3px;
    font-size: 11px !important;
    border-width: 1px !important;
}

/* The comment field in between the buttons on the save tab. */
.savenewcommentfield{
    position: absolute;
    left: 24.5% !important;
    bottom: 27px !important;
}

/* The right button on the control bar. */
.saverightbutton{
    position: absolute;
    width: 155px;
    right: 42px;
    bottom: 20px;
    padding: 2px 15px !important; 
    font-size: 40px !important;
    transition: background-color 0.4s ease;
}

/* The milestones button at the center of the load tab control bar. */
.milestonebutton {
    position: absolute;
    width: 226px;
    left: 333px;
    bottom: 20px;
    padding: 2px 15px !important; 
    font-size: 40px !important;
}

/* The back button on the milestones tab. */
.milestonebackbutton {
    position: absolute;
    width: 135px;
    left: -20px;
    top: -20px;
    padding: 2px 15px !important; 
    font-size: 26px !important;
}

/* The back button on the milestones tab. */
.milestoneresetbutton {
    position: absolute;
    width: 80px;
    right: -20px;
    top: -20px;
    padding: 2px 15px !important; 
    font-size: 18px !important;
}


.savedraganddropoverlay{
    position: -webkit-sticky; /* Safari fix. */
    position: sticky;
    height: 700px;
}

/* Save slot for both loading and saving tabs. */
.saveslot{
    width: 800px;
    height: 100px;
    border-radius: 15px;
    margin-bottom: 20px;
    position: relative;
    background-color: #191919;   /* Background */
    font-size: 20px;
}

/* Save slot for autosaves and new games. */
.smallsaveslot{
    width: 800px;
    height: 42px;
    border-radius: 15px;
    margin-bottom: 20px;
    position: relative;
    background-color: #191919;   /* Background */
    font-size: 20px;
}

/* Make it so you can't select anything in save slots. */
.saveslot *, .smallsaveslot * {
    user-select: none;
    pointer-events: none;
}

/* Class to be assigned to save slots when selected. */
.saveslot:hover, .smallsaveslot:hover{
    border-width: 2px;
    border-style: solid;
    border-color: #005AA1;    /* Detail */
    width: 796px;
    margin-bottom: 16px;
}

/* Class to be assigned to save slots when selected. */
.saveslotselected{
    border-width: 2px;
    border-style: solid;
    border-color: white !important;     /* Text */
    width: 796px;
    margin-bottom: 16px;
}

/* Save gender-background. */
.savegender {
    left: 50px;
    max-height: 100%;
    position: absolute;
}

/* Save gender-background for small saves. */
.smallsaveslot .savegender {
    left: 110px;
}

/* Save number. */
.saverank {
    top: 5px;
    left: 10px;
    position: absolute;
}

/* Save time ago. */
.savetimestamp {
    top:5px;
    right: 10px;
    position: absolute;
}

/* Save character name. */
.savename {
    top: 5px;
    right: 0px;
    width: 40%;
    position: absolute;
    text-align: left;
}

/* Save scene. */
.savescene {
    top: 5px;
    left: 15%;
    width: 40%;
    position: absolute;
    text-align: center;
}

/* Save comment. Text box. */
.savecomment {
    bottom: 15px;
    left: 33%;
    position: absolute;
    font-family: "MonoInput";
    overflow: hidden;
    background-color: transparent;
    color: white;               /* Text */
    font-size: 16px;
    resize: none;
}

/* A block of milestones on the milestones page. */
.milestoneblock {
    position: relative;
    margin-bottom: 25px;
}

/* A single milestone on the milestones page. */
.milestone {
    width: 784px;
    height: 24px;
    padding: 3px;
    border-style: solid;
    border-width: 3px;
    border-radius: 5px;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 7px;
    position: relative;
    display: inline-block;
    user-select: none;
    background-color: #191919;      /* Background */
}

/* Half a milestone on the milestones page. */
.milestonehalf {
    width: 384px;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 3px;
}

/* Extra bottom padding because something fucked up. */
.milestonehalffix {
    margin-bottom: 7px;
}

/* An unlocked milestone on the milestones page. */
.milestoneunlocked {
    background-color: #005AA1;      /* Detail */
    border-color: #005AA1;          /* Detail */
}

/* A locked milestone on the milestones page. */
.milestonelocked {
    border-color: #191919;          /* Background */
}

/* The name of a milestone. */
.milestonename {
    line-height: 24px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 5px;
    float: left;
}

/* The scene of a milestone. */
.milestonescene {
    line-height: 24px;
    font-size: 14px;
    padding-left: 15px;
    float: left;
}

/* The hint of a milestone. */
.milestonehint {
    line-height: 24px;
    font-size: 12px;
    margin-right: 5px;
    overflow: hidden;
    text-align: right;
    /*font-size: 12px;
    margin-left: 15px;
    float: left;*/
}

/* The image of an achievement. */
.milestoneachievementthumbnail {
    float: left;
    margin-left: 20px;
}

/* The image of an achievement. */
.milestoneachievementimage {
    visibility: hidden;
    position: absolute;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.4s ease;
    margin-top: 6px;
}

.milestoneachievementimageright {
    left: -420px;
}

.milestoneachievementimageleft {
    left: -20px;
}

/* Make the images fade in and out. */
.milestoneunlocked:hover .milestoneachievementimage {
    visibility: visible;
    opacity: 1 !important;
}

/* Make the load buttons fade in and out. */
.milestoneunlocked:hover .milestoneloadbutton {
    opacity: 1 !important;
}

/* Progress bar for milestones. */
.milestonesprogress {
    float: right;
    width: 400px !important;
    height: 30px !important;
    margin-top: 6px;
}

/* Total progress bar for milestones. */
.milestonestotalprogress {
    width: 600px !important;
    height: 40px !important;
    margin-bottom: 50px;
}

/* Text for milestones total progress bar. */
.milestonetotalprogresstextleft {
    float: left;
    font-size: 20px;
    margin-top: 7px;
    margin-left: 22px;
    margin-right: 20px;
    width: 55px;
    text-align: center;
}

/* Text for milestones total progress bar. */
.milestonetotalprogresstextright {
    float: right;
    font-size: 20px;
    margin-top: 7px;
    margin-right: 12px;
    width: 75px;
    text-align: center;
}

/* Text for milestones progress bars. */
.milestoneprogresstext {
    float: right;
    font-size: 20px;
    margin-top: 7px;
    margin-left: 20px;
}

/* Popups for achieving an achievement. */
.achievementpopup {
    width: 294px;
    height: 100px;
    background-color: #005AA1;      /* Detail */
    border-radius: 20px;
    margin-bottom: 5px;
    padding: 10px;
    border-width: 3px;
    border-style: solid;
    border-color: #191919;          /* Background */
    color: white;                   /* Text */
    cursor: pointer;
    user-select: none;
}

/* "Achievement unlocked" for the achievement popups. */
.achievementpopupunlocked {              
    text-align: center;
    text-decoration: underline;
    font-size: 20px;
    margin-bottom: 6px;
}

/* Name for the achievement popups. */
.achievementpopupname {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}

/* Description for the achievement popups. */
.achievementpopupdescription {
    text-align: center;
    font-size: 16px;
}

/* Container for the achievement popups. */
.achievementpopupcontainer {
    position: absolute;
    width: 320px;
    right: 5px;
    bottom: 0px;
}

/* The main content. */
.content{
    position: absolute;
    width: 800px;
    height: 700px;
    top: 50px;
    left: 50px;
}

/* Main titles. */
.title{
    font-family: "Titles";
    font-size: 50px;
    text-align: center;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px black; /* Text-shadow */
}

/* Main subtitles. */
.subtitle{
    font-size: 32px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px black; /* Text-shadow */
}

/* Main subsubtitles. */
.subsubtitle{
    font-size: 24px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px black; /* Text-shadow */
}

/* Main subsubsubtitles. */
.subsubsubtitle{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px black; /* Text-shadow */
}

/* Paragraph. */
.text{
    text-align: justify;
    font-size: 16px;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px black; /* Text-shadow */
}

/* Buttons. */
.button{
    padding: 1px 6px; /* Normalize padding across browsers. */
    background-color: #005AA1;  /* Detail */
    color: white;               /* Text */
    font-size: 20px;
    border-width: 3px;
    border-style: solid;
    border-color: #003C6C;      /* Main */
    transition: 0.4s border; /* Same as popup fade-in. */
}

/* A load button on the milestones page. */
.milestoneloadbutton {
    position: absolute;
    right: 5px;
    top: 3px;
    height: 24px;
    font-size: 12px !important;
    background-color: #003C6C;  /* Main */
    opacity: 0;
    transition-property: opacity, border !important;
}

/* A centered load button on the milestones page. */
.milestoneloadbuttoncentered {
    right: 375px;
}

.button:hover{
    border-color: #191919;      /* Background */
}

.button:active{
    background-color: #191919;  /* Background */
    transition: all 0.2s ease;
}

.button:disabled{
    background-color: #191919;  /* Background */
    border-color: #003C6C;      /* Main */
    transition: all 1s ease;
}

.selected{
    border-color: #FF6EC7 !important;      /* Rare */
}

/* Titlescreen button. */
.bigbutton{
    background-color: #191919;  /* Background */
    border-radius: 5px;
    padding: 20px;
    border: 0px;
    font-family: "Titles";
    font-size: 32px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    display: block;
    transition: all 0.8s ease;
}

/* Titlescreen button hover. */
.bigbutton:hover{
    padding: 30px;
    margin-top: 30px;
}

/* Continue button. Used in scenes. */
.continuebutton{
    margin-left: 570px;
    padding: 16px;
}

/* Continue button hover. */
.continuebutton:hover{
    padding: 22px;
    margin-top: 34px;
}

/* Container for choices that prevents text from spilling out 
   into the remainder of the horizontal space.*/
.choicecontainer{
    width: 100%;
    margin-bottom: 20px;
    float: left;
}

/* A single, very wide choice-button. */
.choice{
    width: 240px;
    height: 50px;
    margin-right: 20px;
    float: left;
}

/* Choice header on the same line as all choices. */
.inlinechoiceheader{
    font-size: 20px;
    float: left;
    margin-right: 40px;
    line-height: 50px;
    font-family: "Titles";
}

/* Choice header taking up an entire line fit for multiple lines of choices. */
.fulllinechoiceheader{
    font-size: 20px;
    float: left;
    margin-right: 40px;
    line-height: 50px;
    height: 100%;
    font-family: "Titles";
}

/* A full row of inline choices. */
.choicerow {
    width: 100%;
    float: left;
}

/* Inline choices like gender selection in the introduction. */
.inlinechoice{
    width: 150px;
    height: 50px;
    float: left;
}

/* A wide choice. */
.widechoice {
    width: 190px;
}

/* Scenes. Introduction. */
.inlinechoiceseparator{
    width: 3px;
    height: 40px;
    border: none;
    background-color: white;    /* Text */
    float: left;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 5px;
    margin-bottom: 0px;
}

/* Shows a red aura for choices, indicating danger. */
.dangeraura{
    box-shadow: 0px 0px 16px 6px rgba(175, 17, 28, 0.6);    /* Blood */
}


.quadchoice{
    width: 300px;
    height: 70px;
    float: left;
}

/* Generic text inputs, like the name input in the introduction. */
.textinput{
    font-size: 20px;
    height: 20px;
    padding: 5px;
    margin-top: 7px;
    width: 400px;
    border-width: 3px;
    border-style: solid;
    border-color: #191919;      /* Background */  
    color: white;               /* Text */
    background-color: #005AA1;  /* Detail */ 
}

/* Alter textinput's color when disabled. */
.textinput:disabled{
    color: white;               /* Text */
    background-color: #191919;  /* Background */      
}

/* Disable default blue border. */
.textinput:focus{
    outline: none;
}

/* Button for textual input. */
.textinputbutton{
    margin-left: 20px;
    font-size: 20px;
    padding: 5px;
}

/* Hline on title screen. */
.smallseparator{
    width: 400px;
    border: 0px;
    background-color: #005AA1;  /* Detail */
    height: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Finishers used in every scene and throughout the project. */
.finish{
    height: 50px;
    width: 700px;
    float: left;
}

/* Custom layout for shop menus. */
.shop{
    margin-bottom: 20px;
}

/* Half of the main window. */
.half{
    width: 400px;
    float: left;
}

/* Left half of the main window, with right-padding. */
.lefthalf{
    width: 396px;
    float: left;
    padding-right: 4px;
}

/* Right half of the main window, with left-padding.*/
.righthalf{
    width: 396px;
    float: right;
    padding-left: 4px;
}

/* Needless, but added to script div regardless. */
.scripts{
    visibility: hidden;
}

/* Title screen. */
.fancy{
    font-family: 'Fancy Titles';
}

/* Delete button in save and load tab. */
.warning{
    background-color: #BE2625;  /* Danger */
}

/* Inventory tab. Scenes. */
.warningtext{
    color: #BE2625;             /* Danger */
}

/* Inventory tab. Scenes. */
.sneakytext{
    color: #C0C0C0;             /* Sneaky */ 
}

/* Wrapper for container division for tooltips. */
.tooltipcontainer{
    display: inline-block;
    position: relative;
}

/* Tooltips. */
.tooltip{
    border-width: 2px;
    background-color: #005AA1;  /* Detail */
    border-color: #191919;      /* Background */  
    border-style: solid;
    padding: 4px;
    text-align: center;
    line-height: normal; /*Fixes inventory screen.*/
    width: 150px; /*Default width.*/
    color: white !important;    /* Fixes tooltips in [color] */
    font-weight: initial;    /* Fixes item tooltips in [b] */
    font-size: 16px; /* Fixes tooltips in [big] */
    font-family: 'Body'; /* Fixes tooltips in [color] */
}

/* Make tooltips in containers invisible and fixes their positioning. */
.tooltipcontainer .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    transition: opacity 0.4s ease;
}

/* Show tooltips on container hover. */
.tooltipcontainer:hover .tooltip{
    visibility: visible;
    opacity: 1;
}

/* Header of a tooltip. */
.tooltipheader{
    background-color: #003C6C;      /* Main */
    margin-bottom: 2px;
    padding-bottom: 1px;
}

.tooltipimg {
    margin-top: 4px;
    margin-bottom: -2px; /* Counteracts nonsensical text bleed */
    background-color: #003C6C;      /* Main */
}

/* Bottom of a tooltip. */
.tooltipbottom{
    float: left;
    width: 100%;
    margin-top: 4px;
    background-color: #003C6C;      /* Main */
}

/* Price at the bottom of a tooltip. */
.toolbottomprice{
    float: right;
    width: 50px;
    text-align: center;
}

/* Offence at the bottom of a tooltip. */
.toolbottomoffence{
    float: left;
    width: 50px;
    text-align: center;
}

/* Defence at the bottom of a tooltip. */
.toolbottomdefence{
    display: inline-block;
    width: 50px;
    text-align: center;
}

/* Gold, offence and defence icons. */
.icon{
    max-height: 12px;
    display: inline-block;
}

/* All rows of items in the inventory screen. */
.itemrow{
    width: 100%;
    height: 40px;
    line-height: 40px;
}

/* Even rows of items in the inventory screen. */
.itemroweven{
    background-color: #005AA1;      /* Detail */
}

/* Odd rows of items in the inventory screen. */
.itemrowodd{
    background-color: #003C6C;      /* Main */
}

/* Number of items in the inventory screen. */
.itemrownumber{
    width: 50px;
    height: 100%;
    text-align: center;
    position: relative;
    float: left;
}

/* x in between number and item name in the inventory screen. */
.itemrowx{
    width: 50px;
    height: 100%;
    text-align: center;
    position: relative;
    float: left;
}

/* Name of the item in the inventory screen. */
.itemrowname{
    width: 400px;
    height: 100%;
    position: relative;
    float: left;
}

/* Value of the item in the inventory screen. */
.itemrowvalue{
    width: 100px;
    height: 100%;
    position: relative;
    float: left;
}

/* Sell button container. */
.itemrowsellcontainer{
    width: 80px;
    height: 40px;
    position: relative;
    float: left;
}

/* Sell button in the inventory screen. */
.itemrowsell{
    width: 80px;
    margin-top: 5px;
    height: 30px;
}

/* Sell button container. */
.itemrowusecontainer{
    width: 80px;
    height: 40px;
    position: relative;
    float: left;
    margin-left: 20px;
}

/* Use button in the inventory screen. */
.itemrowuse{
    width: 80px;
    margin-top: 5px;
    height: 30px;
    transition: 0.2s all;
}

/* Stat name of the attributes on the stats tab. */
.statname {
    width: 100px;
    float: left;
}

/* Stat number of the attributes on the stats tab. */
.statnumber {
    width: 40px;
    text-align: center;
    float: left;
}

/* Stat comment of the attributes on the stats tab. */
.statcomment {
    width: 260px;
    float: left;
}

/* Outer status tab healthbar. */
.healthbar {
    width: 794px;
    height: 40px;
    border-color: #191919;     /* Background */
    border-width: 3px;
    border-style: solid;
    border-radius: 43px 0px 20px 0px;
    overflow: hidden;
}

/* Inner status tab healthbar. */
.healthbarinner {
    height: 100%;
}

/* Status tab health. */
.health {
    background-color: #AF111C;      /* Blood */
}

/* Status tab sanity. */
.sanity {
    background-color: #4B0082;      /* Sanity */
}

/* Status tab stamina. */
.stamina {
    background-color: #FFCC11;      /* Energy */
}

/* Status tab exertion. */
.exertion {
    background-color: #FF6EC7;      /* Exertion */
}

/* Status tab comments. */
.healhbarcomment {
    width: 350px;
    float: left;
    text-align: left;
}

/* Status tab numbers. */
.healthbarnumber {
    width: 100px;
    float: left;
    text-align: center;
}

/* Status tab last hit taken. */
.healhbarlasthit {
    width: 350px;
    float: left;
    text-align: right;
}

/* Loadbar container div. */
.loadbar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translate(150px, 220px);
    width: 800px;
    height: 100px;
    z-index: 1;
    font-size: 24px;
    color: white;           /* Text */
}

/* Make loadbar transition nicely. */
.loadbarinner{
    transition: width 0.3s linear;
}

/* Loadbar absolute progress. */
.loadbarabsolute{
    float:  left;
}

/* Loadbar relative progress. */
.loadbarrelative{
    float: right;
}

/* 600 pixels wide image (super wide margins) */
.smallestimage{
    width: 600px;
}

/* 700 pixels wide image (wide margins) */
.smallerimage{
    width: 700px;
}

/* 750 pixels wide image (decent margins) */
.smallimage{
    width: 750px;
}

/* 800 pixels wide image (standard margins) */
.standardimage{
    width: 800px;
}

/* 850 pixels wide image (text and then some) */
.mediumimage{
    width: 850px;
    margin-left: -25px;
}

/* 900 pixels wide image (from side to side) */
.wideimage{
    width: 900px;
    margin-left: -50px;
}