/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Uto Light by Fenotype
 * URL: https://www.myfonts.com/products/light-uto-589265
 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved.
 * 
 * © 2023 MyFonts Inc. */


  
 @font-face {
  font-family: "UtoLight";
  src: url('https://www.shadowuniverse.xyz/webFonts/UtoLight/font.woff2') format('woff2'), url('https://www.shadowuniverse.xyz/webFonts/UtoLight/font.woff') format('woff');
}



/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* Smart Target CSS */
.smt-app {
  z-index: -10;
}
.smt-app-contact_form .sm-box-body .cf-label {
  color: #000;
}
.smt-app-contact_form .sm-button.top-left, .smt-app-contact_form .sm-button.bottom-left, .smt-app-contact_form .sm-button.left {
  right: 25px;
  left: auto;
}
.smt-app-contact_form .sm-button.sm-button-circle, .smt-app-contact_form .sm-button.sm-button-circle a:not(.powered-link) {
  margin-bottom: 64px;
}
.smt-app-contact_form .sm-button.bottom-left .powered-link, .smt-app-contact_form .sm-button.bottom-right .powered-link, .smt-app-contact_form .sm-button.bottom .powered-link, .smt-app-contact_form .sm-button.bottom-center .powered-link {
  display: none;
}
.smt-app-contact_form .sm-box-body .cf-input {
  color: #999;
}
.app-contact_form .sm-box-body .cf-success {
  color: #222;
}

/* Reset */
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}


/* Global */

html {
  cursor: auto;
  background-color :#000;
}

body {
  color: #fff;
  padding: 0;
  margin: 0;
  font-family: 'UtoLight', monospace;
}

.content {
  opacity: .96;
  padding: 0;
  background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABhJREFUGFdj/P//vxQjI+MzRgYGBgYQBwBDmgca9iZyOgAAAABJRU5ErkJggg==) repeat; 
}

.text {
  margin: 64px 16px;
  padding-bottom:400px;
}

img {
  max-width: 100%;
  height:auto;
  vertical-align: top;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACxJREFUGFdlyqEBACAMA8GPbTfI/rN1A2qDh9OngAVzgluMeIiU0Q4Vs/rHBbyxCwUAJXJwAAAAAElFTkSuQmCC) repeat;
}

figure {
  background-position: 50%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden;
}


/* Text */

a {
  color: #f8f8f8;
  background-color: #111111;
}

a:hover {
  background-color: #53AD55;
  /* cursor: url(""), auto; */
}

p {
  padding: 2px;
}

h1 {
  text-align: center;
  color: #fff;
  font-size: 4.4vw;
  letter-spacing: -1px;
  margin: 0;
  line-height: 0;
}

h2 {
  padding: 2px;
}

h3{
  padding: 2px;
}

h4{
  padding: 2px;
}


/* Images & Icons */

.image-shadowuniverse {
  background-image: url("https://drive.google.com/uc?export=view&id=1y1r3ZJU8SmoUyJTwcDU8UvZukOLcSTpl");
}

.image-about {
  background-image: url("https://drive.google.com/uc?export=view&id=1ZoGhpv7i4FhMBhmi1Lhku60r3BFGoaw7");
}

.image-about-universewtf {
  background-image: url("https://drive.google.com/uc?export=view&id=1E6UDLF6-irrebUaofyaPvtFtjzHiRimM");
}

.image-about-universela {
  background-image: url("https://drive.google.com/uc?export=view&id=1XMiIYKHbe260Q9s8pjp1N3Yar2FDNtGr");
}

.icon-home {
  background-image: url("https://drive.google.com/uc?export=view&id=17TJ0p_7AYY539-JO4OJdkKZf8jAR_EbJ");
}

.icon-instagram {
  background-image: url("https://drive.google.com/uc?export=view&id=1BVmoniWixemY02XU3RuDHYWbzhAlyOxQ");
}

.icon-vimeo {
  background-image: url("https://drive.google.com/uc?export=view&id=1jYiWdSTq2KF85XR4ZCHEmZwrZA5g3J9_");
}

.icon-discord {
  background-image: url("https://drive.google.com/uc?export=view&id=1xbPc3G5VUKsU9bGoNQu-YYAxiyLAMY_y");
}

.icon-universewtf {
  background-image: url("https://drive.google.com/uc?export=view&id=1mnsWDDzC0g2NvOgzdCYuy_YzxTiNUkvO");
}

.icon-universela {
  background-image: url("https://drive.google.com/uc?export=view&id=1eZTooXNDa4ON5pJ1tV3hajJUK-NAjhFE");
}



/* Navigation */

nav {
  display: block;
  padding:10px;
  color: #888;
  font-size: 10px;
}


/* Navigation */

.heading {
  position: -webkit-sticky; /* Required for Safari */
  position: sticky;
  padding-top: 100x;
}



/* Sticky */


.footer, .content{
  position: -webkit-sticky; /* Required for Safari */
  position: sticky;
  top:0;
}

.footer {
  background-color: #000;
  padding: 0 16px;
}


/* Menu */

menu {
  display: block;
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
  z-index: 9999999999;
}

.menu {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #000;
  color:#fff;
  border-top: #222 solid 1px;
  display: flex;
  vertical-align: middle;
  justify-content:space-between;
}

.menu .app > figure {
  width: 42px;
  height: 42px;
  margin:5px;
  background-color: #f1f1f1;
}

.menu .app {
  display: flex;
	line-height: 12px;
	font-size: 15px;
}

.menu .app .hide-text{
  display: none;
}

.menu .app img {
	padding: 0;
}

.menu .app ul li #active {
  border-top: 2px solid #53AD55;
}

.menu .app .app-home {
  display:none;
}

.menu .app ul {
  display: flex;
  flex-wrap: wrap;
	list-style: none;
  text-align: center;
  align-items: center;
}

.menu .app ul li {
	display: inline-block;
  padding: 10px 1px;
  
}

.menu .app ul li a{
	text-decoration: none;
  padding: 16px 10px;
  margin: 5px 0;
}


.menu .app ul li a > figure {
  width: 28px;
  height: 28px;
  margin: 0 5px;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

.menu .app li.home a > figure {
  width: 33px;
  height: 33px;
}

.menu .app li.home a {
  transition: 0.2s;
}

.menu .app li.universewtf a {
  transition: 0.2s;
}

.menu .app li.universewtf a:hover {
  border-top: 2px solid #666699; 
  background-color:#000;
  transition: 0.2s;
}

.menu .app li.universela a {
  transition: 0.2s;
}

.menu .app li.universela a:hover {
  border-top: 2px solid #1946D8; 
  background-color:#000;
  transition: 0.2s;
}

.menu .app li.home a:hover {
  background: #1a1a1a8a; 
  opacity: .77;
  transition: 0.2s;
}

.menu .app li.instagram a {
  background: inherit;
  transition: 0.2s;
}

.menu .app li.instagram a:hover {
  background: #f09433; 
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  transition: 0.2s;
}

.menu .app li.vimeo a {
  background: #d48d21; 
  transition: 0.2s;
  }

.menu .app li.vimeo a:hover {
  background: #d48c218a; 
  transition: 0.2s;
}

.menu .app li.discord a {

  transition: 0.2s;
  }

.menu .app li.discord a:hover {
  background: #5865F2; 
  transition: 0.2s;
}

.menu .app.notification ul {
  padding: 0 15px;
}

.menu .app.notification ul li a {
  padding: 15px 2px;
}

.menu .app.notification ul li a > figure{
  width: 22px;
  height: 22px;
  margin: 5px;
}


/* Video Embed */

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: 
  hidden; max-width: 100%; 
  height: auto; 
    
}

.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}


#container {
  width: 70vw;
  margin: 10vw auto;
}

/* Loader Blink */

.blink1 {
  animation: blinker 2.25s ease-in-out infinite;
}

@keyframes blinker {
  100% { opacity: 0; }
}

.blink_all {
  animation: blinker1 1.61803398875s ease-in-out infinite;
}

@keyframes blinker1 {
  90% { opacity: 0.9; }
}

/* About */

.about {
  display: flex;
  padding: 64px ;
  padding-bottom: 256px;
}

.about-text {
  margin: 60px 0 128px 0;
}

.about-text-highlight {
  background:#f8f8f8;
}

.about-info {
  padding-right: 48px;
  text-align: center;
  
}

.about-info > figure {
  width: 256px;
  height: 256px;
  background-color: #f1f1f1;
}

.about-info h3{
  margin: 0;
}

.about-info > figcaption {
  font-size:13px;
  margin: 10px 0 0 0;
  color: #888;
  text-transform: uppercase;
}

.about-info > figcaption a{
  color: #888;
  font-size:12px;
}
.about-info > figcaption a:hover{
  color: #fff;
}

.about-info-image {
  background-image: url("https://drive.google.com/uc?export=view&id=1y1r3ZJU8SmoUyJTwcDU8UvZukOLcSTpl");
}

.about-portfolio{
  margin: 54px 0 128px 32px;
  min-width: 143px;
}

.about-portfolio a{
  text-transform: uppercase;
  font-size: 11px;
  line-height: 24px;
  padding-left:4px;
}

.rounded-circle {
  border-radius: 50% !important;
}

/* Projects */

.projects {
  display: flex;
  padding: 64px ;
  padding-bottom: 256px;

}

.project{

  
}


.projects-info .column {
  width: 300px;
    height: 40vh;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

}

.projects-info {
  display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
}

.projects-info > figure {
  width: 256px;
  height: 256px;
  background-color: #f1f1f1;
}

.projects-info h3{
  margin: 0;
}

.projects-info > figcaption {
  font-size:13px;
  margin: 10px 0 0 0;
  color: #888;
  text-transform: uppercase;
}

.projects-info > figcaption a{
  color: #888;
  font-size:12px;
}
.projects-info > figcaption a:hover{
  color: #fff;
}

.projects-info-image {
  background-image: url("https://drive.google.com/uc?export=view&id=1y1r3ZJU8SmoUyJTwcDU8UvZukOLcSTpl");
}

/* Contact */

.contact {
  display: flex;
  margin: 10px;
  padding: 64px ;
  padding-bottom: 128px;
}


/* Footer */

.footer {
  display: flex;
  margin: 64px;
  padding-bottom: 64px;
}

.footer .footer-top {
	padding: 1px;
  margin: 1px auto;
  display: flex;
  justify-content:space-between;
}

.footer .footer-top .legal {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
  line-height: 10px;
  font-size: 10px;
  
}

.footer .footer-top .legal ul {
  list-style: none;
  padding: 12px 0;
  margin: 0px;
}

.footer .footer-top .legal ul li {
  display: inline-block;
  margin: 6px 4px;
}

.footer .footer-top .legal p {
  margin: 18px 8px;
}

.footer .footer-top .legal a {
  line-height: 14px;
  margin:  0px;
  font-size: 12px;
  color: #888;
}

.footer .footer-top .legal a:hover {
  text-decoration: none;
  transition: 0.2s;
  color: white;
}

.footer .footer-bottom {
	padding: 1px;
  margin: 1px auto;
  display: flex;
  flex-direction: column;
  color:dimgray;

}

.footer .footer-bottom .trademark {
  font-size: 12px; 
  
}

.footer .footer-bottom .copyright {
  font-size: 10px; 
}





/* Tablet */

@media screen and (max-width: 999px) {  

  .content {
    padding: 64px 32px 0;
    margin: 0 auto;
  }

  .menu .app.notification ul {
    padding: 0 10px;
  }
  
  .menu .app.notification ul li a {
    padding: 20px 13px;
  }
  
  .menu .app.notification ul li a > figure{
    width: 24px;
    height: 24px;
    margin: 5px;
  }

  .menu .app ul li {
    display: inline-block;
    padding: 11px 1px;
  }
  
  .menu .app ul li a{
    text-decoration: none;
    padding: 19px 15px;
  }

  .menu .app ul li a > figure {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;

  }

  .menu .app li.home a > figure {
    width: 42px;
    height: 42px;
  }
  
  .menu .app .app-text {
    display:none;
  }
  
  .about {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .about-info {
    margin: auto;
    padding: 0;
    padding-bottom: 64px;
    text-align: center;
  }
  
  .about-text {
    font-size: 16px;
    margin: 0 0 64px 0;
  }

  .about-portfolio{
    margin: 0 0 64px 0;
  }


}

/* Mobile */

@media screen and (max-width: 666px) {  
  
  h1 {
    font-size: 6.4vw;
  }
  
  .logo { 
    background-size: 120px;
    width: 120px; 
    height: 72px;  
    display:flex; 
    margin: auto;
  }
  
  .heading p {
    margin-top:8px;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
  }
  
  .content {
    padding: 0 0px;
    margin: 0 auto;
    text-align: center;
  }
  
  .center {
    padding: 0 0px;
  }
  
  .header h2{
    font-size: 18px;
    line-height: 24px;
    padding-top: 4px;
  }

  .button-area{
    flex-direction: column;
    padding: 0;
  }
  
  .button{
    margin:8px auto;
  }

  .about {
    padding:16px;
  }
  
  .about-text{
    padding: 0 16px;
    font-size: 14px;
  }
  
  .about-portfolio{
    margin: 0 16px 16px 16px;
  }

  .menu {
    flex-wrap:wrap;
  }
  
  .menu .app.notification ul {
    padding: 0 0;
    justify-content: center;
  }

}