@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(font/LeagueSpartan-ExtraLight.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(font/LeagueSpartan-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(font/LeagueSpartan-Thin.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font/LeagueSpartan-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/font/LeagueSpartan-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/font/LeagueSpartan-Black.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/font/LeagueSpartan-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/font/LeagueSpartan-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/font/LeagueSpartan-ExtraBold.ttf) format('truetype');
}

:root {
  --primary: #FFD41D;
  --secondary:#FFA240;
  --accent:#D73535;
  --accent2:#FF4646;
}

html {
  scroll-behavior:smooth;
}
body, html, h1, h2, h3, h4, h5, h6{
  font-family: League Spartan, Arial, Helvetica, sans-serif;
}
body{
  font-weight:200;
  font-size:20px;
  background-color: var(--primary);
  color: black;
}
p{
  max-width:600px;
  margin:auto;
  text-align:justify;
  padding: 30px;
  font-size: 30;
  font-weight:100;
  /*
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;*/
}

h1, h2 {
  text-align: center;
  font-weight: 200;
}


.menu {
  background: var(--secondary);
  box-shadow: 5px 5px;
}
.tit {
  color: var(--accent);
  font-weight: 500;
  text-shadow: 2px 2px black;
}
.spl {
  text-align:center;
}
.btn {
  border: 0px;
  color: white;
  padding: 15px;
  cursor: pointer;
  background-color: black;
}

.btn:hover {
  background-color: var(--accent);
  border:thin;
  color: white;
}

iframe {
  width: 100% !important;
  height: 900px;
}
.paralaksa {
  perspective:1px;
  -webkit-perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.warstwa {
  position: absolute;
  transform-origin-x: 100%;
  top:0;
  right:0;
  bottom:0;
  left:0;
}
.tyl {
  margin:auto;
  transform: translateZ(-1px) scale(2);
}
.przod{
  transform: translateZ(0);
}
.circ{
  position:absolute;
  opacity:50%;
  padding:50vh 30%;
  clip-path: circle(50px);
  background-color: var(--accent2);
}
.accent {

  color: var(--accent);
  font-weight: 500;
  text-shadow: 0.05em 0.05em black;
}

.w3-cell {
  background-color: var(--secondary);
  border-style: solid;
}
.w3-cell:hover{
  background-color: var(--accent2);
}
form {
  display:inline-block;
  margin:auto;
}
@media only screen and (max-width:1000px) {
  .tlo {
    opacity:0;
  }
}