html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes unrotate{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes fadeOutPortrait{0%{width:100%;height:70%}99%{width:3.5%;height:0%;margin-top:-3%;margin-left:82%}to{display:none;opacity:0}}@keyframes fadeOutLandscape{0%{width:var(--width-menu-landscape);height:80%;opacity:1}30%{width:var(--width-menu-landscape);opacity:.5}70%{width:var(--width-menu-landscape);opacity:1;height:2%}80%{height:1%}to{width:0%;height:0%;display:none}}@keyframes fadeInLandscape{0%{width:0%;height:0%;opacity:.2}30%{width:var(--width-menu-landscape);opacity:.3;height:1%}70%{opacity:1;height:0%}80%{height:10%}to{height:80%}}@keyframes fadeInPortrait{0%{width:5%;height:0%;margin-top:-3%;margin-left:82%;opacity:0}50%{height:5%}to{width:100%;height:70%}}@keyframes opacityIn{0%{opacity:0}70%{opacity:0}80%{opacity:.5}to{opacity:1}}@keyframes opacityOut{0%{opacity:1}5%{opacity:.5}10%{opacity:0}to{opacity:0}}@keyframes showDiv{0%{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0px;height:0px}20%{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0px;height:0px}50%{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%}75%{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:0%}to{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:75%;height:70%}}@keyframes nul{0%{width:var(--width-menu-landscape);height:80%;opacity:1}30%{width:var(--width-menu-landscape);opacity:.5}70%{width:var(--width-menu-landscape);opacity:1;height:2%}80%{height:1%}to{width:0%;height:0%;display:none}}body{width:95vw;height:100vh;background:var(--main-background);background-size:cover!important;color:var(--main-text-color);font-family:Audiowide,sans-serif;padding-left:2.5vw;padding-right:2.5vw}#root{width:100%;height:100%}header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;height:10%;width:100%;top:0;left:0}header button.lg-btn{aspect-ratio:1}main{width:100%;height:90%;display:flex;flex-direction:row;justify-content:space-between}.container{animation:drift 60s ease-in-out infinite alternate}.lg-btn{border-radius:10.2vmin 9.8vmin;background:#ffffff0d;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:inset 2px 2px 1px #ffffff4d,inset -2px -2px 2px 1px #ffffff4d,0 4px 8px #0003,0 6px 20px #0003;color:#fffc;transition:all .3s cubic-bezier(.2,.9,.3,1.5);cursor:pointer}.gl{-webkit-backdrop-filter:url(#filter);backdrop-filter:url(#filter)}.lg-btn:hover{transform:scale(1.05);border-radius:9.8vmin 10.2vmin}.lg-btn:select{transform:scale(.95)}.container.lg-btn:hover{transform:scale(1);border-radius:2em}.container.lg-btn:select{transform:scale(1)}button{border:none}button:focus{outline:none}:root{--main-background: linear-gradient(rgb(0, 0, 0), rgb(21, 23, 116));--main-text-color: white;--width-menu-landscape: 20%;--width-menu-portrait: 100%}@media screen and (orientation:portrait){body{background:url(/assets/backgroundPortrait.gif);background-size:cover}header h1{font-size:4.5vw;text-align:start;width:33%}header h1 a{text-decoration:none;color:inherit}header h2{width:33%;font-size:3vw;text-align:start}header .lg-btn{text-align:center;width:12%;font-size:1em;margin-right:5%;animation-name:unrotate;animation-duration:.75s;display:flex;justify-content:center;align-items:center}header .lg-btn.gl.displayed{animation-name:rotate;animation-duration:.75s}nav{animation:fadeOutPortrait .75s;animation-fill-mode:forwards}nav a{animation:opacityOut .3s}nav.displayed{animation:fadeInPortrait .5s;display:flex;width:var(--width-menu-portrait);height:70%}nav.displayed a{animation:opacityIn .5s}nav.displayed .container{width:100%;height:100%;border-radius:2em;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:10%;gap:5%}nav.displayed .container a{text-decoration:none;width:80%;height:12%}nav.displayed .container a li{width:100%;height:100%;display:flex;align-items:center;justify-content:center}#intro.container.displayed,#contact.container.displayed,#java.container.displayed,#web.container.displayed,#clojure.container.displayed{display:none}#intro .introduction{display:flex;flex-direction:column;width:100%;height:100%}#intro .introduction h3{animation:opacityIn 1.5s;width:100%;height:10%;font-size:2em;text-align:center;margin-bottom:15%}#intro .introduction p{animation:opacityIn 1.5s;width:100%;height:70%;padding-bottom:5%;text-align:start;display:flex;flex-direction:column}#intro .introduction p span{width:100%;text-align:center}#intro .introduction div{height:20%;text-align:center}#intro .introduction div img{height:100%;aspect-ratio:1;border-radius:50%}.slide.lg-btn{width:75%;height:70%;border-radius:2em;margin:0 auto;padding:10%;overflow:scroll;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:wrap;animation:showDiv 1s}#web,#java,#clojure{display:flex;flex-direction:row;justify-content:space-evenly;flex-wrap:wrap}:is(#web,#java,#clojure) div{width:100%;height:90%;display:flex;flex-direction:row;justify-content:space-evenly;flex-wrap:wrap;gap:10px;overflow:scroll}:is(#web,#java,#clojure) div .card{width:92%;padding:2%;height:60%;border-radius:1em;margin:2%;text-decoration:none;display:flex;flex-direction:column;justify-content:space-evenly}:is(#web,#java,#clojure) div .card img{width:60%;aspect-ratio:1;border-radius:100vw;object-fit:cover;margin:auto}:is(#web,#java,#clojure) div .card h3{margin-top:5%;margin-bottom:5%;height:20%;text-align:center;font-size:4vw}:is(#web,#java,#clojure) div .card h4{height:20%;width:100%;font-size:3vw;text-align:center}:is(#web,#java,#clojure) h2{margin-top:1%;margin-bottom:4%;width:100%;height:5%;font-size:6vw;text-align:center}#contact h2{font-size:6vw;margin-bottom:5vh}#contact div{height:75%;width:100%}#contact div p{width:100%;text-align:center;font-size:4vw;padding-top:25%}#contact div .contactLink{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:start;gap:10px}#contact div .contactLink a{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none;margin-left:auto;margin-right:auto}#contact div .contactLink a button{width:100%;height:5vh;display:flex;flex-direction:row;justify-content:start;align-items:center;font-size:4vw;gap:2vw}#contact div .contactLink a button img{margin-left:15%;height:90%}}@media screen and (orientation:landscape){body{background:url(/assets/background.gif);text-shadow:1px 1px 2px black}header h1{font-size:2.5vw;text-align:start;width:33%}header h1 a{text-decoration:none;color:inherit}header h2{width:33%;font-size:2vw;text-align:start}header .lg-btn{width:3.5%;font-size:100%;margin-right:10%;animation-name:unrotate;animation-duration:.75s;display:flex;justify-content:center;align-items:center}header .lg-btn.gl.displayed{animation-name:rotate;animation-duration:.5s}nav{animation:fadeOutLandscape .75s;animation-fill-mode:forwards}nav a{animation:opacityOut .75s}nav.displayed{animation:fadeInLandscape .75s;display:flex;width:var(--width-menu-landscape);height:80%}nav.displayed a{animation:opacityIn .75s}nav.displayed .container{cursor:default;width:100%;height:100%;border-radius:2em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7%}nav.displayed .container a{text-decoration:none;width:80%;height:12%}nav.displayed .container a li{width:100%;height:100%;display:flex;align-items:center;justify-content:center}nav.displayed .container a li h2{font-size:1.2vw}main{justify-content:center;align-items:center}#intro .introduction{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly}#intro .introduction h3{width:100%;height:10%;font-size:4vw;text-align:center;margin-bottom:5%}#intro .introduction p{width:45%;height:90%;padding-bottom:5%;text-align:start;display:flex;flex-direction:column;font-size:1.5vw;letter-spacing:1px}#intro .introduction p span{width:100%;text-align:center}#intro .introduction div{width:40%;height:90%;padding-bottom:5%;position:relative}#intro .introduction div img{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);height:50%;aspect-ratio:1;border-radius:50%}.slide.container.lg-btn{cursor:default;width:75%;height:80%;border-radius:2em;margin:auto;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:wrap;animation:showDiv 1s}#web,#java,#clojure,#contact{display:flex;flex-direction:row;justify-content:space-evenly;flex-wrap:wrap;overflow:auto;overflow-x:auto}:is(#web,#java,#clojure,#contact) div{width:100%;display:flex;flex-direction:row;justify-content:space-evenly;flex-wrap:wrap;gap:10px;overflow:hidden}:is(#web,#java,#clojure,#contact) div .card{width:28%;padding:2%;border-radius:2em;margin:2%;text-decoration:none;display:flex;flex-direction:column;justify-content:space-evenly}:is(#web,#java,#clojure,#contact) div .card img{width:70%;aspect-ratio:1;border-radius:100vw;object-fit:cover;margin:auto}:is(#web,#java,#clojure,#contact) div .card h3{height:50%;text-align:center;font-size:3vw}:is(#web,#java,#clojure,#contact) div .card h4{font-size:1vw;width:100%;text-align:center;margin-top:5%}:is(#web,#java,#clojure,#contact) h2{margin-top:5%;width:100%;height:15%;font-size:4vw;text-align:center}#contact div{height:75%;width:100%}#contact div p{width:100%;text-align:center;font-size:1.3vw;padding-top:10%}#contact div .contactLink{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:start}#contact div .contactLink a{width:40%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none;margin-left:auto;margin-right:auto}#contact div .contactLink a button{width:100%;height:5vh;display:flex;flex-direction:row;justify-content:start;align-items:center;font-size:1vw;gap:2vw}#contact div .contactLink a button img{color:#fff;margin-left:25%;height:90%}}