// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
nav{
	font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
	color: rgba(244,242,243,.9);
	
}
body{
  background-color:eeeeff;

}
.bodycolor{
  background-color: darkslateblue;
}
.mynameis{
  border-radius: 1em;
  background-color: rgba(245, 0, 0, 1.0);
  color: white;
  padding-bottom: 1em;
  margin-top:1em !important;
  //margin: 10%;
}
.nameis{
  background-color: white;
  color: turquoise;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size:2em;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
}
#appcontainer{
  height:400px;
  margin-bottom: 3em;
}
.nameisanim {
 font-weight: 900;
 color: black;
}


.zzstuff{
  color: lightcoral;
  /*background-image: linear-gradient(black, white);
background-image: url("/x/images/PATOcut.png");*/
}
.zzheadline {
  font-weight: 900;
}
 /* Normal image */
  .fullscreen-image {
    max-width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
  }

  /* Fullscreen background */
  .image-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(0, 0, 0, 0.95);
  }

  .image-overlay.active {
    display: flex;
  }

  /* Fullscreen image */
  .image-overlay img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;

    object-fit: contain;
    cursor: zoom-out;
  }

  /* Close button */
  .image-close {
    position: absolute;
    top: 20px;
    right: 25px;

    border: 0;
    background: transparent;
    color: white;

    font-size: 45px;
    line-height: 1;

    cursor: pointer;
    z-index: 2;
  }
  .lightsea{
    background: lightseagreen !important;
    outline: 6px solid cyan !important;
    border: 4px solid cornflowerblue !important;
  }
  .newbox{
    background: fuchsia !important;
    outline: 6px solid hotpink !important;
    border: 4px solid indianred !important;
  }
  html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
canvas{
  //outline:5px solid red;
}
.pixellink{
  color: white;
}
.margetop {
  margin-top: 2em;
}
.pixel-box {
  padding: 20px;
  margin-top: 3em;

  background: darkblue;
  color: #fff;

  border: 4px solid darkgoldenrod;
  outline: 6px solid cornflowerblue;

  box-shadow: -10px 18px 0 black;
  margin-bottom: 50px;

  font-family: monospace;
  font-size: 16px;
  line-height: 1.6;
}
.namesectionheadline{

  /*font-family: 'Courier Prime', monospace;*/
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size:2em;
  margin:0px;
  text-align: center;
  
  color:whitesmoke;
}
.margehard{
  margin-top:15em !important;
}
#app {
      position: block;
      inset: 0;
      

  margin-bottom: 50px;
  height: min(70vh, 700px);
  min-height: 550px;
  overflow: hidden;
    }
    @media (max-width: 768px) {
  #app {
    height: 60dvh;
    min-height: 350px;
    max-height: 600px;
  }
}

    #info {
      position: block;
      top: 16px;
      left: 16px;
      z-index: 5;
      max-width: 340px;
      padding: 10px 12px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 4px 20px rgba(225,0,0,1);
      font-size: 14px;
      line-height: 1.4;
    }

    #ios-ar {
      display: none;
      position: block;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      padding: 12px 18px;
      border-radius: 8px;
      background: #111;
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
    }

    canvas {
      display: block;
    }
.circle {
        display: flex;
        /* CIRCLE SIZE */
        width: 110px;
        height: 110px;
        background: black;
        /*BACKGROUND COLOR HERE*/
        border-radius: 50%;
        justify-content: center;
        align-items: center;
    }
nav * {
		color: rgba(244,242,243,.9);
	}
nav div ul li a {
	color: rgba(244,242,243,.9);
	
}
#myCanvasId{
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width:100%;

}
#myCanvasId2{
  position: absolute;
  left: 0px;
  top: 0px;
  height: 120%;
  width:100%;
  z-index: 1000;

}
.wildbutton{
  font-size:2em;

  background-color: red;
      font-weight: 800;
    color: white;
    border:none;
    border-radius:.5em;
    font-family: "Roboto", sans-serif;
    padding:.2em;
}
a:link { 
  text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}
#logotop{
  width: 80px;
}
.p-0 {
  overflow: hidden;
}
.navbar-brand{
	/*color: rgba(100,0,148,.9);*/
	color:rgba(255,216,0,1);
}
.nav-link {
	color: rgba(244,242,243,.9) !important;
	transition: color 0.5s ease !important;

}
.nav-link:hover{
	color:rgba(255,216,0,1) !important;
}
.active{
  color:rgba(255,216,0,1) !important;
}
.sectionheadline{
	/*font-family: 'Courier Prime', monospace;*/
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
	font-size:4em;
  margin:0px;
  
	color:black;
}
.contenthead {
	font-size: 1.2em;
	    font-family: 'Courier Prime', monospace;

    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
}
.contenttext {
	font-size: 1.2em;
	    font-family: 'Courier Prime', monospace;

    font-family: 'Source Sans 3', sans-serif;
    font-weight:300;
}
.contenttext_small {
	font-size: 1em;
	    font-family: 'Courier Prime', monospace;
	    color: rgb(50,55,60);

    font-family: 'Source Sans 3', sans-serif;
    font-weight:300;
}
.col-content{
	margin-top:4em;
	margin-bottom: 2.5em;
}
.expertiseitem{
	min-height:200px;
	margin-top:2em;
}
.expertiseitem * {
	    font-family: 'Courier Prime', monospace;

    font-family: 'Source Sans 3', sans-serif;
	}
  .floatinglink {
    color:black;
    /*font-family: 'Courier Prime', monospace;*/
    /*font-weight: 800;*/
    transition: color 0.5s ease;
    &.w{
      color: rgba(244,242,243,1);
    }

  }
  .floatinglink.w {
    color: rgba(244,242,243,1);
  }
  .floatinglink:hover{
  color:rgba(255,216,0,1);
}

.wfloatinglink {
    color: rgba(244,242,243,1);
    /*font-family: 'Courier Prime', monospace;*/
    /*font-weight: 800;*/
    transition: color 0.5s ease;
    &.w{
      color: rgba(244,242,243,1);
    }

  }
  .wfloatinglink.w {
    color: rgba(244,242,243,1);
  }
  .wfloatinglink:hover{
  color:rgba(255,216,0,1);
}

.expertiseimage img{
	width:70%;
}
#about{
	background-color: rgb(12,10,7);
}
.w{
	color: rgba(244,242,243,1);
}

.parallax {
  /* The image used */
  background-image: url("images/xyz.jpg");

  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.box{
  margin:25px;
  
  background:#000;
  border: solid black;
  border-color: black;
  float:left; 
}
.evenboxinner{
  position: absolute;
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#fff;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;
  font-weight: 500;
}

.box1{
  border-width: 3px 4px 3px 5px;
  border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
}

 /* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
} 
.astro {
  /* The image used */
  background-image: url("../images/imgtrickfill.png");

  /* Set a specific height */
  /*min-height: 500px;*/
  height:50px;
  background-size:100% 130%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
}

.astronaut {
	position:fixed;
	height:500px;
	left:45%;
	top:50%;
}
.container-fluid{
  overflow: hidden;
}
.astronaut_bg{
position: relative;
	background-image: url("../images/imgtrickbg.png");
	background-position: center;
 	background-repeat: no-repeat;
 	background-color: rgba(5,2,1,1);
 	height:700px;

}

.rrrt {
  /* The image used */
  background-image: url("../images/logoXY.png");

  /* Set a specific height */
  /*min-height: 500px;*/
  height:50px;
  background-size:100px 100px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
.rrrtbg{
position: relative;
  background-image: url("../images/bgxxs.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(5,2,1,1);
  height:700px;

}
.headerimage{
  position: relative;
	background-image: url("../images/bgxxs.jpg");
	/*background-image: url("../images/astronaut_bg.svg");*/
	background-color: rgba(5,2,1,1);
	background-position: center;
 	background-repeat: no-repeat;
  	background-size: cover;
  	/*height:600px;*/
    min-height:600px;
    min-height:auto;
    height: 100vh;
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	
}


.foot{
  min-height: 500px;
}
.rocket{
	width:100%;
}


.portrait {
  max-width: max-content;
    max-height: max-content;
}
.astroc {
  /* The image used */
  background-image: url("../images/astrocut.png");

  /* Set a specific height */
  /*min-height: 500px;*/
  background-size: cover;
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: absolute;
  background-position: center;
  background-repeat: no-repeat;
}


.astronautc_bg{

	background-image: url("../images/rocketbgblank.jpg");
	/*background-image: url("../images/astronaut_bg.svg");*/
	background-color: rgba(5,2,1,1);
	background-position: center;
 	background-repeat: no-repeat;
  	background-size: cover;
  	height:600px;
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;

}

@media (min-width: 992px) {  
    .foot{
  min-height: 700px;
}
.headerimage{
  min-height: 700px;
}
}
@supports ( -webkit-touch-callout : none) {
.headerimage {
  background-attachment:scroll;
}
}
@supports ( -webkit-touch-callout : none) {
.astro {
background-attachment:scroll;
}
}