/*
* VARS
*/
$unselected: rgb(182,182,182);
$selected: white;
/*
* FONTS
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@font-face {
  font-family: 'Gilroy-bold';
  src: url('../../dist/fonts/Gilroy-ExtraBold.otf');//online version, if you want offline, put fonts in this folder and change the link here
}

body {
  margin: 0;
  padding: 0;
	background-color: #0e6cc4;
	overflow-x:hidden;
	overflow-y:hidden;
}

.title--main {
  margin: 0;
  padding: 0;
  position: fixed;
  left: 45px;
  top: 100px;
  font-size: 4rem;
  color: white;
  font-family: 'Gilroy-bold';
}
.view {
  width: 100%;
}
.title--description {
  margin: 0;
  padding: 0;
  position: fixed;
  left: 80px;
  top: 175px;
  font-size: 1.3rem;
  color: white;
  font-family: 'Open Sans', sans-serif;
}

.title--main.middle, .title--description.middle {
  left: 50%;
  top: 50%;
}

.user-cards-list {
  z-index: 99;
  width: 100%;
  height: 30vh;
  margin-top: 30vh;
  display: flex;
  .card {
    z-index: 99;
    margin: 5px;
    font-family: 'Open Sans', sans-serif;
    width: 30vh;
    height: 30vh;
    background-size: 30vh 30vh;
    font-size: 2rem;
    color: white;
    border: 5px solid transparent;
    .name {
      margin-top: -15px;
      padding-left: 5px;
      font-size: 43px;
    }
    img {
      height: 100%;
      width: 100%;
    }
    p {
      margin: 0;
    }
  }
  .card.selected {
    // margin-top: -5px;
    // margin-left: -5px;
    border: 5px solid white;
  }
  .card:first-child {
    margin-left: auto;
  }
  .card:last-child {
    margin-right: auto;
  }
}

.box {
  z-index: 1;
	position: fixed;
	top: 0;
	transform: rotate(80deg);
	left: 0;
}

.wave {
	position: fixed;
	top: 0;
	left: 0;
  opacity: .4;
  position: absolute;
  top: 3%;
  left: 10%;
  background: #0af;
  width: 3000px;
  height: 2600px;
  margin-left: -150px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 9000ms infinite linear;
}

.wave.-three {
  animation: drift 8500ms infinite linear;
	position: fixed;
	background-color: #77daff;
}

.wave.-two {
  animation: drift 8000ms infinite linear;
  opacity: .1;
  background: black;
	position: fixed;
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}