@keyframes enlarge{to{transform:scale(1.5)}}@keyframes glide{from{background:linear-gradient(45deg, #000, red, #e04444)}}@keyframes expand{to{transform:scale(1.15)}}@keyframes slideIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes slideOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}*{outline:none;box-sizing:border-box;margin:0;padding:0;color:#f5f5f5}html{background:url(../img/bg.png) center center}@media only screen and (min-width: 768px){html{background:#131010}}@media only screen and (min-width: 2200px) and (min-height: 1200px){html{font-size:150%}}@media only screen and (min-height: 2000px){html{font-size:250%}}#overlay{background-color:rgba(0,0,0,0.5)}ul,li{list-style-type:none}a{font-weight:900;text-decoration:none}@font-face{font-family:'Icomoon';src:url("../fonts/icomoon.woff") format("woff");font-weight:normal;font-style:normal;font-display:block}[class^='icon-'],[class*=' icon-']{font-family:'Icomoon';font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1}@font-face{font-family:'Chakra Petch Bold';src:url("../fonts/ChakraPetch-Bold.woff");font-display:swap}html{font-family:'Chakra Petch Bold'}h1{font-size:2rem}@media only screen and (min-width: 600px){h1{font-size:2.5rem}}.underline{border-bottom:0.125rem solid red;display:inline-block;padding-bottom:0.1rem}@media only screen and (min-width: 600px){.menu-link{font-size:1.1rem}}#background{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;min-height:100vh;text-align:center}#card{border:0.125rem solid red;box-shadow:1px 1px 10px #f5f5f5;animation:slideIn 1000ms ease-in;display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:center;width:17rem;height:30rem;padding:1rem;background:#131010;background:rgba(0,0,0,0.8)}@media only screen and (min-width: 600px){#card{align-items:initial;width:35rem;height:17.5rem;padding:1.5rem}}#menu{display:flex;flex-flow:column nowrap}@media only screen and (min-width: 600px){#menu{flex-direction:row;justify-content:space-between}}@media only screen and (min-width: 1024px){#menu:hover .menu-item:not(:hover){opacity:0.5;filter:blur(0.1rem)}}.icon-github1:before{content:'\e902'}.icon-linkedin:before{content:'\e901'}.icon-soundcloud1:before{content:'\e900'}.icon-github1,.icon-linkedin,.icon-soundcloud1{display:inline-block;margin-bottom:1rem;font-size:2.3rem}@media only screen and (min-width: 600px){.icon-github1,.icon-linkedin,.icon-soundcloud1{margin-bottom:0.5rem;font-size:2.6rem}}.icon-cone:before{content:'\e903'}.icon-headphones:before{content:'\e909'}.icon-code:before{content:'\e908'}.icon-code,.icon-cone,.icon-headphones{font-size:1.7rem}@media only screen and (min-width: 600px){.icon-code,.icon-cone,.icon-headphones{font-size:2.1rem}}.container{border:0.0625rem solid #3b4729;border-radius:0 0.5rem 0;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;background:linear-gradient(45deg, #e04444, red, #000)}.container:hover{background:linear-gradient(45deg, #000, red, #e04444);color:#f0d800}.container:hover .icon{color:#f0d800}.menu-item:not(:last-child) .container{margin-bottom:1rem}@media only screen and (min-width: 600px){.menu-item:not(:last-child) .container{margin-bottom:0}}.menu-item:nth-of-type(1) .container,.menu-item:nth-of-type(2) .container,.menu-item:nth-of-type(3) .container{width:8rem;height:4rem}@media only screen and (min-width: 600px){.menu-item:nth-of-type(1) .container,.menu-item:nth-of-type(2) .container,.menu-item:nth-of-type(3) .container{width:9.6rem;height:5.5rem}}.menu-item:nth-of-type(1) .container{animation:glide ease infinite 2.5s}.menu-item:nth-of-type(2) .container{animation:glide ease infinite 2.6s}.menu-item:nth-of-type(3) .container{animation:glide ease infinite 2.7s}.icon:hover{color:#f0d800}.icon-github1:hover,.icon-linkedin:hover,.icon-soundcloud1:hover{animation:enlarge 0.3s forwards linear}.menu-link:focus>.icon-github1,.menu-link:focus>.icon-linkedin,.menu-link:focus>.icon-soundcloud1{color:#f0d800;animation:enlarge 0.3s forwards linear}.menu-item .container:hover{animation:expand 0.3s forwards linear}.menu-link:focus>.container{color:#f0d800;animation:expand 0.3s forwards linear}.container:focus .icon{color:#f0d800}