html {
  height: 100%;
}

body
{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#Hide, #Show
{
  vertical-align: top;
  position:absolute;
  background-color: transparent;
  border:none;

  color:rgba(51, 138, 214, 0.4);
  top:2vh;
  right:2vw;
  font-size: 3vw;
}

#Show
{
  right:2.2vw;
}
#Hide:hover, #Show:hover
{
  color:rgba(51, 138, 214, 0.84);
}

#VisitCard
{
  width:30vw;
  height:17vw;
  position:absolute;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 1vw;
  background: linear-gradient(153deg, rgba(255,255,255,0.76234243697479) 0%, rgba(255,255,255,0.4290091036414566) 35%, rgba(255,255,255,0.19371498599439774) 100%);
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  animation: visitcard 10s infinite;
}
#Presentation
{
  display: flex;
  flex-direction: row;
  align-items: center;
}
#Links
{
  height:20%;
  margin:0.5vw;
  display: flex;
  flex-direction: row;
}

i {
  font-size: 2vw;
  color: rgba(255, 255, 255, .75);
  margin: 0.2vw;
  margin-left:0.6vw;

}

i:hover {
  color: rgba(255, 255, 255);
  transition: color 0.3s ease-in;
}
#TextPresentation
{
  margin:1vw;
  font-family: 'Montserrat', sans-serif;
  font-size:1vw;
  border-radius:1vw;
  color:white;
  padding:1vw;
  animation: pop 1s ;
  animation-fill-mode: forwards;
}


#ProfilePicture
{
  margin:2vw;
  width:8vw;
  height:8vw;
  border-radius: 50%;

}

@media only screen and (max-device-width: 768px) {

  #VisitCard
  {
    width:37vh;
    height:70vh;
    border-radius: 2vh;
    animation: 0;
    box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.65);
  }
  #Presentation
  {
    flex-direction: column;

  }
  #Links
  {
    justify-content:space-around;
  }

  #Hide,#Show
  {
    font-size: 5vh;
  }

  #Show
  {
    right:2.6vw;
  }
  i {
    font-size: 7.8vh;
    margin: 0.2vh;

  }

  #TextPresentation
  {
    margin:1vh;
    font-size:2vh;
    border-radius: 1vh;
  }

  #ProfilePicture
  {
    width:25vh;
    height:25vh;
  }
}


@-webkit-keyframes visitcard {
  0% {
    -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.25);
  }
  70% {
    -webkit-box-shadow: 0 0 7px 7px rgba(255, 255, 255, 0.25);
  }
  100% {
    -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.25);
  }
}
@keyframes visitcard {
  0% {
    -moz-box-shadow: 0 0 1 1 rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.25);
  }
  70% {
      -moz-box-shadow: 0 0 7 0 rgba(255, 255, 255, 0.65);
      box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.65);
  }
  100% {
      -moz-box-shadow: 0 0 1 1 rgba(255, 255, 255, 0.25);
      box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.25);
  }
}

@keyframes pop {
  0% {
      box-shadow:
      0px 0px 0px 0px #cfcfcf99,
      0px 0px 0px 0px #cfcfcf99,
      0px 0px 0px 0px #0002,
      0px 0px 0px 0px #0001;
  }
  70% {
      box-shadow:
      -6px -6px 20px 0px #cfcfcf99,
      -3px -3px 5px 0px #cfcfcf99,
      6px 6px 20px 0px #0002,
      3px 3px 5px 0px #0001;
  }
  100% {
      box-shadow:
      -7px -7px 20px 0px #cfcfcf99,
      -4px -4px 5px 0px #cfcfcf99,
      7px 7px 20px 0px #0002,
      4px 4px 5px 0px #0001;
  }
}