@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&family=Raleway&family=Roboto+Condensed:wght@300&family=Roboto:wght@300&family=Rubik:wght@300&family=Source+Sans+Pro:wght@200&family=Work+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nunito:wght@200&family=Raleway&family=Roboto+Condensed:wght@300&family=Roboto:wght@300&family=Rubik:wght@300&family=Source+Sans+Pro:wght@200&family=Work+Sans:wght@300&display=swap');

body, html {
    height: 100%;
    overflow: hidden;
  }
  
  * {
    box-sizing: border-box;
  }

.bg-image {
    background: url("bgg.jpg") center 38px fixed;
	background-size: cover;
    background-repeat: no-repeat;
    -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
    z-index: 0;
     /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  margin: 0px;
  transform: scale(1.1)
}

.logo {
    opacity: 0;
    margin-bottom: 0%;
    -webkit-animation-fill-mode: forwards !important ; /* Chrome 16+, Safari 4+ */
    -moz-animation-fill-mode: forwards !important ;    /* FF 5+ */
    -o-animation-fill-mode: forwards !important ;      /* Not implemented yet */
    -ms-animation-fill-mode: forwards !important ;     /* IE 10+ */
    animation-fill-mode: forwards !important ;         /* When the spec is finished */
    animation: appear 1.5s;
    -webkit-opacity:0;
}

.bg-elements {
    margin-top: 15%;
    margin-bottom: 15%;
    font-family: 'Nunito', sans-serif;
    color: white;
    text-align: center;
}

h1 {
    -webkit-animation-fill-mode:forwards !important ; /* Chrome 16+, Safari 4+ */
    -moz-animation-fill-mode: forwards !important ;    /* FF 5+ */
    -o-animation-fill-mode: forwards !important ;      /* Not implemented yet */
    -ms-animation-fill-mode: forwards !important ;     /* IE 10+ */
    animation-fill-mode: forwards !important ;         /* When the spec is finished */
    animation: appear 1.5s;
    animation-delay: 2s;
    opacity:0;
-webkit-opacity:0;
}

h3 {
    -webkit-animation-fill-mode: forwards !important ; /* Chrome 16+, Safari 4+ */
    -moz-animation-fill-mode: forwards !important ;    /* FF 5+ */
    -o-animation-fill-mode: forwards !important ;      /* Not implemented yet */
    -ms-animation-fill-mode: forwards !important ;     /* IE 10+ */
    animation-fill-mode: forwards !important ;         /* When the spec is finished */
    animation: appear 1.5s;
    animation-delay: 4s;
    opacity:0;
-webkit-opacity:0;
}

h4 {
    -webkit-animation-fill-mode: forwards !important ; /* Chrome 16+, Safari 4+ */
    -moz-animation-fill-mode: forwards !important ;    /* FF 5+ */
    -o-animation-fill-mode: forwards !important ;      /* Not implemented yet */
    -ms-animation-fill-mode: forwards !important ;     /* IE 10+ */
    animation-fill-mode: forwards !important ;         /* When the spec is finished */
    animation: appear 1.5s;
    animation-delay: 5s;
    opacity:0;
-webkit-opacity:0;
}

#countdown {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 48px;
    margin-top: 1px;
    animation: appear 1.5s;
    animation-delay: 6s;
}

@keyframes appear {
    from{opacity: 0;}
    to {opacity: 1;}
}