@font-face {
  font-family: myfirstfont;
  src: url(font/Philosopher-Regular.ttf);
}

@font-face {
  font-family: mysecondfont;
  src: url(font/corbeli.ttf);
}

h1, h2, h3, p, a , html, body {
  margin: 0;
  border: 0;
  <!padding-right: 0;
  <!padding-left: 0;
  <!padding-top: 0;
  <!padding-bottom: 0;
  padding:0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  background-image: url("image/RRI Cup.jpg");
  background-attachment: fixed; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#logo { 
  width: 30%;
  height: 100px;
  background: black;
  opacity: 0.7;
  
  -webkit-animation: width 2.5s; /* Safari */
  -webkit-animation-delay: 0.7s; /* Safari */
  -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: normal; /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */

  animation: width 2.5s;
  animation-delay: 0.7s;
  animation-name: example;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  padding-bottom: 5px;
  padding-top: 3%;
}
 
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {width: 30%;}
  to {width: 100%;}
}

/* Standard syntax */
@keyframes example  {
  from {width: 30%}
  to {width: 100%;}
}

.heading1 { 
  color: #007eff;
  line-height: 0.7;
  font-size: 55px;
  font-family: myfirstfont;
}

.heading2 { 
  color: white;
  padding-top: 0;
  line-height: 0.8;
  font-size: 27px;
  text-shadow: 2px 2px 5px gray;
  font-family: mysecondfont;
}

h3 { 
  color: white;
  text-align: center;
  padding-top: 10%;
  font-size: 77px;
  text-shadow: 2px 2px 5px #007eff;
  font-family: "Century Gothic", Century, calibri;
}

p { 
  color: red;
  text-align: center;
  padding-top: 0;
  font-size: 38px;
  text-shadow: 2px 2px 5px #007eff;
  <!font-family: candara, Century, calibri;
}

#anim {
  -webkit-animation: mymove 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2.5s; /* Safari */
  -webkit-animation-fill-mode: forwards;
  animation: mymove 1s ;
  animation-direction: alternate;
  animation-delay: 2.5s; 
  animation-fill-mode: forwards;
  transform: scale(0.001,0.001);
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
 from { transform: scale(0.01,0.01);}
  to {  transform: scale(1.0,1.0);}
}

/* Standard syntax */
@keyframes mymove {
 from { transform: scale(0.01,0.01);}
  to {  transform: scale(1.0,1.0);}
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 58px;
}

.sidenav a {
  padding: 8px 8px 8px 28px;
  text-decoration: none;
  font-size: 18pt;
  color: #818181;
  display: block;
  transition: 0.3s;
}

#open-menu {
 top: -105px;
 position:relative;
 float:right;
 color: white;
}

.sidenav :hover {
 color: orange;
background-color: grey;
}

#open-menu:hover, {
 color: orange;
}

.closebtn {
  position:absolute;
  top: 0;
 }