styles.min.css

:root{--color-gray-300:#ebebec;--color-gray-400:#c8c8cc;--color-gray-500:#929399;--color-gray-600:#474747;--color-gray-700:#353536;--color-yellow-400:#ffff00;--color-yellow-600:#858520;--transition:all 0.4s ease-in-out;--sm-md-size-picture:300px;--lg-xl-size-picture:400px}*,*::before,*::after{box-sizing:border-box;scroll-behavior:smooth}::selection{color:var(--color-gray-700);background:var(--color-yellow-400)}html,body{height:100%}html,body,div,span,h1,p,a,img,figure,figcaption,footer,header,section{margin:0;padding:0;border:0;vertical-align:baseline}body{background-color:var(--color-gray-700);background-repeat:repeat;background-blend-mode:multiply;font-family:'Oxygen',sans-serif;font-display:swap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:default}@supports not (-webkit-touch-callout:none){body{background-image:url(images/rockywall.jpg)}}.container{display:flex;flex-direction:column;height:inherit;padding:24px}.content-container{display:flex;align-items:center;justify-content:center;gap:30px;height:inherit}.content-container .picture-container{position:relative;border-radius:9999px;transition:var(--transition);-o-transition:var(--transition);-moz-transition:var(--transition);-webkit-transition:var(--transition)}.content-container .picture-container:is(:hover,:focus,:active) .picture:before{opacity:.5}.content-container .picture-container:hover .picture:after{opacity:1}.content-container .picture-container:hover .picture{mix-blend-mode:normal}.content-container .picture-container .circle{position:absolute;background-color:var(--color-yellow-400);mix-blend-mode:difference;border-radius:9999px}.content-container .picture-container .picture{position:relative;border-radius:9999px}.content-container .picture-container .picture:before{content:'';position:absolute;width:100%;height:100%;mix-blend-mode:luminosity;background-size:cover;border-radius:9999px;transition:0.8s linear}.content-container .picture-container .picture:after{content:'';position:absolute;width:100%;height:100%;mix-blend-mode:unset;background-size:cover;border-radius:9999px;transition:0.6s linear;opacity:0}.content-container .bio-container{display:flex;flex-direction:column;gap:10px;transition:var(--transition);-o-transition:var(--transition);-moz-transition:var(--transition);-webkit-transition:var(--transition);letter-spacing:.5px;animation-fill-mode:both;animation-duration:600ms;animation-delay:200ms}.content-container .bio-container h1{color:var(--color-gray-300);line-height:1;margin-left:-5px;transition:var(--transition);-o-transition:var(--transition);-moz-transition:var(--transition);-webkit-transition:var(--transition);animation-fill-mode:both;animation-duration:600ms;animation-delay:400ms}.content-container .bio-container p{font-family:'Roboto Slab',serif;color:var(--color-gray-400);font-weight:400;line-height:2;transition:var(--transition);-o-transition:var(--transition);-moz-transition:var(--transition);-webkit-transition:var(--transition);animation-fill-mode:both;animation-duration:600ms;animation-delay:500ms}.content-container .bio-container span{font-family:'Roboto Slab',serif;color:var(--color-yellow-600);border-radius:3px;transition:var(--transition);animation-fill-mode:both;animation-duration:600ms;animation-delay:600ms}.content-container .bio-container span:hover{color:var(--color-yellow-400)}footer{display:flex;align-items:center;justify-content:center;gap:48px;width:100%;padding:24px}footer a{opacity:.5;transition:var(--transition)}footer a img{animation-name:fadeInSocial;animation-fill-mode:both;animation-duration:600ms;animation-delay:800ms}footer a img{width:32px;height:32px}footer a:hover{opacity:1;transform:translateY(-3px)}@media screen and (min-width:320px){.content-container{flex-direction:column;margin-bottom:32px}.content-container .bio-container{text-align:center;animation-name:slideIn-sm-md}.content-container .bio-container h1{animation-name:slideIn-sm-md;margin-left:0;font-size:3rem}.content-container .bio-container p{animation-name:slideIn-sm-md;font-size:1.5rem}.content-container .bio-container span{animation-name:slideIn-sm-md;font-size:1rem}.content-container .picture-container{min-width:var(--sm-md-size-picture);min-height:var(--sm-md-size-picture)}.content-container .picture-container .circle{width:var(--sm-md-size-picture);height:var(--sm-md-size-picture);animation-name:fadeIn;animation-fill-mode:both;animation-duration:400ms;animation-delay:200ms;will-change:opacity}.content-container .picture-container .picture{width:var(--sm-md-size-picture);height:var(--sm-md-size-picture)}.content-container .picture-container .picture:before{background:url(images/brunocarvalho-color-300.png);background-repeat:no-repeat;animation-name:fadeIn;animation-fill-mode:both;animation-duration:600ms;animation-delay:300ms;will-change:opacity}.content-container .picture-container .picture:after{background:url(images/brunocarvalho-color-300.png);background-repeat:no-repeat}footer a img{width:24px;height:24px}}@media screen and (min-width:768px){.content-container{flex-direction:column}.content-container .bio-container{text-align:center}.content-container .bio-container h1{font-size:4rem}.content-container .bio-container p{font-size:2rem}.content-container .bio-container span{font-size:1.5rem}footer a img{width:32px;height:32px}}@media screen and (min-width:1024px){.content-container{flex-direction:initial}.content-container .picture-container{min-width:var(--lg-xl-size-picture);min-height:var(--lg-xl-size-picture)}.content-container .picture-container .circle{width:var(--lg-xl-size-picture);height:var(--lg-xl-size-picture);animation-name:slideIn-lg-xl-right;animation-fill-mode:both;animation-duration:300ms;animation-delay:200ms;will-change:opacity}.content-container .picture-container .picture{width:var(--lg-xl-size-picture);height:var(--lg-xl-size-picture)}.content-container .picture-container .picture:before{background:url(images/brunocarvalho-color-400.png);background-repeat:no-repeat;animation-name:slideIn-lg-xl-right;animation-fill-mode:both;animation-duration:300ms;animation-delay:200ms;will-change:opacity}.content-container .picture-container .picture:after{background:url(images/brunocarvalho-color-400.png);background-repeat:no-repeat}.content-container .bio-container{text-align:initial;animation-name:slideIn-lg-xl-left}.content-container .bio-container h1{font-size:6rem;animation-name:slideIn-lg-xl-left}.content-container .bio-container p{font-size:2rem;animation-name:slideIn-lg-xl-left}.content-container .bio-container span{font-size:1.5rem;animation-name:slideIn-lg-xl-left}}@keyframes slideIn-lg-xl-left{from{transform:translateX(50px);opacity:0}to{transform:none;opacity:1}}@keyframes slideIn-lg-xl-right{from{transform:translateX(-50px);opacity:0}to{transform:none;opacity:1}}@keyframes slideIn-sm-md{0%{transform:translateY(50px);opacity:0}100%{transform:none;opacity:1}}@keyframes fadeIn{0%{visibility:hidden;opacity:0}100%{visibility:visible;opacity:1}}@keyframes fadeInSocial{0%{opacity:0;visibility:hidden;transform:translateY(6px)}100%{opacity:1;visibility:visible;transform:none}}