body{
   background: black;
}

main{
   padding-top: 30pt;
   min-height: 100vh;
}

h1{
   letter-spacing: 2pt;
}



h4{
   padding-bottom: 5pt;
   font-size: 16pt;
   color: var(--color-text);
}

.text{
   font-size: 14pt;
   text-align: justify ;
}

.asset{
   width: auto;
   padding: 3.5% 20% 5%;
   border-bottom: 1px solid var(--color-border);
   transition: padding-left ease .2s, padding-right ease .2s;
}

@media only screen and (max-width: 1200px) {
   .asset{
      padding: 3.5% 10% 5%;
      transition: padding-left ease .2s, padding-right ease .2s;
   }

   .text{
      font-size: 11pt;
      text-align: justify ;
   }

   .externalLink{
      font-size: 15pt;
   }
}

.content{
   padding-bottom: 50pt;
   padding-top: 15pt;

   margin-bottom: 2vw;

}


/* ------------------------------------------------------------- */


/* PREVIEW */

#selection{
   width: auto;
   height: auto;
   min-height: 85vh;
   display: block;
   border-bottom: 1px solid var(--color-border);
   transition: padding-left ease .2s, padding-right ease .2s;
}


.title{
   width: 100%;
   display: table;
   font-size: 12pt;
   text-align: center;
   margin-top: 1vh;
   margin-bottom: 5vh;
   letter-spacing: 4pt;
}

.assetsPreviewWrapper{
   display: flex;
   height: max-content;
   margin: auto;
}


.assetPreview{
   text-decoration: none;
   color: inherit;
   text-align: center;
   flex: 1;
   float: left;
   box-sizing: border-box;
   border-right: 1px solid var(--color-border);
}



.assetPreviewTitle{
   margin-top: 30pt;
   text-align: center;
}

.assetPreview img{
   transition: transform ease .3s;
}

.assetPreview:hover img{
   transition: transform ease .4s;
   transform: scale(1.06);
}

.previewThumbnail{
   max-width: 100%;
   max-height: 100%;
}

#unityAssetStoreLink{
   margin-top: 7vh;
   margin-bottom: 7vh;
}


/* ------------------------------------------------------------- */


/* ANIMATION */

.thumbnailContainer{
   align-content: center;
   text-align: center;
   margin-bottom: 20px;
   padding-bottom: 0;
}

.fillerImage.img{
   margin: auto;
   display: block;
}

.thumbnail{
   max-width: 100%;
   max-height: 50vh;
}




.icon{
   height: 38pt;
   background: #c7cad0;
   border-radius: 50pt;
   border: solid 1.5pt #c7cad0;
   float: left;
   margin-right: 10pt;
}

/* ------------------------------------------------------------- */



/* EXTERNAL LINKS */

.linksContainer{
   text-align: center;

   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
}

.linksContainer a{
   color: var(--color-link);
   text-decoration: none;
}

.externalLinkIcon{
   padding-top: 1pt;
   padding-left: 8pt;
   height: 16pt;
}

.externalLink{
   font-family: 'Roboto';
   padding: 5pt 9pt 4pt 9pt;
   border: 2pt solid var(--color-border-interactive);
   border-radius: 5pt;
   display: inline-flex;
   transition: all ease .3s;
   margin-left: 5pt;

   margin-top: 5pt;

   font-size: 14pt;
}

.externalLink:hover{
   background: var(--color-surface-hover);
   cursor: pointer;
   transition: all ease .3s;
}

/* ------------------------------------------------------------- */


/* IMAGE GALLERY */


/* ------------------------------------------------------------- */


/* DESCRIPTION */

.description{
   padding-bottom: 20pt;
}

/* PROPERTIES */

.properties{
   border-top: 1px solid var(--color-border);
   line-height: 26pt;
}

.pricing{
   background: #08080c;
   padding: 2pt 6pt 2pt 6pt;
   border: 2pt solid var(--color-border);
   border-radius: 5pt;
}


/* ------------------------------------------------------------- */


/* DOWNLOAD LINKS */
.downloads{
   border-top: 1px solid var(--color-border);
   padding-bottom: 80pt;
}

.downloads img{
   height: 18pt;
   padding-left: 7pt;
   transform: translateY(4pt);
}

.downloadButton{
   display: inline-block;
   color: #e6e8ec;
   border-radius: 3pt;
   padding: 2px 12px 4px;
   margin-right: 3pt;
   transition: all ease  .4s;
   background: #c51d36;
   text-align: center;
}

.downloadButton:hover{
   border-radius: 7pt;
   transition: all ease  .4s;
}

.filesize{
   color: var(--color-text-muted);
}

/* ------------------------------------------------------------- */


.previewDetails{
   padding-top: 10pt;
   margin-top: 25pt;
   border-top: 1px solid var(--color-border);
}

@media screen and (orientation:portrait){
   .assetsPreviewWrapper{
      width: 90%;
   }

   .assetPreviewTitle{
      font-size: 11pt;
      letter-spacing: 4pt;
   }

   .previewDetails{
      font-size: 11pt;
      letter-spacing: 4pt;
   }

   .assetsPreviewWrapper{
      width: 50%;
      display: table;
   }

   .assetPreview{
      width: 100%;
      height: 100%;
      display: block;
      padding: 30pt 4%;
      border-right: none;
   }
}

@media screen and (orientation:landscape) {

   .assetsPreviewWrapper{
      width: 70%;
   }

   .assetPreview{
      width: 33.3%;
      padding: 30pt 8%;
   }

   .assetPreviewTitle{
      font-size: 11pt;
      letter-spacing: 4pt;
      text-align: center;
      display: flex;
      justify-content: center;
   }

   .previewDetails{
      font-size: 11pt;
      letter-spacing: 4pt;
      text-align: center;
      display: flex;
      justify-content: center;
      width: 100%;
   }
}