:root{--blue:#007bff;
  --indigo:#6610f2;
  --purple:#6f42c1;
  --pink:#e83e8c;
  --red:#dc3545;
  --orange:#fd7e14;
  --yellow:#ffc107;
  --green:#28a745;
  --teal:#20c997;
  --cyan:#17a2b8;
  --white:#fff;
  --gray:#6c757d;
  --gray-dark:#343a40;
  --primary:#007bff;
  --secondary:#6c757d;
  --success:#28a745;
  --info:#17a2b8;
  --warning:#ffc107;
  --danger:#dc3545;
  --light:#f8f9fa;
  --dark:#343a40;
  --breakpoint-xs:0;
  --breakpoint-sm:576px;
  --breakpoint-md:768px;
  --breakpoint-lg:992px;
  --breakpoint-xl:1200px;
  --font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
}

*,::after,::before{
  box-sizing:border-box
}

html{font-family:'area50', sans-serif,;
 line-height:1.15;
 -webkit-text-size-adjust:100%;
 -webkit-tap-highlight-color:transparent
}

body{margin:0;
  font-family:'area50', 
  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size:13pt;
  font-weight:400;
  line-height:1.5;
  color:#fff;
  text-align:center;
  background-image: linear-gradient(to top, #0a0b0e, #101214, #15171a, #191b1f, #1d2024);
}

button,input,optgroup,select,textarea{
  margin:0;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit
}

.left-aligned-list {
  text-align: left;
  margin-left: 0;
  padding-left: 1em;
}

.social-media-icons {
    font-size: 48px;
    margin: 3px;
}

.button.buy-on-steam {
  background-color: var(--red);
  color: #fff;
  margin-bottom: 5px;
  border: 4px solid darkred;
  cursor: pointer;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 3px var(--red);
  animation: pulse 2s infinite ease-in-out;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.button.buy-on-steam:hover {
  background-color: darkred;
  color: #ffffff;
  box-shadow: 0 0 10px var(--red);
  transform: scale(1.02);
}

.ip_holder .button {
  position: relative;
  z-index: 1;
}

.button.buy-on-steam {
  position: relative;
  z-index: 2;
}

@font-face {
font-family: 'area50';
src: url('/font/area50-webfont.woff2') format('woff2'),
     url('/font/area50-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}
header h1{
  font-family: 'area50', sans-serif;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.3rem;
color: #fff;
margin:25px 0;
font-size:48px
}

header h1 strong{
  font-weight:700
}

header {
    background-image: url('/images/playzsgo-h.webp');
    background-size: cover;
    background-position: center;
    padding: 65px 15px 80px 15px
}

header p{
  display:block;
  margin:0 auto;
  padding:0;
  max-width:750px
}

.container{
  width:100%;
  max-width:1000px;
  margin:-30px auto 0 auto;
  display:block;
  padding:0 15px
}

.logo{
  display:block;
  margin:0 auto;
  max-width:450px
}

.logo img{
  width:100%;
  height:auto;
  display:block;
  max-width:380px;
  margin:0 auto;
  opacity:1;
  transition:opacity .4s
}

img {
 max-width: 100%;
 height: auto;
}

.responsive-iframe {
   display: block;
   margin: 0 auto 25px auto;
   width: 100%;
   max-width: 560px;
   aspect-ratio: 16 / 9;
}

p{
  display:block;
  margin:0 0 15px 0
}

.logo img:hover{
  opacity:.8;
  transition:opacity .4s
}

h1,h2,h3{
  color:#ffe5fc;
  font-size:32px;
  margin:0;
  font-family: "area50", sans-serif;
}
h2,h3{
  font-size:38px;
  margin:0 0 15px 0
}

strong{
  font-weight:600
}

footer{
  font-size:11pt;
  padding:25px 15px;
  margin-top:25px
}

footer span{
  display:block;
  margin-top:7.5px
}

.ip_holder{
  padding:20px;
  margin:0 0 32px 0;
  border-radius:5px
}

.ip_holder,.picture-holder figure{
  background:#131313;
  box-shadow:rgba(0,0,0,.15) 0 2px 8px 0
}
label,small{
  display:inline-block;
  margin:0 0 17.5px 0;
  font-size:12pt;
  width:100%;
  font-size:11pt;display:none
}

small{
  margin:17.5px 0 0 0
}

input{
  margin:0;font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  overflow:visible;
  display:inline-block;
  width:100%;
  margin-right:20px;
  padding:.775rem .75rem;
  background-color:#181a28;
  background-clip:padding-box;
  border:1px solid #3b4062;
  border-radius:5px;color:#fff;
  text-align:center;
  transition:color .4s,box-shadow .4s,border-color .4s
}

input:focus{color:#fff;
  background-color:#181a28;
  border-color:#e89d4d;
  outline:0;
  box-shadow:0 0 0 .2rem rgba(255,152,43,.18);
  transition:color .4s,box-shadow .4s,border-color .4s
  }

a.button,button{
  -webkit-appearance:button;display:inline-block;
  font-weight:400;white-space:nowrap;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  border:1px solid transparent;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
  padding:.775rem .75rem;
  font-size:13pt;
  line-height:1.5;
  border-radius:5px;
  width:100%;
  margin-top:15px;
  font-weight:700;
  letter-spacing:1.5px;
  cursor:pointer;
  opacity:1;
  transition:opacity .4s;
  text-transform:uppercase;
  background-color:#ff982b;
  border-bottom:4px solid rgba(0,0,0,.3);
  color:#331a00;
  text-decoration:none;
  text-shadow:0 1px 1px rgba(255,255,255,.4)
}

a.button:hover,button:hover,a.button:focus,button:focus{
  opacity:.8;
  transition:opacity .4s
}

a.button {
    background-color: #181a28;
    color: #FFE5FC
}

a.button.store,a.button.discord{
  background-color:#181a28;
  color:#FFE5FC;
  text-shadow:0 1px 1px rgba(0,0,0,.4)
}

svg{
  height:24px;
  width:auto;
  padding:0;
  margin:0;
  margin-right:2.5px;
  vertical-align:middle;
  display:inline-block
}

path{
  padding:0;
  margin:0;
  width:100%;
  height:auto
}
a.button span,button span{
  vertical-align:middle
  }

a.button:focus,button:focus{
  outline:0;
  box-shadow:none
}

.picture-holder{
  margin-top:-25px;
  width:calc(100% + 25px)
}

.picture-holder figure{
  padding:5px;
  width:calc(25% - 25px);
  display:block;
  margin:0 25px 25px 0;
  float:left;
  border-radius:5px;
  overflow:hidden
}

.picture-holder figure img{
  width:100%;
  height:auto;
  max-width:238px;
  margin:0 auto;
  border-radius:5px
}

figcaption{
  margin:0;
  padding:0;
  font-size:11pt;
  margin-bottom:2.5px;
  margin-top:2.5px
}

.clearfix::after{
  content:"";
  clear:both;
  display:table
}

  a{
    color:#ffffff;
    transition:color .4s
  }

a:active,a:focus,a:hover{
  color:#6b7fb0;
  transition:color .4s
}

a.button:hover{
  color:#6b7fb0
}

a.button.store:hover,a.button.discord:hover{
  color:#6b7fb0
}

.button.mobile{
  display:none
}

@media (max-width:800px)
  {
    .ip_holder{margin: 7px 0 32px 0}
    .picture-holder{display: none}
    .button.mobile{display:inline-block}
    .button.pc{display:none}
}

@media (max-width:762px)
{
header h1{display: none}header p {margin-top: 25px}header{padding:45px 15px 70px 15px}
}

@media (max-width:500px)
{
h2,h3{font-size:22pt}
header{padding: 25px 15px 50px 15px}
.logo img{display:block; 
  margin:0 auto;
  max-width:280px}
}

.video-placeholder {
	width: 560px;
	height: 315px;
	cursor: pointer;
	display: block;
	margin: 0 auto 25px auto;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1.0);
  }
  30% {
    transform: scale(1.01);
  }
}