html,body {
  width: 100%;
  height:auto;
   margin: 0;
  padding: 0;
  margin-top: 10vh;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  background: #f9f6f1;
  margin:10px;
}
p {
  margin: 0;
  padding: 0;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0.3rem;
  color: #6365A4;  text-align:center;
}

a {
  margin: 0;
  padding: 0;
  text-decoration:none;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.3rem;
  color: #6365A4;
  text-align:center;
}
.desc {
  padding: 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.2rem;
  opacity: 0;
  transition: 1s 1.5s;
}

#button {
	    background: #fec722;
	 margin-top:40px;
	   
	    border-width:3px solid !important;
		border-color:black;
	    padding: 25px;
	   
	    font-family: "Open Sans", sans-serif;
	    font-weight: 300;
	   
		 border-radius: 6px;
	  
	    display: block;
	}
 
.logo {margin-bottom:30px;}


/*code sample from here*/
/*
[required code]
parent {
  opacity: 0;
}
parent span {
  //translate effect
  position: relative;
  top: xxx;
  left: xxx;
  //fade effect
  opacity: 0;
}
*/
.ex1 {
  opacity: 0;
}
.ex1 span {
  position: relative;
  top: 10px;
  left: 10px;
  opacity: 0;
}

.ex2 {
  opacity: 0;
}
.ex2 span {
  position: relative;
  left: -10px;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
   
}