@font-face {
  font-family: 'Cardinal';
  src: URL('Cardinal.ttf') format('truetype');
}

body {
overflow: scroll;
background-color: black;
margin: 0;
padding-top: var(--margin-padding);
}


*{
box-sizing: border-box;
font-family: Cardinal;
src: url(Cardinal.ttf);
font-weight: 300;

}

h1 {
font-size: 400%;
text-align: center;
color: white;
-webkit-text-stroke: 3px white; /* width and color */
margin:0;
}

p {
text-align: center;
padding-top: 0;
padding-bottom: 0;
opacity: 1;
font-size: 40px;
color: white;
}

.features ul {
display: grid;
color: white;
font-size: 30px;
grid-template-columns: 1fr;
justify-items: center;
}

.features h1 {
margin: 5%;
font-size: 40px;
}

.column {
top: 0;
left: 0;
z-index: 1;
position: fixed;
display: grid;
grid-template-columns: 200px 1fr 200px;
width: 100%;
padding-top: 1%;
padding-bottom: 1%;
border-bottom: 3px solid white;
z-index: 9;
background-color: #731e48;
box-shadow: 2px 4px #000000;
}

.characters {
text-align: center;
margin: auto;
width: 100%;
}



.column1 {
display: grid;
grid-column-start: 1;
grid-column-end: 2;
}

.column1 img {
z-index: 4;
padding-left: 5%;
}

.column1 img {
display: grid;
width: 100%;
margin: auto;
}

.column2 a {
text-decoration: none;
color: white;
opacity: 1;
}

.column2 {
display: grid;
grid-column-start: 2;
grid-column-end: 3;
}

.column2 ul {
display: flex;
font-family: tannenberg;
font-size: 30px;
text-decoration: none;
list-style: none;
margin: auto;
z-index: 4;
}

.column2 li {
padding-left; 2%;
padding-right: 2%;
}

.column2 a:hover {
color: white;
-webkit-text-stroke: 2px white; /* width and color */
}

.column3 {
grid-column-start: 3;
grid-column-end: 3;
display: grid;
}

@media only screen and (max-width: 800px) {
  .column2 {
    display: none;
  }
  .note2 {
opacity: 0;
}
  .header1::after {
display: none;
}
.note1 {
display: none;
}
}

.menu-btn{
     height: 80px;
     width: 80px;
background-color: yellow;
border-radius:50%;
z-index: 9;
margin: auto;
}

.menu-btn1 {
position: absolute;
     height: 80px; 
     width: 80px; 
background-color: #731e48;
border-radius:50%;
z-index: 10;
margin-left: 30px;
opacity: 1;
}

.menu-btn:hover {
background-color: orange;
cursor: pointer;
}

.menu-btn span,
.menu-btn:before,
.menu-btn:after{
content: "";
z-index: 10;
}


.close {
z-index: 9;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6%;
display: none;
color: white;
}

#active:checked ~ .menu-btn span {
display:none;
}


#active:checked + .menu-btn1 {
transform: rotate(-45deg);
border-color: #fff;
opacity: 0;
}

.wrapper {
position: fixed;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background-color: #731e48;
transition: all 0.3s ease-in-out;
z-index: 8;
}

#active:checked ~ .wrapper {
right: 0;
}

#active:checked ~ .menu-btn span {
display:none;
}

.wrapper ul{
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
z-index: 9;
}

.wrapper ul li{
height: 10%;
margin: 15px 0;
}

.wrapper ul li a{
text-decoration: none;
font-size: 30px;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
font-weight: bolder;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.wrapper ul li a:hover{
color: green;
}

input[type="checkbox"]{
display: none;
}

#active:checked ~ .wrapper ul li a{
opacity: 1;
}

#active:checked ~ .wrapper img{
opacity: 0;
}


.wrapper ul li a{
transition: opacity 1.2%; transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translatex(100px);
}

#active:checked ~ .wrapper ul li a{
transform: none;
transition-timing-function: ease, cubic-bezier(.1,1.3,3,1);
transition-delay: .6s;
transform: translateX(-100px);
}

.wrapper ul {
display: block;
background-color: #731e48;
}

.wrapper ul {
color: red;
}

input[type=text], select, textarea {
  width: 100%; 
  padding: 12px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical 
}


input[type=submit] {
background-color: #731e48;
  color: white;
  padding: 12px 20px;
  border: 2px solid white;
  font-size: 100%;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
opacity: 0.7;
}

.header1 {
display: grid;
background-size: cover;
background-image: url('ad1.png');
background-repeat: no-repeat;
width: 100%;
height: 800px;
}




.header1::after {
  content: "";
 background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><polygon style="fill:rgb(115, 30, 72);" points="1,0 1,1 0,1 "/></svg>');
  background-size: 600px 130px;
margin-top: 100px;
  right: 0;
  transform:rotate(-3deg);
height: 60%
}

.header2 {
display: grid;
height: 100%;
width: 100%;
transform:rotate(-3deg);
}

.header2 h1 {
background-color: RGB(115, 30, 72);
padding-top: 2%;
padding-bottom: 2%;
margin-top: -4%;
}

.header3 h1 {
padding-top: 2%;
padding-bottom: 2%;
}

.header2 p {
transform:rotate(3deg);
}

.header3 {
display: grid;
height: 100%;
width: 100%;
position: relative;
}

.header3 h1 {
background-color: rgb(115, 30, 72);
width: 100%;
}

.notest {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;

}

.notestart {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
margin-bottom: 5%;

}


.notestart img:hover {
opacity: 0.7;
}

.notestart p {
text-align: center;
}

.note1 {
grid-column-start: 1;
grid-column-end: 1;
width: 100%;
display: grid;
float: right;

}

.note2 {
display: grid;
grid-column-start: 2;
grid-column-end: 2;
margin-right: 4%;
margin-left: 20%;
margin-top: -10%;
top: 0;
background-color: RGB(115, 30, 72, 0.4);
border: 3px solid black;
border-radius: 50px;
font-size: 100%;


}

.note2 p {
opacity: 1;
}


.note2 p {
margin: 0;
padding-top:5%;
padding-left:5%;
padding-right:5%;
}

.note25 {
display: grid;
grid-column-start: 1;
grid-column-end: 1;
margin: auto;
}

.note25 img {
height: 200px;
width: 200px;
border: 2px solid white;
}

.note3 {
display: grid;
grid-column-start: 2;
grid-column-end: 2;
margin: auto;
}

.note3 img {
height: 200px;
border: 2px solid white;
width: 200px;
}

.video-container {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 3%;
margin-top: 3%;
}


.note2 p {
margin-bottom: -20%;
}

.container2 {
  border-radius: 5px;
	display: flex;
	flex-direction: column;
	margin-left: 20%;
	margin-right: 20%;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.weapons {
width: 100%;
display: grid;
grid-column-template: 1fr 1fr;
}

.weapons img {
width: 400px;
height: 400px;
margin: 4%;
border: 3px solid white;
}

.weapons h1 {
margin: 0;
}

.weaponsimage {
display: grid;
grid-column-start: 1;
grid-column-end: 2;
}
.weaponsparagraph {
display: grid;
grid-column-start: 2;
grid-column-end: 2;
}

.screenshotstitle {
display: flex;
justify-content: space-around;
margin: auto;
}

.screenshotstitle img {
display: flex;
width: 700px;
height: 400px;
border: 3px solid white;
}

.screenshotexception img {
display: flex;
width: 400px;
height: 400px;
}

.eader {
width: 100%;
height: 10%;
}

.screenshotstitle img:hover {
opacity: 0.7;
}

.screenshots {

margin-left: 5%;
margin-right: 5%;
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
}



.screenshots img {
position: relative;
border: 3px solid white;
height: 200px;
width: 300px;
}

.screenshots img:hover {
opacity: 0.7;
}