@font-face {
  font-family: robotoBold;
  src: url(../fonts/roboto-bold.ttf);
}
@font-face {
  font-family: robotoThin;
  src: url(../fonts/roboto-thin.ttf);
}
@font-face {
  font-family: robotoLight;
  src: url(../fonts/roboto-light.ttf);
}
@keyframes gototop {
  0% {
    top: 100%;
  }
  100% {
    top: 10%;
  }
}
@keyframes gototop2 {
  0% {
    top: 100%;
  }
  100% {
    top: 25%;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  animation-name: fadein;
  animation-duration: 3s;
}
#bar {
  text-align: center;
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  background-color: white;
  animation-name: fadein, gototop;
  animation-duration: 3s;
}
#barp {
  margin-top: 0;
  margin-left: 0.4cm;
  margin-right: 0.4cm;
  line-height: 1;
  font-size: 30px;
}
body {
  height: 100vh;
  background: url(images/background.png) no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
}
center {
  padding: 30px;
}
.main-title {
  margin: 10px 0 0px;
  font-family: robotoBold;
  font-size: 6vw;
  /* Transparent styling */
  /*background: url(images/bg.jpg) no-repeat center center fixed;
    background-size:cover;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text; */
  color: black;
}
.main-title span {
  font-family: "Times New Roman", Times, serif;
  font-size: 12vw;
  vertical-align: middle;
  overflow: hidden;
}
.desc {
  font-size: 0.5cm;
  font-family: robotoLight;
  color: #444;
}
#links {
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: calc(10% + 3vw);
  animation: fadein 3s ease 3s forwards;
  width: 100%;
  text-align: center;
}
.link {
  border: 3px #fff solid;
  display: inline-block;
  border-radius: 10vw;
  transition: all 0.2s ease-out;
  color: white;
  font-family: robotoBold;
  font-size: calc(0.3cm + 1.3vw);
  padding: calc(0.3cm + 1.3vw);
  margin-bottom: 0.5cm;
  margin-left: 0.25cm;
  margin-right: 0.25cm;
}
.link:hover {
  border: 3px #fff solid;
  display: inline-block;
  padding: calc(0.8cm + 1.8vw);
  border-radius: 13vw;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease-in;
}
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.link img {
  max-height: 8vw;
  vertical-align: middle;
  transition: all 0.2s ease-out;
}
.link:hover img {
  max-height: 10vw;
  vertical-align: middle;
  transition: all 0.2s ease-in;
}

#footer {
  font-family: robotoLight;
  color: white;
  position: absolute;
  bottom: 15px;
  width: 100vw;
  text-align: center;
}
#footer a {
  color: lightblue;
}
.cancel {
  animation: none !important;
  opacity: 1 !important;
}
.logo {
  height: 8vw;
  display: inline-block;
  transform: translateY(1.8vw) scale(1.4);
}
.info {
  width: 90%;
  max-width: 600px;
  margin-top: 16%;
  color: white;
  font-family: robotoLight;
}

.face {
  width: calc(4vw + 10vh);
  height: calc(4vw + 10vh);
  object-fit: cover;
  border-radius: 50%;
  margin: 0;
  left: 1vw;
  top: 1vw;
  position: absolute;
  z-index: 100;
  border: 5px grey solid;
}