/* removes white space around */
*{

 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 

}

.Bar-1 {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 900px;
  text-align: center;
  font-family: "IM Fell English SC", serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
  text-align: center;
  font-size: 7rem;
  font-weight: 400;
  font-style: normal;

}

.Athens-box {

Bottom: 200px;
position: absolute;
right: 400px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;

}

.Marathon-box {
Right: 400px;
Bottom: 500px;

position: absolute;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;
}

.Mountains-box {

Right: 400px;
Bottom: 300px;


position: absolute;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;
}

.Coast-box {
position: absolute;
Right: 400px;
Bottom: 400px;

display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;
}
}

audio {
  opacity: 100%;
}

body {

font-family: 'Cinzel', serif;

}

#banner {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  z-index: 1;
}

 #pot {
  position: absolute;
  width: 800px;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);
}



body {
background-image: url("../img/ANCIENT MAP.jpg");
background-size: 1550px;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #0b0b0b;   
}

body.marathon .title {
  font-size: 80px;
  font-family: "IM Fell English SC", serif;
  text-align: center;
  margin-top: 100px;
  color: black; 
}

.marathon {
    background-image: url("../img/BATTLE.png"), url("../img/WALL%20PAPER%201.png") ,url("../img/ANCIENT MAP.jpg");
    background-size: 500px, 1500px,cover;
    background-position: center 300px, center, center;
    background-repeat: no-repeat;
    margin-left: 300px;
    margin-right: 300px;
  
}

.man-running {
  position: fixed;
  bottom: 50px;
  left: -200px;
  width: 300px;
  animation: run-across 10s linear infinite;
}

@keyframes run-across {
0% {left: -200px;}
100% {left: 100%;}
}

.coast-button {
position: absolute;
right: 400px;
top: 500px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;
}

.return-button {
position: absolute;
left: 400px;
top: 500px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;
}


body.coast .title {
  font-size: 80px;
  font-family: "IM Fell English SC", serif;
  text-align: center;
  margin-top: 100px;
  color: black;
}

.coast {
    background-image: url("../img/NEW%20COMPASS.png"), url("../img/WALL%20PAPER%201.png") ,url("../img/ANCIENT MAP.jpg");
    background-size: 600px, 1500px, cover;
    background-position: top 450px left 650px, center, center;
    background-repeat: no-repeat;
    margin-left: 300px;
    margin-right: 300px;
  
}

.coast-rollover:hover {content: url(../img/WATER%20FRONT.png)
}
.coast-rollover {
position: fixed;
bottom: 40px;
right: 40px;
width: 344px;
transition: 0.3s;
}
.mountains-button {position: absolute;
right: 500px;
top: 500px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.map-button2 {position: absolute;
left: 500px;
top: 500px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;
}

body.mountains .title {
  font-size: 80px;
  font-family: "IM Fell English SC", serif;
  text-align: center;
  margin-top: 100px;
  color: black;
}


.storms-overlay {

position: fixed;
bottom: -300px;
right: 100px;
width: 1400px;
opacity: 0.50;
pointer-events: none;
z-index: 10;
}

.mountains {
    background-image: url("../img/RANGE.png"), url("../img/WALL%20PAPER%201.png") ,url("../img/ANCIENT MAP.jpg");
    background-size:  800px auto, 1500px auto, cover;
    background-position: center bottom, center, center;
    background-repeat: no-repeat;
    margin-left: 300px;
    margin-right: 300px;

}

.Rest-button {position: absolute;
right: 400px;
top: 460px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;}

.Athens-button {position: absolute;
right: 400px;
top: 560px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;}

.Map-button3 {position: absolute;
right: 400px;
top: 660px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;}

body.athens .title {
  font-size: 80px;
  font-family: "IM Fell English SC", serif;
  text-align: center;
  margin-top: 100px;
  color: black;
}

.map-button4{position: absolute;
left: 300px;
top: 800px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 7%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;}

.athens {
    background-image: url("../img/WALL%20PAPER%201.png") ,url("../img/ANCIENT MAP.jpg");
    background-size: 1500px, cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 300px;
    margin-right: 300px;

}

.gate{
position: fixed;
bottom: -100px;
right: 60px;
width: 1000px;
cursor: pointer;
z-index: 20;
}

#blackout{
  position: fixed;
  inset: 0;
  background: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 3s ease;
  z-index: 999;
}

#blackout.active{
  opacity: 1;
}

.rest {
  background-image: url("../img/CLIFF.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
body.rest{
  font-size: 80px;
  font-family: "IM Fell English SC", serif;
  text-align: center;
  margin-top: 100px;
  color: white;
}

.Map-button5 {left: 300px;
top: 800px;
display: inline-block;
border-radius: 30px;
border: 2px solid black;
background-color: #a76518;
width: 20%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
text-align: center;
text-decoration: none;
cursor: pointer;}