@charset "UTF-8";
/* CSS Document */


/* body and defaults */
body {
   background-color: #222;
   font-family: Roboto, sans-serif;
   margin: 0;
   color:  #000; /* text */
   display: flex;
   flex-flow: column;
   }


section {
   display: flex;
   flex-flow: column;
   height: 100vh;
   background-color: #fff;
   }

header {
   background-color: #222;
   height: auto;
   line-height: 40px;
   padding-bottom: 5px;
   padding-left: 35px;
   font-size: calc(48px - 2vw);
   box-shadow: 0px 3px 2px #333; /* horizontal shift, vertical shift, blur, color*/
   -webkit-box-shadow: 0px 3px 2px #333;
   /* position: fixed; */
   }
a.header {
   font-weight: 300;
   color: #999;
   text-decoration: none; /* underline; */
   }
a.header:hover {
   color: #fff;
   }

div#middle {
   flex: 2;
   overflow: auto;
   background:  #fff;
   font-weight: 100;
   padding-left: 13%;
   padding-right: 13%;
   padding-top: calc(150px - 6vw);
   background-image: linear-gradient(to bottom, transparent, #eee);
}


@keyframes img {
   0%   {opacity: 0%}
   100% {opacity: 100%;}
}
img {
   display: flex;
   margin:auto;

   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;

   animation-name: img;
   animation-duration: 1s;

   object-fit: scale-down;
   width: 420px;
   max-width: 75%;
   padding-left: auto;
}


@keyframes fade-in {
   0%   {opacity: 0%}
   50%  {opacity: 0%}
   100% {opacity: 100%;}
}
p#title {
   /* letter-spacing: 33px; */
   font-size: calc(54px + 0.7vw);
   letter-spacing: calc(20px + 0.8vw);
   font-weight: 300;
   text-align:  center;
   margin-top: calc(70px - 2vw);
   margin-bottom: calc(70px - 2vw);
   animation-name: fade-in;
   animation-duration: 2s;
}

span.half-space {
   letter-spacing: calc(-10px + 1vw);
}

span.dx {
   animation-duration: 2s;
   color:  #6B747B;
}

@keyframes main-text {
   0%   {opacity: 0%;}
   75%  {opacity: 0%;}
   100% {opacity: 100%;}
}
p#description {
   color: #6B747B;
   margin-top: 0px;
   animation-name: main-text;
   animation-duration: 3s;
   font-size: calc(60px - 1.2vw);
   line-height: 140%;
   text-align: center;
   }

footer {
   background: #222;
   font-weight: 300;
   color: #666;
   padding-top: 5px;
   padding-bottom: 5px;
   width: 100%;
   font-size: calc(48px - 2vw);
   line-height: 40px;
   text-align: center;
   box-shadow: 0px 3px 2px #333; /* horizontal shift, vertical shift, blur, color*/
   -webkit-box-shadow: 0px 3px 2px #666;
}