@import"https://fonts.googleapis.com/css2?family=DynaPuff&display=swap";@import"https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@1,700&display=swap";*{scroll-behavior:smooth}body{height:100vh}canvas{height:100vh;position:fixed;top:0;left:0}:root{--dark-bg: rgba(15, 15, 15, .95);--spacing: 280px;font-family:brandon-grotesque,sans-serif;font-weight:400;font-style:normal}main{color:#fff;z-index:99;position:absolute;margin:0 auto;padding:45px 0;display:grid;grid-template-columns:repeat(12,1fr)}h1,h2,h3,blockquote{font-weight:700;font-style:normal}h1{margin-bottom:0;font-family:Lobster Two,cursive;font-size:2.22em;background:-webkit-linear-gradient(to right,#ff0000,#efdf09);background:linear-gradient(to right,#ff0000,#efdf09);-webkit-background-clip:text;background-clip:text;color:transparent}header{background:var(--dark-bg);grid-column:2 / span 5;font-size:2.5rem;padding:2rem;margin-bottom:var(--spacing);display:flex;flex-direction:column}header p{margin:15px 0 0}.link{position:relative;display:flex;align-items:center;padding:0;margin-top:15px}.link li{list-style:none;margin-right:8px}.link li a{text-decoration:none;font-size:.8em;background-repeat:no-repeat;background-position:center center;display:block}.link li a span{border-radius:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:-1;width:50px;height:50px;transition:all .15s cubic-bezier(.11,.65,1,1.69);background-color:#d3d3d2}.link li a:hover span{transform:scale(1.2)}.fa-twitter{color:#00a2ff}.fa-github{color:#000}.fa-linkedin{color:#006eff}.subtitle{font-size:.7em}p{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif}section{grid-column:2 / 8;padding:1rem;background:var(--dark-bg);font-size:1.25rem;line-height:1.5;margin-bottom:var(--spacing)}blockquote{margin:0;padding:0;grid-column:2 / span 9;margin-bottom:var(--spacing);font-family:DynaPuff,cursive}blockquote p{color:#000;background-color:#ffffff8e;font-size:4rem;display:inline}.left{grid-column:6 / 12}.thumbnail{width:100%;border:2px solid grey;box-shadow:5px 5px 5px #333;border-radius:5px}.example{cursor:pointer;position:relative;overflow:hidden;text-align:center;width:100%}.example .fadedbox{background-color:#8e8e8e80;position:absolute;top:0;left:0;color:#fff;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;opacity:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.example:hover .fadedbox{opacity:.8}.example .text{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;transform:translateY(30px);-webkit-transform:translateY(30px)}.example .title{font-size:2.5em;opacity:0;transition-delay:.2s;transition-duration:.3s;display:flex;justify-content:center;align-items:center}.example:hover .title,.example:focus .title{opacity:1;transform:translateY(0);-webkit-transform:translateY(0px)}.title a{border-radius:100%;display:block;position:relative;z-index:-1;width:70px;height:70px;transition:all .15s cubic-bezier(.11,.65,1,1.69)}.title a{background-color:#e1e0dc}.title:hover a{transform:scale(1.3)}.title a{text-decoration:none;color:#000}.grid{display:grid;grid-template-columns:1fr 1fr}.tag a{text-decoration:none;color:#fff}.tag a:hover{text-decoration:underline}