.CSSCard{height:100%;transition:.3s ease all;height:300px;width:100%;position:relative;padding:50px 25px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden}.CSSCard:last-child{grid-column:span 2}@media (max-width: 899px){.CSSCard:last-child{grid-column:1}}.CSSCard:hover .CSSCard__content{opacity:1;transform:translateY(0)}.CSSCard:hover .CSSCard__right{opacity:1;transform:translate(0)}.CSSCard:hover .CSSCard__image{transform:translate(-50px,-50px) scale(.85)}.CSSCard__image{display:block;margin:0 auto;outline:none;border:none;box-shadow:none;max-height:200px;max-width:600px;-o-object-fit:contain;object-fit:contain;transition:.3s ease all}.CSSCard__right{display:flex;flex-direction:column;align-items:center;height:100%;position:absolute;right:0;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);padding:18px 8px;transform:translate(90px);transition:.3s ease all;color:#1a1d2e;width:78px;box-sizing:border-box}html.dark .CSSCard__right{background:rgba(20,20,20,.95);color:var(--text-color-dark)}.CSSCard__right svg{font-size:30px;margin-bottom:20px;color:#1a1d2e;opacity:.8}html.dark .CSSCard__right svg{color:var(--text-color-dark)}.CSSCard__right svg:hover{opacity:1}.CSSCard__right a:nth-child(1){transform:translate(50px);transition:ease .5s all}.CSSCard:hover .CSSCard__right a:nth-child(1),.CSSCard:hover .CSSCard__right a:nth-child(2),.CSSCard:hover .CSSCard__right a:nth-child(3){transform:translate(0)}.CSSCard__right a:nth-child(2){transform:translate(50px);transition:ease .7s all}.CSSCard__right a:nth-child(3){transform:translate(50px);transition:ease .9s all}.CSSCard__content{padding:10px 24px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;box-sizing:border-box;position:absolute;bottom:0;left:0;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);width:100%;transform:translateY(90px);transition:ease .3s all;color:#1a1d2e;height:78px}html.dark .CSSCard__content{background:rgba(20,20,20,.95);color:var(--text-color-dark)}.CSSCard__content:hover{cursor:pointer}.CSSCard__title{font-weight:700;font-size:22px;margin-top:0;letter-spacing:1.3px;margin-bottom:0;color:#1a1d2e;transform:translateY(50px);transition:ease .5s all}html.dark .CSSCard__title{color:var(--text-color-dark)}.CSSCard__title__link{box-shadow:none;text-decoration:none;word-break:break-word;color:#1a1d2e}html.dark .CSSCard__title__link{color:var(--text-color-dark)}.CSSCard:hover .CSSCard__content,.CSSCard:hover .CSSCard__title{transform:translateY(0)}@media (max-width: 480px){.CSSCard__image{max-width:100%}}@media (max-width: 400px){.CSSCard__content{height:90px}}.CSSArtHeader__container{background-image:linear-gradient(0deg,#182848,#2980b9);padding:100px 0;position:relative;overflow:hidden}.CSSArtHeader{text-align:center;position:relative;display:grid;grid-template-columns:repeat(3,1fr);justify-content:center;align-items:center;max-width:800px;margin-right:auto;margin-left:auto;color:#fff}@media (max-width: 400px){.CSSArtHeader{grid-template-columns:1fr}}.CSSArtHeader__text{flex:1}.Octocat__container{display:flex;justify-content:center}.Octocat{height:150px;width:100px;background:url(/images/octocat-header.png) left center;animation:upAndDown 5s steps(1) infinite,swim 5s ease infinite;z-index:100}.Octocat--delay-500{animation:upAndDown 5s -1s steps(1) infinite,swim 5s -1s ease infinite}@keyframes swim{0%{transform:translateY(50px)}40%{transform:translateY(-50px)}to{transform:translateY(50px)}}@keyframes upAndDown{0%{background-position:0}1%{background-position:-100px}41%{background-position:0}to{background-position:0}}.bubble{width:30px;height:30px;border-radius:100%;position:absolute;background-color:#fff;bottom:-30px;opacity:.2;animation:bubble 15s ease-in-out infinite,sideWays 4s ease-in-out infinite alternate;z-index:99}@keyframes bubble{0%{transform:translateY(0);opacity:.06}to{transform:translateY(-500px)}}@keyframes sideWays{0%{margin-left:0}to{margin-left:200px}}.bubble--1{left:10%;animation-delay:.5s;animation-duration:16s;opacity:.2}.bubble--2{width:15px;height:15px;left:40%;animation-delay:1s;animation-duration:10s;opacity:.1}.bubble--3{width:10px;height:10px;left:30%;animation-delay:5s;animation-duration:20s;opacity:.3}.bubble--4{width:25px;height:25px;left:40%;animation-delay:8s;animation-duration:17s;opacity:.2}.bubble--5{width:30px;height:30px;left:60%;animation-delay:10s;animation-duration:15s;opacity:.1}.bubble--6{width:10px;height:10px;left:80%;animation-delay:3s;animation-duration:30s;opacity:.4}.bubble--7{width:15px;height:15px;left:70%;animation-delay:-7s;animation-duration:25s;opacity:.3}.bubble--9{width:20px;height:20px;left:50%;bottom:30px;animation-delay:-5s;animation-duration:19s;opacity:.2}.bubble--10{width:40px;height:40px;left:30%;bottom:30px;animation-delay:-21s;animation-duration:16s;opacity:.3}.CSSArtContainer{display:grid;grid-template-columns:repeat(2,1fr)}@media (max-width: 899px){.CSSArtContainer{grid-template-columns:1fr}}