body { background-color: #000000;
margin: 0;}

@keyframes margin-anim {
  0%   {margin: 0px;}
  5%  {margin: 7.1px;}
  60% {margin: 0px;}
}

@keyframes mmargin-anim {
  0%   {border-width: : 1px;}
  5%  {border-width: 20.1px;}
  25% {border-width: 10px;}
  80% {border-width: 1px;}
}

a.vlink, a.xylink {
    text-decoration: none;
    font-family: monospace;
    font-size: calc(1.5vw + 1.5vh);
    color:#fff;
}

a.vlink:active, a.xylink:active {
  font-style: italic;
}

.vncnt:hover, .xyb2x1c:hover {
 transform: scale(1.2);
}


.vncnt, .xyb2x1c {
  position: absolute;
}

.vncnt {
  left:2vw;
  top: 2vw;
  z-index: +10;
}

.xyb2x1c {
  left: 2vw;
  bottom: 2vw;
  z-index: +20;
}

a.floatplease
{ max-width:20.1%;
  margin: 0px;
  animation-name: margin-anim;
animation-duration: 3s;
animation-iteration-count: infinite;
display:block;
}

.fun {
  max-width: 100%;
  float: left;

}

.fun:hover {
  transform: scale(1.2);
}

.fun:active {
  border-width: 1px;
  border-style: groove;
  border-color: black;
  animation-name: mmargin-anim;
animation-duration: 3s;
animation-iteration-count: infinite;
}

.container {
  margin-left: 25%;
    margin-top: 10vh;
    display: flex;
    width: 50%;
    flex-flow: wrap;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
}

@media screen and (max-width: 1080px){
  .container {
    margin-left: 20%;
      margin-top: 10vh;
    width:60%;
  }
}
@media screen and (max-width: 760px){
  .container {
    margin-left: 15%;
      margin-top: 10vh;
    width:70%;
  }
}