body{
    font-family: 'Permanent Marker', cursive;
    overflow-x: hidden;
}

.title1 { text-align: center;}
h3, .card-text , #alt{
    font-family: 'Aclonica', sans-serif;
}
.container-full-1 {
    background-image: url(https://micro-sites.uk/images/fog.jpg);
    height: 200px;
}
.container-4 {
    background-image: url(https://micro-sites.uk/images/books-1655783_1280.jpg);
    height:800px;
    position: relative;
}
.door {
 margin: 0 auto;
 margin-top: 4em;
 height: 400px;
 width: 200px;
border: orangered;

color: white;
position: relative;
}
#category1, #category2, #category3,#category4, #category5, #category6 {
    display: none;
}
.key {
    margin-top: 15em;
    right: 45%;
    position: absolute;
    transform: scale(1);
    animation: pulse 2s infinite;
   
}
@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

#hov1{
    margin-top: 10em;
    right: 25%;
    position: absolute;
    padding: 4em;

}
#hov2{
    margin-top: 17em;
    right: 88%;
    position: absolute;
    padding: 4em;
  
}
.bigkey:hover {
    background-image: url(https://micro-sites.uk/images/download.png); 
background-repeat: no-repeat;
}
#hov3{
    margin-top: 40em;
    right: 67%;
    position: absolute;
    padding: 4em;
   
}
#ns{
    margin-left: 32%;
}
#toggle {
    float: right;
}
#hov4{
    margin-top: 25em;
    right: 25%;
    position: absolute;
    padding: 4em;

}
.box2 {
    float: right;
    margin-right: 15em;;
}
#quiz1 {
 
    font-family: 'Audiowide', cursive;
    padding-left:  1em;
}
.container-2 {
    background-color: greenyellow;
height: 400px;
text-align: center;
}


#scroll-1 {
    padding-top: 3em;
    display: none;
margin: auto 0;
}

#scroll-2{
    display: none; 
    margin: auto 0;
}
/*extra spiders in the web, some animated*/
/*extra spiders in the web, some animated*/
#s1 {

	position: relative;
	margin: auto;
	margin-left: 31%;
	margin-top: 1%;
	margin-right: 8%;
	z-index: 1;
}

#s2 {

	z-index: 1;
	position: relative;
	margin-left: 56%;
	float: left;

}

#s3 {
	margin-left: 72%;
	z-index: 1;
	position: relative;
}
.bksp{
            margin: 0 auto;
        width: 100vw;
    
        background: url(https://micro-sites.uk/images/spider.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
}
/*stat image open after spideranimation*/
#pwerstat, #affiliation, #profile, #alias {
	display: none;
	position: relative;
	z-index: 4;
left: 3em;
top: 1em;
}
/*the box with click underneath*/
#spiderbox {
position: relative;
	z-index: 2;
}
.container-3 {
 
    height: 400px;
    text-align: right;
    
    
    }
.buttons {
	margin-left: 10%;
	z-index: 2;
}
.cont {
padding-top: 2em;
    background-color: orangered;
}
.cont-1 {

        background-color: burlywood;
    }
/*the spider in the box*/
#s4 {
   left:5%; 
   top:3em;
    z-index: 3;
    position: absolute;
}
#s7 {
    left:20em; 
 top: 5em ;
    z-index: 3;
    position: absolute;
  }
  #s6  {
   left:5em; 
  bottom:3em;
        z-index: 3;
        position: absolute;
    }
    #s8  {
  left: 20em; 
 bottom:5em;
 
        z-index: 3;
        position: absolute;
      }
      .joke{
          float:left;
          font-family: 'Acme', sans-serif;
      }
#signs {
    position: absolute;
   right: 1em;
   top: -3em;
}
.party{
    position: relative;
    background-color: black;
}
#circle {
    position: absolute;
margin-top: 2em;
 
    z-index: 4;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    background-color: #000;
}
#target{
position: relative;

z-index: -1;
display: none;
width: 100px;
height: 100px;
}
#but {
  position: relative;
  margin-bottom: 2em;
left: -2em;
}
#drink {
    float: right;
    height: 400px;
}
#quiz2{
 padding-top: 2em;
 background-color:aqua;
 font-family: 'Audiowide', cursive;
}

.glow {
    color: #fff;
  padding-left: 2em;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;  
}
@-webkit-keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
  }
  .container-6{
      background-color: white;
  }
#crab { }


  .title2{
    color: white;
    font-family: 'Acme', sans-serif;
    display: inline-block;
  }

  footer {
      background-color: red;
      border-top: 3px solid greenyellow;
  }
  #game {
color:white;
    font-family: 'Audiowide', cursive;
  }