body {margin: 0;}
h2 {font-size: 4vmin; font-weight: bold; margin-top: 1.5vh; margin-bottom: 0; margin-left: 3%; color: #273a56; font-family: Verdana; border-left: 0.1em solid #273a56; border-top: 0.04em solid #273a56; padding-left: 2%; border-radius: 0.3em 0 0 0; width: 90%;}
p {text-indent: 2%; margin: 1%; margin-left: 2%;}
.rule-list {margin: 1%;}
.start-button {width: 90%; border-radius: 0.3em; background: green; color: white; font-size: 20vmin; text-decoration: none; display: block; padding: 3vh 3vw 3vh 3vw;  margin-top: 2vh; margin-bottom: 3vh; margin-left: auto; margin-right: auto; text-align: center;}
.mobile-note {text-align: center; font-size: 1.2em; background: #ccd6e2; margin-left: 15%; margin-right: 15%; border-radius: 0.2em;}
@media only screen and (max-width: 1100px) {.mobile-note {display: none;}}
.special-font {font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;}
li, p {font-size: 4vmin; color: #121b28;}

/*play game css*/
#game-area {margin: 0; transition: all 0.5s;}
.green {background: rgb(0,200, 0);}

.timer {position: fixed; right: 4%; top: 1%; font-size: 8vw; color: rgb(50, 0, 100); transition: all 0.5s;}
.yellow {color: rgb(250, 250, 0);}
.red {color: rgb(250, 0, 0);}
.time-up {animation-name: quick-flash; animation-duration: 1s; animation-iteration-count: infinite; color: rgb(250, 0, 0);}

@keyframes quick-flash {
    0% {opacity: 1;}
    15% {opacity: 0;}
	30% {opacity: 1;}
	100% {opacity: 1;}
}

.click-area {position: fixed; width: 100%; z-index: 10; cursor: pointer;}
#top-area {top: 0; height: 60%;}
#bottom-area {bottom: 0; opacity: 0; height: 40%;}
.score-background #bottom-area {opacity: 0.1; background: rgb(0, 250, 0)}

.info, .score {position: fixed; left: 50%; transform: translateX(-50%); font-size: 1.5em; color: gray;}
.info {top: 5%;}
.score {bottom: 5%;}

.message {animation-name: appear; animation-duration: 2s; animation-iteration-count: 1;}
.green .message {color: white; text-align: center;}
.indent {margin: 5%; border-radius: 0.5em; border: 0.05em solid black; padding: 3%;}
.full-version-button {background: rgb(50, 40, 80); border-radius: 0.3em; padding: 0.2em; display: block; text-align: center; margin: 1%; color: white; text-decoration: none; transition: all 0.3s; max-width: 15em; margin-left: auto; margin-right: auto; font-weight: bold; font-size: 1.3em;}
.full-version-button:hover {max-width: 20em; border-radius: 0.7em;}

@keyframes appear {
    0% {opacity: 0;}
    75% {opacity: 0;}
	100% {opacity: 1;}
}

.word {position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 13vmin; text-align: center;}
.score-background .word {overflow-wrap: break-word; word-wrap: break-word; width: 100vw;}
/*last 3 functions added to break long words*/
.green .word {color: white;}
.ready {animation-name: pop-in; animation-duration: 2s; animation-iteration-count: 1;}


@keyframes pop-in {
    0% {font-size: 5vw; opacity: 0;}
    10% {opacity: 1; font-size: 6vmin;}
	40% {font-size: 20vmin;}
	100% {font-size: 13vmin;}
}

/*elegant shadow adapted from https://codepen.io/juanbrujo/pen/yGpAK*/
h1 {
  margin: 0;
  text-align: center;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 7vw;
  padding: 10vh 0px;
  overflow: hidden;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

.elegantshadow {
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
text-shadow: 
  1px -1px 0 #767676, 
  -1px 2px 1px #737272, 
  -2px 4px 1px #767474, 
  -3px 6px 1px #787777, 
  -4px 8px 1px #7b7a7a, 
  -5px 10px 1px #7f7d7d, 
  -6px 12px 1px #828181, 
  -7px 14px 1px #868585, 
  -8px 16px 1px #8b8a89, 
  -9px 18px 1px #8f8e8d, 
  -10px 20px 1px #949392, 
  -11px 22px 1px #999897, 
  -12px 24px 1px #9e9c9c, 
  -13px 26px 1px #a3a1a1, 
  -14px 28px 1px #a8a6a6, 
  -15px 30px 1px #adabab, 
  -16px 32px 1px #b2b1b0, 
  -17px 34px 1px #b7b6b5, 
  -18px 36px 1px #bcbbba, 
  -19px 38px 1px #c1bfbf, 
  -20px 40px 1px #c6c4c4, 
  -21px 42px 1px #cbc9c8, 
  -22px 44px 1px #cfcdcd, 
  -23px 46px 1px #d4d2d1, 
  -24px 48px 1px #d8d6d5, 
  -25px 50px 1px #dbdad9, 
  -26px 52px 1px #dfdddc, 
  -27px 54px 1px #e2e0df, 
  -28px 56px 1px #e4e3e2;
}

#createdby {text-align: center; color: gray; margin-bottom: 1em;}
#createdby a {color: gray;}
#game-area #createdby {margin: 0; right: 1%;}
.game-info {position: fixed; bottom: 0.5%; font-size: 0.8em; font-family: sans-serif; color: rgb(10, 100, 100) !important; text-align: center; opacity: 1; transition: opacity 0.5s; animation-name: appear; animation-duration: 1s; animation-iteration-count: 1;}
.score-background .game-info {opacity: 0;}
#game-area #copyright {margin: 0; left: 1%;}

@media only screen and (max-width: 400px) {.info, .score {font-size: 6vw;}}
@media only screen and (max-width: 600px) {.game-info {font-size: 0.6em;}}


/*for social media buttons*/
.socialmedia {display: flex; flex-wrap: wrap; width: 100%; margin: 1em 0;}
.socialmedia .maintext {padding: 0.3em; text-align: center; text-indent: 0; width: 100%;}
.socialmedia .links {margin: auto;}
.socialmedia .links a {display: inline-block; margin: 0.2em; opacity: 0.7; font-size: 1.7em; padding: 0.2em; width: 1.2em; border-radius: 50%; text-align: center;}
.socialmedia a:hover {transition: 0.2s; opacity: 1;}
.socialmedia .clipboard {background: rgb(138, 138, 138); color: black;}
.socialmedia .facebook {background: #3B5998; color: white;}
.twitter {background: #55ACEE;color: white;}
.google {background: #dd4b39; color: white;}