@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@200..700&display=swap');
	body {
		font-family: "Oswald", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
		overflow: hidden;
		background: #15141A;
		background-attachment:fixed;
        background-position: left top;
        background-image: url('media/ripper-back-still.png');
        background-size: cover;
        background-repeat: no-repeat;
	}
	video{
      object-fit: cover;
      position: fixed;
      top: 0;
      left: 0;
	  overflow: hidden;
    }
    a, a:link, a:active, a:visited {
        color: #a4a2a2;
		text-decoration: none;
		-webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
    }
	.back {
		overflow: hidden;
	}
	.content {
      position: relative;
      height: 100vh;
      text-align: center;
      justify-content: center;
	  overflow-x: hidden;
	  text-shadow: 2px 2px 15px #000;
	  color: #a4a2a2
    }
	.lang {
		font-size: 18px;
	}
	.lang a {
		text-decoration: none;
		color: #a4a2a2;
		-webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
	}
    .lang a:hover, a:hover {
        color: #fff;
    }
	#reveal {
      width: 400px;
      height: 400px;
      margin-top: -200px;
      margin-left: -200px;
      position: absolute;
      overflow: hidden;
	  display: none;
      border-radius: 200px;
  }
	header {
		width: 100%;
		height: 50px;
	}
	.logo {
		width: 150px;
		float: left;
		display: flex;
  		flex-flow:column;
	}
	.logo img {
		width: auto;
		margin: 40px;
	}
	.background {
	  background-attachment:fixed;
      background-position: left top;
      background-image: url('media/under-trailer.png');
      background-size: cover;
      background-repeat: no-repeat;
	  position: absolute;
  	  top: 0;
 	  left: 0;
  	  width: 100%;
  	  height: 100%;
	  z-index: 1;
	}
	.background-over {
	  background-attachment:fixed;
      background-position: left top;
      background-image: url('media/over-trailer.png');
      background-size: cover;
      background-repeat: no-repeat;
	  position: absolute;
	  background-position-y: -30px;
  	  top: 0;
 	  left: 0;
  	  width: 100%;
  	  height: 100%;
	  z-index: 3;
	}
	.trailer {
		display: flex;
		flex-flow: column;
		z-index: 2;
		position: relative;
	}
	.trailer div {
		width: 100%;
		padding: 10px 0;
        font-size: 1.1rem;
        color: #a4a2a2;
	}
	.trailer div img {
		height: 160px;
	}
	.transparency {
		background: #000;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
		z-index: 4;
		
	}
	.yt iframe { 
  		width: 100%;
  		aspect-ratio: 16 / 9;
		box-shadow: 0px 0px 35px #000;
      }
	.uv-spot {
		width: 400px;
		height:400px;
		position: relative;
		background-image: url('media/mouse_uv.png');
		background-size: cover;
		z-index: 100;
		mix-blend-mode: color-dodge;
		cursor: crosshair;
	}
	.slider {
      height: 15px;
      width: 45px;
      border-radius: 50px;
      position: absolute;
      left: -5px;
      top: 6px;
      background-color: #171717;
      cursor: pointer;
      transition: all 0.1s linear;
  }
	.slider-tog {
	  height: 15px;
      width: 15px;
      border-radius: 50px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #484848;
	}
  .toggle, .light {
      height: 100%;
      width: 100%;
      display: block;
      margin-top: 3px;
  }
  .light-switch {
      height: 15px;
      width: 15px;
      border-radius: 50px;
      position: absolute;
      left: 2px;
      top: 6px;
      background-color: #484848;
      cursor: pointer;
      transition: all 0.1s linear;
  }
  .switch {
      border-radius: 50px !important;
      height: 5px;
      width: 50px;
      margin-right: auto;
      margin-left: auto;
  }
  .slider img {
      transition: all 0.1s linear;
  }
  .theme {
      position: fixed;
      z-index: 999999999;
	  bottom: 40px;
	  left: 40px;
	  background-image: url("media/switch-back.png");
	  background-repeat: no-repeat;
	  background-size: contain;
	  width: 105px;
  }
  .theme li {
      list-style: none;
      padding: 5px;
      border-radius: 2px;
      margin-bottom: 10px;
      text-align: center;
	  position: relative;
      -webkit-transition: all 0.1s linear;
      -moz-transition: all 0.1s linear;
      -o-transition: all 0.1s linear;
      transition: all 0.1s linear;
  }
  .theme li img {
      height: 15px;
  }
	.wishlist {
		font-size: 2.4rem !important;
		padding: 0 !important;
		font-family: "Anton", sans-serif;
        font-style: normal;
		color: #fff !important;
		text-transform: uppercase;
	}
	.wishlist div {
		display: flex;
		flex-flow: row;
		width: 80%;
  		margin-left: auto;
  		margin-right: auto;
	}
	.wishlist div div img {
		height: 60px;
	}
	.wishlist div div {
		height: auto;
		padding: 0px 30px;
		justify-content: center;
	}
	.steam {
		height: 35px !important;
	}
	.gog {
		height: 40px !important;
	}
    .active {
        color: #fff !important;
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }
    .lang-select {
        width: 300px;
        height: auto;
		display: none;
        background: #15141A;
        position: absolute;
        left: 50%;
        margin-left: -150px/*half width*/;
        top: 20%;
		z-index: 5;
		text-align: center;
		color: #a4a2a2;
		text-transform: uppercase;
		border: 3px solid #333
    }
    .lang-select .close {
        position: relative;
        width: 100%;
        padding: 5px 10px;
        font-size: 20px;
		text-align: right;
		display: inline-block;
    }
	.lang-select .close-style {
        border-bottom: 3px solid #333;
        margin-bottom: 10px;
        }
    .lang-select ul {
        list-style: none;
        font-size: 20px;
		padding-left: 0px;
    }
    .press {
        position: fixed;
        z-index: 999999999;
        bottom: 40px;
        left: 145px;
        width: auto;
    }

	@media all and (min-width: 800px) {
		video {
      	width: 100vw;
      	height: 100vh;
		}
		.trailer {
		margin-left: 200px;
		width: 35%;
		}
	}
	@media all and (max-width: 799px) {
		.trailer {
		padding: 0px 100px;
    	margin-left: 0px;
    	position: absolute;
		}
		.press {
        position: fixed;
        z-index: 999999999;
        bottom: 41px;
        left: 40px;
        width: 105px;
    	}
		.theme {display:none}
		header {height: 100px;}
		.logo {flex-flow: row;align-items: center;}
		.logo img {width: 40px;}
		.video-container {display: none;}
		.wishlist div div {padding: 0px 15px;}
	}
	@media all and (max-width: 500px) {
		.trailer {
		padding: 0px 10px;
    	margin-left: 0px;
    	position: absolute;
		}
		.theme {display:none}
		.press {
        position: fixed;
        z-index: 999999999;
        bottom: 40px;
        left: 40px;
        width: 105px;
    	}
	}