.homescreen {
  height: min(800px, 92vh);
}


.homeimg_container {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  xbackground-color: rgb(40,40,40);
  xborder: .7vh solid rgb(255,255,255);
  xoverflow: hidden;
  xz-index: 0;
}


.contentcontainer_show #img1 {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  xbackground-attachment: scroll;
  xbackground-repeat: no-repeat;
  x-webkit-background-size: cover;
     x-moz-background-size: cover;
       x-o-background-size: cover;
          xbackground-size: cover;
  xbackground-position: center top;
  opacity: .5;
  -webkit-animation: img1_movein 1s ease-out;
          animation: img1_movein 1s ease-out;
}

@keyframes img1_movein {
  from { transform: scale(1.2, 1.2); }
  to   { transform: none; }
}


.hometext_container {
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  font: 700 6.4vw Arial;
  transform: scaleY(1.8);
  transform-origin: center;
  cursor: default;
  perspective: 100vw;
  white-space: nowrap;
}


.contentcontainer_show #text0 {
  margin-top: 18vh;
  padding: 2vh 0 1vh 0;
  -webkit-animation: anim_text0_movein .4s ease-out;
          animation: anim_text0_movein .4s ease-out;
}
@keyframes anim_text0_movein {
  from { opacity: 0; padding-top: 10vh; transform: scaleX(1.8); }
  to   { opacity: 1; xpadding-top:  2vh; transform: none; }
}


.contentcontainer_show #text1 {
    margin-left: 5vw;
    -webkit-animation: anim_text1_movein 1.2s ease-out; /*cubic-bezier(0, 0, 0, 1);*/
            animation: anim_text1_movein 1.2s ease-out;
}
@keyframes anim_text1_movein {
    0% { line-height: 0em; opacity: 0; }
   60% { line-height: 0.5em; opacity: 0; }
  100% { line-height: 1em; opacity: 1; }
}

.gradient { color: rgb(var(--rgb2)); /*rgb(249,102,8);*/ }
.gradient span {
  color: rgb(255,255,255); 
  background: -webkit-linear-gradient(rgb(255,255,255) 60%, rgba(255,255,255,.1));
  background:         linear-gradient(rgb(255,255,255) 60%, rgba(255,255,255,.1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.topdesignbar {
  xposition: absolute;
  xright: 8px; xleft: 8px;
  xbottom: 0; 
  height: max(50px, 25%);
  xbackground-color: rgba(132,207,252, .5);
  background: -webkit-linear-gradient(rgba(var(--rgb1),.8), rgba(var(--rgb1),.1));
  background:         linear-gradient(rgba(var(--rgb1),.8), rgba(var(--rgb1),.1));
}

.topdesignbarX {
  position: absolute;
  right: .7vh; left: .7vh;
  top: .7vh;
  height: 8vh;
  padding-top: 2vh;
  xfont-style: Arial;
  font-size: 2cqw;
  text-align: center;
  color: white;
  background-color: rgba(255,255,255, .2);
}

.topdesigncursor {
  display: inline-block;
  margin-left: 10px;
  height: .8vw; width: 3vw;
  background-color: white;
  opacity: 0;
  -webkit-animation: anim_topdesigncursor 1s linear 2s infinite;
          animation: anim_topdesigncursor 1s linear 2s infinite;
}
@keyframes anim_topdesigncursor {
    0% { opacity: 0; }
   40% { opacity: 1; }
  100% { opacity: 0; }
}



#divider0 { position: absolute; left: 0; right: 0; top: 99vh; height: 100vh; }

.Xwavyline {
  position: absolute;
  left: 0; right: 0;
  height: 50px;
  background-color: rgb(255,255,255);
}
.Xwavyline:after {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
  -webkit-background-size: auto 10px;
     -moz-background-size: auto 10px;
       -o-background-size: auto 10px;
          background-size: auto 10px;
  background-color: transparent;
  background-repeat: repeat-x;
  background-image: url(border.png);
  background-position: center;
}
#Xwavyline1 { top: 1px; }


/* --------------------------------- media ------------------ */

@media screen and (max-width: 960px) {  /* 768 1024  */
  #divider0 { top: 87vh; xheight: 88vh; }
}