@import url(//fonts.googleapis.com/css?family=Lato:300:400);


* {
  box-sizing: border-box;
}
:root {
  --bg: #1a1a1a;
  --min-size: 200px;
}
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  background: var(--bg);
    
    font-family: 'Lato', sans-serif;
}

/*
Profile Cards
*/

.comingSoon {
        filter: grayscale(100%) contrast(1);
    pointer-events: none;
    background-color: #545454;
    background: rgb(63,94,251);
    background: linear-gradient(90deg, rgb(38 58 161) 0%, rgba(252,70,107,1) 100%);
}


    .profileContainer {
        
    display: inline-block;
    position: relative;
    width: 70%;
    height: fit-content;
    top: 56%;
    left: 0%;
    transform: translate(0%, -50%);
    pointer-events: none;
        
}

.profileDummy {
  margin-top: 100%;
  /* 4:3 aspect ratio */
}

.profileElement {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  overflow:hidden;
      
  border-radius: 400px;
    box-shadow: 3px 5px 10px #0000006e;
    background: url("https://themind.company/tmc-content/gpt3api/personas/scarlett.png");
    background-size: cover!important;
    
    background-color: white!important;
}

.cardContent {
  text-align: center;   
  
    
        position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
}

.cardContent .upperSection {
    height: 100%;
}

.cardContent .lowerSection {
    /*position: absolute;
    bottom: 0px;*/
    background-color: white;
    width: 100%;
    text-align: center;
    font-size: 0.6em;
    padding: 0px 20px 15px 20px;
}


.cardContent .personaTitle {
    margin: 5px 0px;  
    font-weight:bold;
}
.cardContent .personaName {
    font-size: 1.5em;
    margin: 5px 0px 5px 0px; 
    font-weight:bold;
}

.cardContent .personaSocials {
    margin: 5px 0px;      
}
.cardContent .personaBio {
    margin: 5px 0px;      
}

@media only screen and (max-width: 600px) {
    .cardContent .lowerSection {
        font-size: 0.6em;
    }
    
    .box {
       height: calc(50vmin * 1.5)!important;
       width: calc(33vmin * 1.5)!important;   
    }
    
    .cardContent .personaBio {
        /*margin: 5px 0px;      */
    }
    
    .profileContainer {
        width: 60%;
        top: 60%;   
    }
    
}

@media only screen and (max-width: 400px) {
    .cardContent .lowerSection {
        font-size: 0.4em;
        padding: 0px 7px 15px 7px;
    }
}


.cardContent .personaButton {
    background-color: #4f338d;
    width: fit-content;
    margin: auto;
    padding: 7px 17px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.5em;
    /* margin: 10px 10px; */
    margin-top: 10px;
    color: white;
    background: rgb(63,94,251);
    background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    box-shadow: 2px 1px 5px #0000006e;
    cursor:pointer;
    text-decoration:none;
    display: block;

}

/* Profile Cards*/

.drag-proxy {
  visibility: hidden;
  position: absolute;
}
.controls {
    /*
  position: absolute;
  top: calc(50% + clamp(var(--min-size), 20vmin, 20vmin));
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  display: flex;
  justify-content: space-between;
  min-width: var(--min-size);
  height: 44px;
  width: 20vmin;
  z-index: 300;
    */
    
    position: absolute;
    top: calc(50%);
    left: 50%;
    /*transform: translate(-50%, -50%) scale(1.5);*/
    transform: translate(-50%, -50%) scale(1);
    display: flex;
    justify-content: space-between;
    min-width: var(--min-size);
    height: 44px;
    /*width: 50vmin;*/
    width: calc(100% - 150px);
    z-index: 300;
    pointer-events:none;
    
}
button {
    pointer-events:all;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  position: absolute;
  top: 0%;
  outline: transparent;
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  transition: transform 0.1s;
  transform: translate(0, calc(var(--y, 0)));
    
  transform: scale(1.5)!important;
}
button:before {
  /*border: 2px solid #e6e6e6;*/
  /*background: linear-gradient(rgba(204,204,204,0.65), #000) #000;*/
    background:white;
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80%;
  width: 80%;
  border-radius: 50%;
  box-shadow: 3px 5px 10px #0000006e;
}
button:active:before {
  background: #d9d9d9;
    outline: 3px solid #ffffff5c;
}

button:hover:before {
  outline: 3px solid #ffffff5c;
}

button:nth-of-type(1) {
  right: 100%;
}
button:nth-of-type(2) {
  left: 100%;
}
button span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
button:hover {
  --y: -5%;
}
button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) translate(2%, 0);
  height: 30%;
  fill: #3c3c3c;
}
button:nth-of-type(1) svg {
  transform: translate(-50%, -50%) rotate(180deg) translate(2%, 0);
}
.scroll-icon {
  height: 30px;
  position: fixed;
  top: 1rem;
  right: 1rem;
  color: #e6e6e6;
  -webkit-animation: action 4s infinite;
          animation: action 4s infinite;
}
.boxes {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: absolute;
  transform-style: preserve-3d;
  perspective: 800px;
  touch-action: none;
}
.box {
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
  /*height: 40vmin;
  width: 25vmin;*/
  height: 50vmin;
  width: 33vmin;
    
  /*min-height: var(--min-size);
  min-width: var(--min-size);
  */
  display: none;
    
  background-position-x: center!important;
  background-size:cover!important;
  border-radius: 20px;
  overflow: hidden;
}
.box:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background-image: var(--src);
  background-size: cover;
  transform: translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin);
  opacity: 0.75;
}
.box:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--bg) 50%, transparent);
  transform: translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin) scale(1.01);
  z-index: 2;
}
.box img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.box:nth-of-type(odd) {
  background: #b3f075;
}
.box:nth-of-type(even) {
  background: #66b814;
}
@supports (-webkit-box-reflect: below) {
  .box {
    /*-webkit-box-reflect: below 0.5vmin linear-gradient(transparent 0 50%, #fff 100%);*/
    
      /*-webkit-box-reflect: below 0.5vmin linear-gradient(transparent 85% 27%, #fff 159%);*/
  }
  .box:after,
  .box:before {
    display: none;
  }
}
@-webkit-keyframes action {
  0%, 25%, 50%, 100% {
    transform: translate(0, 0);
  }
  12.5%, 37.5% {
    transform: translate(0, 25%);
  }
}
@keyframes action {
  0%, 25%, 50%, 100% {
    transform: translate(0, 0);
  }
  12.5%, 37.5% {
    transform: translate(0, 25%);
  }
}