* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  /* --dark: #333;
  --bright: #bdc8d8; */
  --time_load_background: 6s;
  --time_load_pose: 6s;
  }

html {
  -webkit-tap-highlight-color: hsla(0,0,0,0);
  /* tap-highlight-color: hsla(0,0,0,0); */
}


html,
body {
    margin: 0 auto;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    font-family: monospace;
    justify-content: center;
    /* background-color: #1d212b; */
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1b2845;
    background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
    background-color: #363636;
    background-image:         linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)), 
                              linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
    background-position:0 0, 2px 2px;
    background-size:4px 4px;
}

#inner_container {
    font-family: Helvetica;
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 100%;
    text-align: center;
    /* color: #252B37; */
    /* background-color: #151823; */
    animation: textColor 10s ease infinite;
    
  }
#inner_container:after {
    position: absolute;
    content: "";
    /* top: 5vw; */
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    margin: 10 auto;
    /* transform: scale(0.175); */
    -webkit-filter: blur(5vw);
    -moz-filter: blur(5vw);
    -ms-filter: blur(5vw);
    filter: blur(5vw);
    background: linear-gradient(270deg, #0fffc1, #7e0fff);
    background-size: 250% 250%;
    animation: animateGlow 10s ease infinite;
    
  }
  @keyframes animateGlow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @keyframes textColor {
    0% {
      color: #7e0fff;
    }
    50% {
      color: #0fffc1;
    }
    100% {
      color: #7e0fff;
    }
  }
 
  


#image_shower1{

    position: relative;
    /* display: grid; */
    /* grid-template-columns: 1fr;
    grid-template-rows: 1fr; */
    /* height: 70vh;
    width: 70vw; */
    transition: var(--time_load_pose);
    animation-name: beginPage;
    animation-duration: var(--time_load_pose);
    -webkit-animation: beginPage var(--time_load_pose); /* Safari 4+ */
    -moz-animation:    beginPage var(--time_load_pose); /* Fx 5+ */
    -o-animation:      beginPage var(--time_load_pose); /* Opera 12+ */
    animation:         beginPage var(--time_load_pose); /* IE 10+, Fx 29+ */

}


@-webkit-keyframes beginPage {
  0%   {  -webkit-filter: opacity(50%);
          -webkit-filter: blur(10px);
      }
  100% {  -webkit-filter: opacity(0%);
          -webkit-filter: blur(0px);
  }
  }
  @-moz-keyframes beginPage {
      0%   {  -webkit-filter: opacity(50%);
          -webkit-filter: blur(10px);
      }
  100% {  -webkit-filter: opacity(0%);
          -webkit-filter: blur(0px);
  }
  }
  @-o-keyframes beginPage {
      0%   {  -webkit-filter: opacity(50%);
          -webkit-filter: blur(10px);
      }
  100% {  -webkit-filter: opacity(0%);
          -webkit-filter: blur(0px);
  }
  }
  @keyframes beginPage {
      0%   {  -webkit-filter: opacity(50%);
          -webkit-filter: blur(10px);
      }
  100% {  -webkit-filter: opacity(0%);
          -webkit-filter: blur(0px);
  }
  }
   
/*
.btn{
  height: 200vmin;
  position: relative;
  border: 3px solid green;
}

/* button {
  margin-top: sc5vmin;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
	width: 15vmin;
	height: 5vmin;
	cursor: pointer;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #7f5a83;
	background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
	background-size: 200% 100%;
	background-position: left;
	background-repeat: no-repeat;
	transition: 500ms;
}

button:before {
	content: 'START';
	color: rgba(255,255,255,0.5);
	font-size: 16px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 40px;
	background-color: #1b2845;
} */

/* button, button::after {
  width: 38vmin;
  height: 8.6vmin;
  font-size: 3.6vmin;
  font-family: 'Bebas Neue', cursive;
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  letter-spacing: 3vmin;
  line-height: 8.8vmin;
  box-shadow: 6px 0px 0px #00E6F6;
  outline: transparent;
  position: relative;
  left: 50%;
  /* -ms-transform: translateY(-50%);
  transform: translateY(-50%); */
/*  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

button::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  
  content: 'AVAILABLE NOW';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}

button:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

button {
    left: 50%;
    margin: -40px;
    position: absolute;
    top: 50%;
}
button:hover,
button:active {
    outline: 0;
}

/* 3D Button */
button {
    left: 50%;
    margin: -40px;
    position: relative;;
    top: 50%;
}

button:hover,
button:active {
    outline: 0;
}

/* 3D Button */

button.depth {
    background: #444;
    border: none;
    border-radius: 80px;
    box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
                inset 0 0 2px 4px hsla(0,0%,0%,.2),
                inset 0 0 2px 6px hsla(0,0%,0%,.2),
                inset 0 0 1px 8px hsla(0,0%,0%,.5),
                inset 0 -4px 2px 4px hsla(0,0%,0%,.5),
                inset 0 1px 1px 8px hsla(0,0%,100%,.25),
                inset 0 -30px 30px hsla(0,0%,0%,.2),
                0 -4px 8px 4px hsla(0,0%,0%,.5),
                0 10px 10px hsla(0,0%,0%,.25),
                0 0 2px 2px hsla(0,0%,0%,.2),
                0 0 2px 4px hsla(0,0%,0%,.2),
                0 0 2px 6px hsla(0,0%,0%,.2),
                0 0 2px 8px hsla(0,0%,0%,.5),
                0 1px 2px 8px hsla(0,0%,100%,.25),
                0 -1px 2px 8px hsla(0,0%,0%,.5);
    color: #303030;
    cursor: pointer;
    font: bold 40px/85px sans-serif;
    height: 80px;
    padding: 0;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25),
                 0 -1px 1px hsla(0,0%,0%,.75);
    width: 80px;
}
button.depth:hover,
button.depth:focus {
    color: #0ab;
    text-shadow: 0 0 20px hsla(240,75%,75%,.5),
                 0 1px 1px hsla(0,0%,100%,.25),
                 0 -1px 1px hsla(0,0%,0%,.75);
}
button.depth:active {
    box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
                inset 0 0 2px 4px hsla(0,0%,0%,.2),
                inset 0 0 2px 6px hsla(0,0%,0%,.2),
                inset 0 0 1px 7px hsla(0,0%,0%,.5),
                inset 0 5px 15px 7px hsla(0,0%,0%,.15),
                inset 0 -4px 2px 3px hsla(0,0%,0%,.5),
                inset 0 1px 1px 7px hsla(0,0%,100%,.25),
                inset 0 -30px 30px hsla(0,0%,0%,.1),
                inset 0 30px 30px hsla(0,0%,0%,.2),
                0 -4px 8px 4px hsla(0,0%,0%,.5),
                0 5px 10px hsla(0,0%,0%,.25),
                0 0 2px 2px hsla(0,0%,0%,.2),
                0 0 2px 4px hsla(0,0%,0%,.2),
                0 0 2px 6px hsla(0,0%,0%,.2),
                0 0 2px 8px hsla(0,0%,0%,.5),
                0 1px 2px 8px hsla(0,0%,100%,.25),
                0 -1px 2px 8px hsla(0,0%,0%,.5);
    line-height: 86px;
}