@import url("https://fonts.googleapis.com/css?family=Cedarville+Cursive");
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-weight: 700;
}

body {
  background-color: #232323;
  color: white;
  font-family: "Cedarville Cursive", cursive;
  font-size: 120%;
  letter-spacing: -0.04em;
  margin: auto;
  text-align: center;
}
body#404{
  background: #1B0034;
  background-image: linear-gradient( 135deg, #1B0034 10%, #33265C 100%);
  background-attachment: fixed;
  background-size: cover;  
}
#alien {
  background-color: #0eddd3;
  border-radius: 10px;
  max-width: 800px;
}
#horror, #flash, #blackk { 
  opacity: 0; 
}
#flash.active {
  animation: picture .5s .1s ease-in;
}
#blackk.active {
  animation: blackk 1.5s .2s ease-in;
}
#horror.active {
  animation: picture 1.5s .2s ease-in;
}
#human.active {
  animation: human 1.5s .2s ease-out;
}
@keyframes picture {
  0, 30% { 
    opacity:0;
  }
  31%, 60% {
    opacity: 1;
  }
}
@keyframes blackk {
  0, 30% { 
    opacity:0;
  }
  31%, 60% {
    opacity: .5;
  }
}
@keyframes human {
  0, 30% { 
    opacity:1;
  }
  31%, 60% {
    opacity: 0;
  }
}
button.pic {
  background: #ffcc00;
  border-radius: 50%;
  box-shadow: 0 0 20px 10px yellow;
  cursor: pointer;
  height: 300px;
  width: 300px;
  animation: pulse .5s infinite alternate;
}
#btn:hover { cursor: pointer; }
@keyframes pulse {
 to { 
    box-shadow: 0 0 100px 10px #00e1d4;
  }
}
#hand { pointer-events: none;}
#hand.active {
  animation: clic .2s linear;
}
@keyframes clic {
 to { 
   transform: rotate(0.3deg);
  }
}
#note {
  fill: white;
  font-size: 100px;
}

.error {
	width: 100%;
	height: auto;
	margin: 50px auto;
	text-align: center;
	margin-bottom: 0;
}

.dracula{
	width: 230px;
	height: 300px;
	display: inline-block;
	margin: auto;
	overflowX: hidden;
}

.error .p {
	height: 100%;
	color: #C0D7DD; 
	font-size: 30vw;
	margin: 50px;
	display: inline-block;
}


.con {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 9% auto 0;
animation: ani9 0.7s ease-in-out infinite  alternate ;}

@keyframes ani9 {
    0%{
    transform: translateY(10px);	
  }
  
  100%{
    transform: translateY(30px);	
  }

}


.con > * {
  position: absolute;
  top: 0; left: 0;
}

.hair{
  top: -20px;
  width: 210px;
  height: 200px;
  background: #C0D7DD;
  border-radius: 0 50% 0 50%;
  transform: rotate(45deg);
  background: #33265C;
}
.hair-r{
  left: 20px;
  width: 210px;
  height: 200px;
  background: #C0D7DD;
  border-radius: 0 50% 0 50%;
  transform: rotate(45deg);
  background: #33265C;

}
.head {
  width: 200px;
  height: 200px;
  background: #C0D7DD;
  border-radius: 0 50% 0 50%;
  transform: rotate(45deg);
}
.eye {
 width: 20px; height:20px;
  background: #111113;
  border-radius: 50%;
  top: 15%; left: 11.5%;
  transition: .3s linear;
}
.eye-r{left: 24%;}

.mouth {
  width: 60px; 
  height: 20px;
  background: #840021;
  top: 20%;
  left: 14%;
  border-radius: 50% / 0 0 100% 100%;
}
.mouth::after{
  content: '';
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 13px solid #FFFFFF;
  left: 10px;
}
.mouth::before{
  content: '';
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 13px solid #FFFFFF;
  left: 40px;
}

.blod {
  width: 8px;
  height: 20px;
  background: #840021;
  top: 23%; left: 17%; 
  border-radius: 20px;
}
.blod::after{
  content: '';
  position: absolute;
  width: 2px;
  height: 10px;
  background: #FFF;
  top: 20%; left: 10%; 
  border-radius: 20px;
  
}
.blod2 {
  top: 23%; left: 20%;
  width: 13px;
  height: 13px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(130deg);
  animation: blod 2s linear infinite;
  opacity: 0;
}
@keyframes blod {
  0%   {opacity: 1;}  
  100%   {background:red; opacity: 0; top:50%;}
  
  
}
.page-ms {transform: translateY(-50px);}

.error p.page-msg {
	text-align: center;
	color: #C0D7DD; 
	font-size: 30px;
	margin-bottom: 20px;
}
a.go-back {
		font-size: 30px;
    font-family: "Cedarville Cursive", cursive;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.3s linear;
    z-index: 9;
    border-radius: 10px;
    background: #C0D7DD;
    color: #33265C;
    box-shadow: 0 0 10px 0 #C0D7DD;
	margin-top: 20px;
}
a.go-back:hover {box-shadow: 0 0 20px 0 #C0D7DD;}

.skull-holder{
	position: relative;
	margin:10px auto;
	width: 50px;
}
.skull-nose-holder{
position: absolute;
top: 28px;
left: 15.7px;
width: 20px;
}
.circle {
	border-radius: 50%;
	width: 50px;
	height: 50px; 
	border:2px solid #fff;
}

.eye-left {
position: absolute;
left: 3px;
top: 16.5px;
border-radius: 50%;
width: 17px;
height: 17px;
border: 2px solid #fff;
}

.eye-right{
position: absolute;
right: 2px;
border-radius: 50%;
width: 17px;
height: 17px;
top: 16.5px;
border: 2px solid #fff;
}


.nose {
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 10px 17.32px 10px;
border-color: transparent transparent #fff transparent;
}

.nose-outline {
position: absolute;
top: -4px;
left: 1px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 7px 9.6px 16.4px 9.6px;
border-color: transparent transparent #1F1F1F transparent;

}

.sq{
width: 27px;
height: 29px;
border: 2px solid #fff;
position: absolute;
top: 25px;
left: 11.4px;
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 5%;
}
.flex-item   {
  display: block;
  margin: 2% 5%;
}

#ghost {
  transition: transform 1s;
  
  --size: 50px;
  width: var(--size);
  height: var(--size);
}

#head {
  width: 100%;
  height: 100%;
  
  background: white;
  border-radius: 50% 50% 10% 10%;
}

#eyes {
  width: 100%;
  height: 60%;
  
  padding-top: 15%;
  
  display: flex;
  justify-content: center;
  gap: 10%;
  align-items: center
}

#eyes * {
  width: 30%;
  height: 100%;
  
  background: #000;
  border-radius: 50%;
}

#eyes *::after {
  content: "";
  display: block;
  width: 30%;
  height: 40%;
  margin-left: 25%;
  margin-top: 30%;
  background: white;
  border-radius: 50%;
}

#left {
  transition: transform 0.3s;
}

#right {
  transition: transform 0.2s;
  
  width: 25%;
  height: 90%;
}

#mouth {
  transition: transform 0.2s;
  
  width: 10%;
  height: 10%;
  
  margin: auto;
  margin-top: 15%;
  
  background: var(--black);
  border-radius: 50%;
}

#bumps {
  width: 100%;
  height: 30%;
  
  margin-top: -20%;
  
  display: flex;
  justify-content: space-between;
  align-items: center
}

#bumps * {
  width: 25%;
  height: 100%;
  
  background: white;
  border-radius: 40%;
}
.container {
  max-width: 100vw;
}
header.ghost {
  margin-bottom: 2%;
}
.ghostie {
  min-height: 90vh;
  display: grid;
  background: url(https://assets.codepen.io/t-1/shapelined-Z1xxfm52Htc-unsplash.jpg)
    no-repeat center center fixed;
}
.ghostie h1 {
  color: steelblue;
}
button {
 background: linear-gradient(180deg, #58A3DB 0%, rgba(135, 175, 204, 0.74) 59.9%, rgba(255, 255, 255, 0.21) 100%);
  border-style: none;
  color: white;
  font-family: 'Poiret One', cursive;
  font-size: 2.5rem;
  border-radius: 50px 50px 0px 0px;
  opacity: .5;
  width: 100px;
  height: 100px;
  transition: 5s ease-in-out;
}
span {
  font-size: .7rem;
}
.button1:hover {
  transform: translateY(-500px);
  padding-top: 50px;
  transition: 6s ease-in-out;
}
#container {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
footer p {
  font-weight: 300;
  padding: 0 5%;
  font-size: 14px;
}

footer p a {
  color: steelblue;
}

footer p a:visited {
  color: plum
}