adventure.css

/*
Z-indexes

0 - body
1 - storyDiv
2 - story
3 - dropdown, dropdownContent

*/

/*
   The html and body css probably have a very similar effect
   #story "inherits"
*/

html,
#story {
   font-family: monospace;
   font-size: large;
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties */
.startGameBackgroundTransition {
   transition-property: background-color, color;
   transition-duration: 7s;
   transition-timing-function: linear;
   background-color: #14161a;
   color: white;
}

body {
   background-color: white;
}

/* Before game is started */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details */
details {
   border: 1px solid #aaa;
   border-radius: 4px;
   padding: 0.5em 0.5em 0;
   background-color: #fbfffd; /* mintcream darkness / 2.5 */
}

summary {
   font-weight: bold;
   margin: -0.5em -0.5em 0;
   padding: 0.5em;
   background-color: white;
}

details[open] {
   padding: 0.5em;
}

details[open] summary {
   border-bottom: 1px solid #aaa;
   margin-bottom: 0.5em;
}

/* So that nested details doesn't show details[open] summary style */
details:not([open]) summary {
   border-bottom: 0;
   margin-bottom: 0;
}

details p {
   margin-bottom: 0;
   margin-top: 0.5em;
}

#accessibilityNotes,
#start,
#continue {
   font-family: Helvetica;
}

@keyframes start-screen-button-animation {
   0%   { background-color: #fff; }
   1%   { background-color: #ffe; }
   2%   { background-color: #fef; }
   3%   { background-color: #eff; }
   4%   { background-color: #fee; }

   5%   { background-color: #efe; }
   6%   { background-color: #eef; }
   9%   { background-color: #eee; }
   14%  { background-color: #ffd; }
   15%  { background-color: #fdf; }

   26%  { background-color: #dff; }
   31%  { background-color: #dfe; }
   35%  { background-color: #def; }
   41%  { background-color: #edf; }
   53%  { background-color: #fde; }

   59%  { background-color: #fed; }
   65%  { background-color: #efd; }
   79%  { background-color: #dfd; }
   89%  { background-color: #fdd; }
   97%  { background-color: #ddf; }

   100% { background-color: #def; }
}

@keyframes welcome-animation {
   /* margin goes: top right bottom left */
   0%   { margin: 1em 0; } /* top-bottom. this is default */
   25%  { margin: 0 0 0 0; }
   50%  { margin: -2em 1em 0 0; }
   75%  { margin: -5em 4em 0 0; }
   100% { margin: 1em 0; }
}

#start,
#continue {
   display: flex;
   padding: 1em 6em; /* top-bottom, left-right */
   justify-content: center;
   font-size: large;
   background-color: inherit;
   border: outset;
}

#start {
   /* duration | timing-function | delay | iteration-count | name */
   animation: 6s ease-in -2s infinite start-screen-button-animation;
}

#continue {
   /* duration | timing-function | iteration-count | direction | name */
   animation: 10s ease-out infinite reverse start-screen-button-animation;
}

#gameName {
   font-size: 2.1em;
   text-shadow: 0 0 2px #fd5, 1px 1px 2px #1fbfff;
}

#subTitle {
   /* duration | iteration-count | name*/
   animation: 5s 1 welcome-animation;

   padding-left: 7em;
   font-size: 1.17em;
   font-weight: bold;
}

/* "Why are you using camelCase ugh that's not what you're..." */
#gameMenu {
   background-color: transparent;
   color: white;
}

/* Dropdown from https://www.w3schools.com/howto/howto_css_dropdown.asp */
.dropdown {
   position: absolute;
   top: 10px;
   right: 10px;
   display: inline-block;
   z-index: 3;
}

.dropdownContent {
   display: none;
   position: absolute;
   top: 10px;
   right: 10px;
   min-width: 160px;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   z-index: 3;
}

.dropdownContent button {
   background-color: #1e90ff;
   color: #fff;
   padding: 12px 16px;
   font-size: 16px;
   border: none;
   display: block;
}

/* More accessibility */
.dropdownContent button:hover { background-color: #ddd; }
.dropdownContent button:focus { background-color: #ddd; }

.dropdown:hover .dropdownContent { display: block; }
#gameMenu:focus + .dropdownContent { display: block; }

#gameMenu:focus { background-color: #ddd; }
.dropdown:hover #gameMenu { background-color: #ddd; }

#menuInstructions:hover {
   cursor: help;
}

/* End of dropdown */

/* So that the menu works = ugh */

#story {
   padding: 0.25%;
   margin: 0;
   position: relative;
   display: inline-block;
   width: 75%;
   height: 75%;
   overflow-y: auto;
   border-right: 1px solid white;
   border-bottom: 1px solid white;
   z-index: 1;
}

#story:first-child {
   margin-top: 0;
}

#infoContainer {
   position: fixed;
   top: 10px;
   left: 76%;
   width: 23%;

   /* To pass the https://webaim.org/resources/contrastchecker/ */
   border: 1px solid #42a1ff;
}

#playerInfoContainer {
   border: 1px solid green;
}

#playerInfo {
   margin-top: 0;
   padding-left: 1%;
}

#playerInfoHeader {
   margin-top: 0;
}

#messageConsoleContainer {
   border: 1px solid red;
}

#messageConsoleHeader {
   margin-top: 0;
}

#messageConsole {
   margin-bottom: 0;
   padding-left: 1%;
   padding-right: 1%;
}

#playerConsoleContainer {
   position: absolute;
   bottom: 2%;
   height: 22%;
   width: 75%;
   border-left: 1px solid orange;
}

#playerConsole {
   margin-top: 0;
   margin-left: 10px;
   height: 100%;
   width: 100%;
}

/* official */
.dogeblue {
   color: dodgerblue;
}

/* misspelled */
.misspell {
   text-decoration: #f00 wavy underline;
}

/* link */
.link {
   color: #9cceff;
   text-decoration: underline;
}

.link:hover {
   cursor: pointer;
   color: #4da6ff;
}

/* accessibility */
.link:focus {
   color: orange;
}

.link:active {
   color: #ff654d;
}

button.link {
   display: inline-block;
   position: relative;
   background-color: transparent;
   cursor: pointer;
   border: 0;
   padding: 0;
   font: inherit;
}

/* robot */
.gray {
   color: #a1a1a1;
}

/* fun (often kid) */
.green {
   color: #cfc;
}

/* sound (console Warning) */
.orange {
   color: orange;
}

/* urgent (console Error) */
.red {
   color: red;
}

.purple {
   color: #b186b1;
}

li {
   /* Variables */
   --color-one: white;
   --color-two: cyan;
   --color-three: orange;
   --color-four: #e06c75;
   --color-five: dodgerblue;
   --color-six: #ff80ff; /* By lighten(purple, 50%) */
   --color-seven: #98c379;
   --color-eight: #ec0; /* #ffdc09 */
}

li.one { color: var(--color-one); }
li.two { color: var(--color-two); }
li.three { color: var(--color-three); }
li.four { color: var(--color-four); }
li.five { color: var(--color-five); }
li.six { color: var(--color-six); }
li.seven { color: var(--color-seven); }
li.eight { color: var(--color-eight); }

.regular {
   color: white;
}

.centered-text {
   text-align: center;
}

.float-right {
   float: right;
}

.no-margin {
   margin: 0;
}

.no-p-margin p {
   margin: 0;
}

#credits h4 {
   text-align: center;
   margin-bottom: 0.5em;
}