@font-face {
  font-family: "GothicJoker";
  src: url("./fonts/GothicJoker-gxxGP.eot"); /* IE9 Compat Modes */
  src: url("./fonts/GothicJoker-gxxGP.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/GothicJoker-gxxGP.otf") format("opentype"), /* Open Type Font */
    url("./fonts/GothicJoker-gxxGP.svg") format("svg"), /* Legacy iOS */
    url("./fonts/GothicJoker-gxxGP.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/GothicJoker-gxxGP.woff") format("woff"), /* Modern Browsers */
    url("./fonts/GothicJoker-gxxGP.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

.body{
  background-color : black;
  transform: translateX(calc(50vw - 722px));
}

.center{
width: 50%;
margin: auto;
}

.mask1 {
  -webkit-mask-image: linear-gradient(to top, transparent 25%, black 75%);
  mask-image: linear-gradient(to top, transparent 25%, black 75%);
  position: absolute;
width: 1445px;
height: 904px;
left: 0px;
top: -55px;
}
.header {
position: absolute;
width: 1445px;
height: 1748px;
left: 0px;
top: -55px;


}

.headerimage{
  position: absolute;
width: 1445px;
height: 904px;
left: 0px;
top: -55px;

background: linear-gradient(180deg, rgba(0, 0, 0, 0) 47.46%, #000000 67.37%), url(..\images\JOKER_FACADE_3584x2240_F.jpg);
}

.title{
  position: absolute;
width: 400px;
height: 60px;
left: 907px;
top: 309px;

font-family: 'GothicJoker';
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 30px;

/* or 100% */
letter-spacing: 0.03em;

color: #69FF1B;
}

.link{
  position: absolute;
width: 321px;
height: 60px;
left: 566px;
top: 1124px;

font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 24px;

/* or 133% */
text-align: center;
letter-spacing: -0.01em;
text-decoration-line: underline;

color: #07FB22;
}

.bottomlink{
  position: absolute;
width: 321px;
height: 60px;
left: 552px;
top: 3216px;

font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 24px;

/* or 133% */
text-align: center;
letter-spacing: -0.01em;
text-decoration-line: underline;

color: #07FB22;
}

.idea{position: absolute;
width: 334px;
height: 476px;
left: 553px;
top: 1217px;

font-family: 'GothicJoker';
font-style: normal;
font-weight: normal;
font-size: 50px;
line-height: 61px;
letter-spacing: 0.05em;

color: #07FB22;
}

.execution{position: absolute;
width: 336px;
height: 408px;
left: 909px;
top: 1221px;

font-family: 'GothicJoker';
font-style: normal;
font-weight: normal;
font-size: 50px;
line-height: 61px;
letter-spacing: 0.05em;

color: #07FB22;
}

.background{
  position: absolute;
width: 336px;
height: 284px;
left: 195px;
top: 1219px;

font-family: 'GothicJoker';
font-style: normal;
font-weight: normal;
font-size: 50px;
line-height: 61px;
letter-spacing: 0.05em;

color: #07FB22;


}

.video{
  position: absolute;
width: 1043px;
height: 583.47px;
left: 197px;
top: 470px;
}

.game1{
position: absolute;
width: 334px;
height: 620px;
left: 195px;
top: 1491px;
}

#game1title{
  position: absolute;
width: 319px;
height: 272px;
left: 198px;
top: 1491px;
}

#game2title{
  position: absolute;
  width: 412px;
  height: 160px;
  left: 508px;
  top: 1550px;
}
#game3title{
  position: absolute;
  width: 448px;
  height: 268px;
  left: 840px;
  top: 1498px;
}

#game1imagecontainer{

}

#game1image{
  position: absolute;
  width: 333.74px;
  height: 205.16px;
  left: 195px;
  top: 1695.86px;
}

#game2image{
  position: absolute;
  width: 333.74px;
  height: 205.16px;
  left: 552px;
  top: 1695.86px;
}

#game3image{
  position: absolute;
width: 333.74px;
height: 205.16px;
left: 907px;
top: 1697.86px;
}

.game1header{
  position: absolute;
width: 331px;
height: 160px;
left: 198px;
top: 1951px;

/* Body1 */
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;

color: #9247E7;
}

.game2header{
  position: absolute;
width: 333px;
height: 246px;
left: 553px;
top: 1951px;

/* Body1 */
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;

/* or 150% */

color: #FB1616;
}

.game3header{
  position: absolute;
width: 333px;
height: 172px;
left: 908px;
top: 1953px;

/* Body1 */
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 15px;
line-height: 24px;

/* or 160% */
letter-spacing: -0.01em;

color: #07FB22;


}

.game2{
  position: absolute;
width: 412px;
height: 647px;
left: 508px;
top: 1550px;
}

.game3{
position: absolute;
width: 448px;
height: 627px;
left: 840px;
top: 1498px;
}

.legend{
  position: absolute;
width: 806px;
height: 283px;
left: 316px;
top: 2284px;

font-family: GothicJoker;
font-style: normal;
font-weight: normal;
font-size: 50px;
line-height: 61px;
text-align: center;
letter-spacing: 0.05em;

color: #07FB22;


}

.results{
  position: absolute;
  width: 582px;
  height: 146px;
  left: 424px;
  top: 2601px;

  font-family: GothicJoker;
  font-style: normal;
  font-weight: normal;
  font-size: 50px;
  line-height: 61px;
  text-align: center;
  letter-spacing: 0.05em;

  color: #07FB22;
}

.countries{
  position: absolute;
width: 162px;
height: 197px;
left: 169px;
top: 2807px;

/* H2 */
font-family: GothicJoker;
font-style: normal;
font-weight: normal;
font-size: 100px;
line-height: 40px;
text-align: center;
letter-spacing: 0.05em;

color: #07FB22;
}

.fans{
  position: absolute;
width: 162px;
height: 197px;
left: 420.01px;
top: 2807px;

/* H2 */
font-family: GothicJoker;
font-style: normal;
font-weight: normal;
font-size: 100px;
line-height: 40px;
text-align: center;
letter-spacing: 0.05em;

color: #07FB22;
}

.time{
  position: absolute;
width: 280px;
height: 197px;
left: 645px;
top: 2807px;

/* H2 */
font-family: GothicJoker;
font-style: normal;
font-weight: normal;
font-size: 100px;
line-height: 40px;
text-align: center;
letter-spacing: 0.05em;

color: #07FB22;
}

.impressions{
  position: absolute;
  width: 362px;
  height: 197px;
  left: 923px;
  top: 2807px;

  /* H2 */
  font-family: GothicJoker;
  font-style: normal;
  font-weight: normal;
  font-size: 100px;
  line-height: 40px;
  text-align: center;
  letter-spacing: 0.05em;

  color: #07FB22;
}

#sub{
  font-size: 30px;
  line-height: 0px;
  color: white;
}

#resultsub{

}

#logo{
  position: absolute;
width: 274px;
height: 214px;
left: 565px;
top: 3040px;
}

#bodytext{
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: white;
  letter: -1%;
}