@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");*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}h1,h2,h3,h4,h5,h6{font-family:'Roboto', sans-serif}blockquote,button{font-family:'Roboto', sans-serif}.container{width:100%;height:100vh;background:#1E1E1E;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.container .box{position:relative;width:80%;height:80%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.container .box .transition-effect{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:translateX(-101%);transform:translateX(-101%);-webkit-animation:transition-anim-1 2s cubic-bezier(0.7, 0.08, 0.18, 0.98) forwards;animation:transition-anim-1 2s cubic-bezier(0.7, 0.08, 0.18, 0.98) forwards}.container .box .image-box{position:absolute;top:0;left:0;width:35%;height:100%;overflow:hidden}.container .box .image-box .transition-effect{-webkit-transform:translateX(0);transform:translateX(0);background:#2D2D2D;-webkit-animation:image-transition-anim-1 2s cubic-bezier(0.7, 0.08, 0.18, 0.98) forwards;animation:image-transition-anim-1 2s cubic-bezier(0.7, 0.08, 0.18, 0.98) forwards;z-index:10}.container .box .image-box img{-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-animation:img-transition-anim-1 2s cubic-bezier(0.7, 0.08, 0.18, 0.98) forwards;animation:img-transition-anim-1 2s cubic-bezier(0.7, 0.08, 0.18, 0.98) forwards}.container .box .title-box{position:relative;left:30%;margin:5vmin 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:right}.container .box .title-box h1{position:relative;color:#BABABA;padding:0.2vmin 1.5vmin;font-size:6vmin;overflow:hidden}.container .box .title-box h1 .transition-effect{background:#BABABA;z-index:20}.container .box .title-box h5{position:relative;color:#7C7C7C;padding:0.2vmin 1.5vmin;font-size:2.5vmin;overflow:hidden}.container .box .title-box h5 .transition-effect{background:#7C7C7C;z-index:20}.container .box .quote-box{position:relative;left:40%;max-width:60%;margin:5vmin 0}.container .box .quote-box blockquote{position:relative;color:#aaa;padding:0.2vmin 1.5vmin;font-size:3.5vmin;font-weight:200;font-style:italic;line-height:5vmin;overflow:hidden}.container .box .quote-box blockquote .transition-effect{background:#3b3b3b;z-index:20}.container .box .button-box{position:relative;left:40%;margin:5vmin 0;padding:0.2vmin 1.5vmin}.container .box .button-box button{padding:0.5vmin 1.5vmin;font-size:2.5vmin;background:transparent;color:#BABABA;border:0.2vmin solid #BABABA;border-radius:1vmin;cursor:pointer}.container .box .button-box .random{margin-right:2vmin}@-webkit-keyframes transition-anim-1{0%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(101%);transform:translateX(101%)}}@keyframes transition-anim-1{0%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(101%);transform:translateX(101%)}}@-webkit-keyframes image-transition-anim-1{0%{-webkit-transform:translateX(0);transform:translateX(0)}5%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-101%);transform:translateX(-101%)}}@keyframes image-transition-anim-1{0%{-webkit-transform:translateX(0);transform:translateX(0)}5%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-101%);transform:translateX(-101%)}}@-webkit-keyframes img-transition-anim-1{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes img-transition-anim-1{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}
