html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }

#bg {
    width: 100%;
    height: 100%;
    background: url('image.webp') no-repeat center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-animation: fadebg 2s ; /* Chrome, Safari, Opera */
    animation: fadebg 2s ;
  }
#title {
    width: 100%;
    opacity:0;
    position:relative;
    text-align:center;
    -webkit-animation: fadetitle 2500ms ; /* Chrome, Safari, Opera */
    animation: fadetitle 2500ms;
    animation-delay: 500ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    
  }
@media screen and (max-width: 1400px) {
   #title img{
max-width: 40%;
    height: auto;
}
}

@media screen and (max-width: 1100px) {
   #title img{
max-width: 30%;
    height: auto;
}
}

@media screen and (min-width: 1400px) {
    #title img{
max-width: 60%;
    height: auto;
}
}
@media screen and (max-width: 1100px) and (min-height: 1100px) {
    #title img{
max-width: 80%;
    height: auto;
}
}

@media screen and (max-width: 800px) and (min-height: 800px) {
    #title img{
max-width: 80%;
    height: auto;
}
}

#menu {
    top: 50px;
    opacity:0;
    position:relative;
    -webkit-animation: fademenu 2500ms ; /* Chrome, Safari, Opera */
    animation: fademenu 2500ms;
    animation-delay: 500ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
#menu div {
text-align:center;
display:block;
margin:40px;
}
#menu a {
  color: black;
  text-shadow: 0px 0px 4px #FFFFFF;
  
  font-size: 30px;
  
  position: relative;
  
  text-decoration: none;

}
#menu a:hover {
  color: #FFFFFF;
  text-shadow: 0px 0px 4px black;
  font-style: bold;
}
#menu a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #FFFFFF;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .15s linear;
}
#menu a:hover:before,
#menu a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}
#menu a:before {
  background: #FFFFFF;
  box-shadow: 0 0 10px 2px #FFFFFF;  
}

}
  /* Chrome, Safari, Opera */
  @-webkit-keyframes fadebg {
    from {opacity: 0.5;}
    to {opacity: 1;}
  }

  /* Standard syntax */
  @keyframes fadebg {
    from {opacity: 0.3;}
    to {opacity: 1;}
  }


  /* Chrome, Safari, Opera */
  @-webkit-keyframes fadetitle {
    from {opacity: 0;}
    to {opacity: 1;}
    from {top: 0px;}
    to {top: 50px;}
  }

  /* Standard syntax */
  @keyframes fadetitle {
    from {opacity: 0;}
    to {opacity: 1;}
    from {top: 0px;}
    to {top: 50px;}
  }
  /* Chrome, Safari, Opera */
  @-webkit-keyframes fademenu {
    from {opacity: 0;}
    to {opacity: 1;}

  }

  /* Standard syntax */
  @keyframes fademenu {
    from {opacity: 0;}
    to {opacity: 1;}

  }