@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdr.ttf) format('truetype');
}

::selection {
  background: rgba(24,156,118,1); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: rgba(24,156,118,1); /* Gecko Browsers */
}

* {
    margin: 0;
    padding: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  display: flex;
  justify-content: center;
  background: rgb(83,227,166);
  background: radial-gradient(circle, rgba(83,227,166,1) 0%, rgba(24,156,118,1) 100%);
  color: white;
}

h1 {
  margin: 20px 20px 10px 20px;
  font-size: 2.8rem;
  text-align: center;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  padding: 5px 10px;
}
h1:hover {
  color: rgba(255, 255, 255, 0.85);
  cursor: default;
}
.wrapper {
  margin: 25vh 30px 0 30px;
}

.center {
    display: flex;
    justify-content: center;
}
.center svg {
  width: 180px;
  height: 180px;
  fill: rgba(255, 255, 255, 0.8);
}

.center svg:hover {
  fill: rgba(255, 255, 255, 0.85);
}

button {
  font-size: 1.2rem;
  outline: 1;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px 30px;
  color: rgba(255, 255, 255, 1);
  border-radius: 2px;
  cursor: pointer;
  font-weight: 300;
  font-family: 'Source Sans Pro', sans-serif;
}
button:hover {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.2);
}

.center.buttons {
  margin-top: 12vh;
}


/* Animation */
svg {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;
}
body.active svg {
  opacity: 1;
}

svg .logo-1 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;
}
body.active svg .logo-1 {
  opacity: 1;
}

svg .logo-2 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
}
body.active svg .logo-2 {
  opacity: 1;
}

svg .logo-3 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s;
}
body.active svg .logo-3 {
  opacity: 1;
}

svg .logo-4 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
}
body.active svg .logo-4 {
  opacity: 1;
}

svg .logo-5 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
}
body.active svg .logo-5 {
  opacity: 1;
}

svg .logo-6 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}
body.active svg .logo-6 {
  opacity: 1;
}

svg .logo-7 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
}
body.active svg .logo-7 {
  opacity: 1;
}

svg .logo-8 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}
body.active svg .logo-8 {
  opacity: 1;
}

h1 {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
}
body.active h1 {
  opacity: 1;
}

.center.buttons {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}
body.active .center.buttons {
  opacity: 1;
}