/*
*  html5resetcss
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}

/* Custom CSS */

* {
  box-sizing: border-box;
}

body,
html {
  font-size: 16px;
  background-color: #251319;
  color: #fff;
  font-family: "Passion One", sans-serif;
}

span {
  color: #c4331f;
}

#container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#header {
  height: 60px;
  width: 600px;
  background-color: #251319;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

#logo {
  font-size: 2.2em;
  color: #c4331f;
  text-transform: uppercase;
}

#timer {
  display: flex;
  font-size: 1.2em;
}

#scare-counter {
  width: 210px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#counter {
  text-transform: uppercase;
  font-size: 1.4em;
}

li {
  display: inline-block;
  height: 30px;
  width: 18px;
  background-color: #56343f;
  list-style-type: none;
  margin-right: 3px;
}

#board {
  background: url("../src/background.png") no-repeat;
  position: relative;
  background-size: contain;

  height: 600px;
  width: 600px;
  overflow: hidden;
}

.book-default {
  background: url("../src/Book.png") no-repeat;
  background-size: contain;
  position: absolute;
  width: 39px;
  height: 47px;
  top: 340px;
  left: 50px;
}

.book-floor {
  background: url("../src/Book.png") no-repeat;
  background-size: contain;
  position: absolute;
  width: 39px;
  height: 47px;
  top: 370px;
  left: 100px;
  transform: rotate(80deg);
}


.tv-screen-default {
  background: url("../src/news.gif") no-repeat;
  background-size: cover;
  position: absolute;
  width: 170px;
  height: 58px;
  top: 497px;
  left: 218px;
  /* clip-path: polygon(1% 10%, 96% 8%, 100% 99%, 0 100%); */
  clip-path: polygon(96% 93%, 2% 93%, -1% 0%, 101% 1%);
  transform: scaleY(-1);
}
.tv-screen-manipulated {
  background: url("../src/static-screen2.gif") no-repeat;
  background-size: cover;
  position: absolute;
  width: 170px;
  height: 58px;
  top: 497px;
  left: 218px;
  /* clip-path: polygon(1% 10%, 96% 8%, 100% 99%, 0 100%); */
  clip-path: polygon(96% 93%, 2% 93%, -1% 0%, 101% 1%);
  transform: scaleY(-1);
}

.lamp-top-left-manipulated {
  background: url("../src/lamp-top-left.png") no-repeat;
  background-size: contain;
  position: absolute;
  height: 228px;
  width: 255px;
}

#lamp-right-state {
  background: url("../src/lamp-right.png") no-repeat;
  background-size: contain;
  position: absolute;
  width: 239px;
  height: 518px;
  right: 0;
}




#ghost-start {
  background: url("../src/ghost-start.png") no-repeat;
  height: 256px;
  width: 291px;
  position: absolute;
  animation: MoveUpDown 3s ease-in-out infinite;
 
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 260px;
  }
  50% {
    bottom: 280px;
  }

  
}

#start {
  height: 100%;
  width: 100%;
  background-color: #251319;
  background: url("../src/start.webp") no-repeat;
  background-size: contain;
}

#start > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.textcontainer {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(0, 0, 0, 0);
  padding: 10px 10px;
}

#start h1 {
  font-size: 6em;
  color: #c4331f;
  text-transform: uppercase;
  text-align: center;
  padding-top: 40px;
  margin-bottom: 180px;
}

#start p {
  width: 470px;
  font-size: 1.3em;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  line-height: 1.4em;
  text-align: center;
  padding-bottom: 5px;
}

#start-btn {
  width: 180px;
  background-color: #c4331f;
  color: #fff;
  font-size: 1.2em;
  font-weight: 800;
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 10px;
  border: 0px solid #000;
  border-radius: 10px;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 20px
}

#start-btn:hover {
  background-color: rgb(219, 77, 67);
  /* transform: scale(1.03); */
}
#start-btn:active {
  transform: scale(0.95);
}

#ghost {
  z-index: 1;
}

.right {
  background-color: rgba(255, 255, 255, 0.5);
  background: url("../src/ghost-right.png") no-repeat;
}
.left {
  background-color: rgba(255, 255, 255, 0.5);
  background: url("../src/ghost-left.png") no-repeat;
}

#npc {
  z-index: 1;
}

.npc-down {
  background: url("../src/npc-down.png") no-repeat;
}
.npc-up {
  background: url("../src/npc-up.png") no-repeat;
}

.npc-left {
  background: url("../src/npc-left.png") no-repeat;
}

.npc-right {
  background: url("../src/npc-right.png") no-repeat;
}

#intermediatePoint {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 10px;
  width: 10px;
}

.interactiveObj {
  box-sizing: content-box;
  /* border: 1px solid #18b01d; */
  /* padding: 10px; */
}

#infoboard {
  height: 80px;
  width: 600px;
  background-color: #251319;
  line-height: 2em;
  color: #c4331f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#useraction-info {
  font-size: 1.2em;
  color: #fff;
  /* display: none; */
}

#message {
  font-size: 2em;
}

#losing {
  height: 100%;
  width: 100%;
  background-color: #251319;
  background: url("../src/losing.webp") no-repeat;
  background-size: contain;
}

#losing div {
  display: flex;
  justify-content: end;
  flex-direction: column;
  align-items: center;
}

h4 {
  font-size: 1.4em;
  padding-top: 40px;
  text-transform: uppercase;
  color: #c4331f;
}

#losing p {
  width: 350px;
  text-align: center;
  font-size: 3em;
  padding-top: 10px;
  padding-bottom: 350px;
}

#restart-btn-win {
  width: 230px;
  background-color: #c4331f;
  color: #fff;
  font-size: 1.5em;
  font-weight: 800;
  font-style: normal;
  text-decoration: none;
  padding: 10px 10px;
  border: 0px solid #000;
  border-radius: 10px;
  display: inline-block;
}

#restart-btn-win:hover {
  background-color: rgb(219, 77, 67);
  /* transform: scale(1.03); */
}
#restart-btn-win:active {
  transform: scale(0.95);
}

#restart-btn {
  width: 230px;
  background-color: #c4331f;
  color: #fff;
  font-size: 1.5em;
  font-weight: 800;
  font-style: normal;
  text-decoration: none;
  padding: 10px 10px;
  border: 0px solid #000;
  border-radius: 10px;
  display: inline-block;
}

#restart-btn:hover {
  background-color: rgb(219, 77, 67);
  /* transform: scale(1.03); */
}
#restart-btn:active {
  transform: scale(0.95);
}


.hidden {
  display: none;
}

.show {
  display: block;
}

#winning {
  height: 100%;
  width: 100%;
  background-color: #251319;
  background: url("../src/winning.webp") no-repeat;
  background-size: contain;
}



#winning div {
  display: flex;
  justify-content: end;
  flex-direction: column;
  align-items: center;
}




#winning p {
  width: 350px;
  text-align: center;
  font-size: 3em;
  padding-top: 10px;
  padding-bottom: 350px;
}