@font-face {
    font-family: crimson;
    src: url("../fonts/crimson.otf");
}

.gamelogo {
	
	margin-top:-40%;
	margin-left:20%;
	margin-right:20%;
	position:absolute;
	z-index:200;
}



.aboutspan {
    /*background-color: #45DD6E;*/
    width: 100%;
    height: 0px;
	/*background-color: #00B675;*/
	/*background-image: url(../img/liane.png);*/
	position:absolute;
	z-index:100;
}


.galleryspan1{
	
    width: 100%;
    height: 50px;
	position: relative;
	padding-top: 20%;
	background-color: #13411D

}

.galleryspan2{
	
	
    width: 100%;
    height: 200px;
	position: relative;
	padding-top: 5%;
	/*background-color: #2B9146;*/
	background-color: #13411D;
}
	

.about p {
    text-align: center;
    color: #white;
    font-size: 18px;
    font-family: "Calibri";
	text-shadow:0 0 5px black;
}



.about {
    /*background-color: #2b9146;*/
	background-image: url("../img/bricks1.png");
background-color: white;
	background-repeat: repeat;
    width: 100%;
    height: 100%;
    padding: 10%;
	position:relative;
	
	
}


.about h4 {
	/*border: 3px solid blue;*/
	opacity: none!important!;
	/*: #65176F;*/
	color: #45DD6E;
	text-decoration: underline overline blink;

	
	
}





.socialsection {
    /*background-color: #2B9146;*/
	background-color: #13411D;
    
	width: 100%;
    height: 1650px;
    background-image: url("../img/social.png");
	padding-top:50%;
    
	
}
/*insta logo*/
.socialimg {
	padding-top: 75px;
	margin-left: 42.5%;
	width:15%;
	position: relative;
	
	
}

/*unser logo*/
.socialimg + .socialimg {
	padding-top: 75px;
	margin-left: 37.5%;
	width:25%;
	position: relative;
	
}



/*bodytext*/

p {
    text-align: center;
    color: white;
    font-size: 18px;
    font-family: "Calibri";
	text-shadow:0 0 5px black;
}



h5 {
    font-size: 23px;
    font-weight: normal;
    padding: 8px;
    color: white;
    text-align: center;
    font-family: "Calibri";
	text-shadow:0 0 5px black;
}

/*headline-transparent*/

h4 {
    font-size: 40px;
    font-weight: bold;
    padding: 8px;
    color: green;
    text-align: center;
    font-family: "Crimson";
	color: #45DD6E;
    text-decoration: underline overline blink;
	/*text-shadow:0 0 5px black;*/
}

/*headline*/

h3 {
    font-size: 30px;
    font-weight: normal;
    padding: 40px 20px 20px 0px;
    color: white;
    text-align: center;
    font-family: "Crimson";
	text-shadow:0 0 5px black;
}

/*textbox*/

h2 {
    font-size: 20px;
    font-weight: normal;
    padding: 8px;
    background: #1d3d47;
    color: white;
    margin: 2px 0;
    text-align: center;
    font-family: "Calibri";
	text-shadow:0 0 5px black;
}

/*mainheadline*/

h1 {
  text-align: center;
  color: #200330;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 400px;
  width: 100%;
  height: 50px;
  font-family: crimson;
  font-size: 100px;
  color: #45DD6E;
  text-shadow:0 0 5px black;
  
}

@import url("https://fonts.googleapis.com/css?family=Work+Sans:300,600");

:root {
    /*--background:#61166B;*/
	
}

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

body {
    margin: 0;
    background: #13411D;
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
	cursor: url("../img/cursor.png"),auto;
}
		

header {
    background: var(--background);
    text-align: center;
    position: fixed;
    z-index: 999;
    width: 100%;
		
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.nav-toggle {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
    outline: 3px solid rgba(lightblue, 0.75);
}

.nav-toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1em;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background: white;
    height: 2px;
    width: 2em;
    border-radius: 2px;
    position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: "";
    position: absolute;
}

.nav-toggle-label span::before {
    bottom: 7px;
}

.nav-toggle-label span::after {
    top: 7px;
}

nav {
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    background: var(--background);
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
		background-color: #620080;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;

}

nav li {
    margin-bottom: 1em;
    margin-left: 1em;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
	font-family: "Calibri";
	text-shadow:0 0 5px black;
}

nav a:hover {
    color: #AB2EC1;
}

.nav-toggle:checked ~ nav {
    transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}



section
{
	display:flex;
	justify-content: center;
	align-items: center;
	min-height: 100 vh;
}

    .nav-toggle-label {
        display: none;
    }

    header {
        display: grid;
        grid-template-columns: 1fr auto minmax(200px, 3fr) 1fr;
    }

    .logo {
        grid-column: 2 / 3;
    }

    nav {
        // all: unset; /* this causes issues with Edge, since it's unsupported */

        /* the following lines are not from my video, but add Edge support */
        position: relative;
        text-align: left;
        transition: none;
        transform: scale(1, 1);
        background: none;
        top: initial;
        left: initial;
        /* end Edge support stuff */

        grid-column: 4 / 5;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10%;
    }

    nav ul {
        display: flex;
    }

    nav li {
        margin-left: 3em;
        margin-bottom: 0;
    }

    nav a {
        opacity: 1;
        position: relative;
    }

    nav a::before {
        content: "";
        display: block;
        height: 10px;
        background: #AB2EC1;
        position: absolute;
        top: -0.75em;
        left: 0;
        right: 0;
        transform: scale(0, 1);
        transition: transform ease-in-out 0.5s;
    }

    nav a:hover::before {
        transform: scale(1, 1);
    }


.dwbutton img{
	

	/*text-align: center;*/
	position:relative;
	left: 40%;
	
}


.dwbutton img:hover{
	
	filter: hue-rotate(180deg);

}

.footer img:hover, .socialimg:hover{
	
	filter: hue-rotate(-35deg);

}
{
	
	filter: hue-rotate(-35deg);

}