/*!
Theme Name: Chad Barbee Custom Frontend Animations
Theme URI: http://www.chadbarbee.com/portfolio/
Author: Chad Barbee
Author URI: http://www.chadbarbee.com
Description: A Custom Theme built for my portfolio website.
Version: 1
*/@import"https://fonts.googleapis.com/css2?family=Audiowide&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";@import"https://fonts.googleapis.com/css2?family=Audiowide&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";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;font-size:1em;background-color:#000;overflow:hidden;font-family:"Audiowide",serif}p{font-family:"Roboto",serif;margin-bottom:10px}p a{color:#fff;position:relative;text-decoration:none;font-size:18px;display:inline-block}p a:hover{color:#fff}p .home-link::before{content:"";position:absolute;display:block;width:100%;height:2px;bottom:0;left:0;background-color:#fff;transform:scaleX(0);transition:transform .3s ease}p .home-link:hover::before{transform:scaleX(1)}#hero-container{display:flex;justify-content:center;align-items:center;overflow:hidden;height:100vh;width:100vw}.container{margin-bottom:100px;margin-top:239px;margin-right:-200px;margin-left:100px;height:100vh;position:relative;display:inline-block;transform:rotate(52deg) scale(0.8)}.stars{background:url(images/stars.png) repeat;background-color:#000;position:absolute;top:0;bottom:0;left:0;right:0;display:block;z-index:-110}.twinkling{width:10000px;height:100%;background:rgba(0,0,0,0) url("images/twinkling.png") repeat;background-size:1000px 1000px;position:absolute;right:0;top:0;bottom:0;z-index:-100;animation:move-background 20s linear infinite}h1,h2,h3,h4,h5,h6{color:plaette("white")}h1{font-size:2em;margin-bottom:10px}h2{font-size:1.2em;font-weight:300;font-style:normal}.flame-container{margin:10px auto;width:40px;height:40px;bottom:440px;position:relative;transform-origin:center bottom;animation-name:flicker;animation-duration:3ms;animation-delay:200ms;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-direction:alternate}.flame{bottom:0;position:absolute;border-bottom-right-radius:50%;border-bottom-left-radius:50%;border-top-left-radius:50%;transform:rotate(-225deg) scale(1.35, 1.35)}.yellow{left:15px;width:30px;height:30px;background:gold;box-shadow:0px 0px 9px 4px gold}.orange{left:10px;width:40px;height:40px;background:orange;box-shadow:0px 0px 9px 4px orange}.red{left:5px;width:50px;height:50px;background:#ff4500;box-shadow:0px 0px 5px 4px #ff4500}.white{left:15px;bottom:-4px;width:30px;height:30px;background:#fff;box-shadow:0px 0px 9px 4px #fff}.circle{border-radius:50%;position:absolute}.black{width:25px;height:10px;overflow:hidden;left:15px;top:-15px;opacity:.34;background:#000;box-shadow:0px 0px 22px 20px #000}.page-intro{--border-radius: 16px;--border-width: 2px;padding:var(--border-width);border-radius:var(--border-radius);position:relative;overflow:hidden;will-change:transform;background-color:hsla(0,0%,100%,.1);display:inline-flex;color:#fff;text-decoration:none}.page-intro span{padding:12px 32px;background-color:#000;border-radius:calc(var(--border-radius) - var(--border-width))}.page-intro:before,.page-intro:after{content:"";position:absolute;z-index:-1;width:115%;aspect-ratio:1;animation:rotate-border 4s linear infinite;inset:50% auto auto 50%}.page-intro:before{background:linear-gradient(to top, transparent 50%, #ff4500);clip-path:polygon(0 0, 50% 0, 50% 50%, 0 50%)}.page-intro:after{clip-path:polygon(100% 100%, 50% 100%, 50% 50%, 100% 50%);background:linear-gradient(to bottom, transparent 50%, #ff4500)}@keyframes move-background{from{-webkit-transform:translate3d(0px, 0px, 0px)}to{-webkit-transform:translate3d(1000px, 0px, 0px)}}@keyframes flicker{0%{transform:rotate(-1deg)}20%{transform:rotate(1deg)}40%{transform:rotate(-1deg)}60%{transform:rotate(1deg) scaleY(1.04)}80%{transform:rotate(-2deg) scaleY(0.92)}100%{transform:rotate(1deg)}}@keyframes rotate{100%{transform:rotate(1turn)}}@keyframes rotate-border{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@media(max-width: 640px){body{overflow-x:hidden;overflow-y:auto;height:100%}#hero-container{flex-direction:column-reverse;overflow:visible;height:85vh}.page-intro-wrapper{width:94%;height:auto;margin-top:-86%}.page-intro{overflow:hidden}.container{position:relative;display:inline-block;transform:rotate(36deg) scale(0.6) translateX(-36%) translateY(6%);margin-top:-225px}.stars{overflow:hidden;max-height:100vh}.twinkling{overflow:hidden;max-height:100vh}}
