From f5ccefc61cf9a4a4053a35f6f2b8601dcbe1e5b6 Mon Sep 17 00:00:00 2001 From: github-actions Date: Sat, 7 Jan 2023 04:42:49 +0000 Subject: [PATCH] Preparing changes for deployment. --- styles/404.css | 31 +--- styles/default.css | 297 +------------------------------- styles/experience.css | 84 +-------- styles/footer.css | 13 +- styles/global.css | 72 +------- styles/header.css | 14 +- styles/resume.css | 384 +----------------------------------------- 7 files changed, 7 insertions(+), 888 deletions(-) diff --git a/styles/404.css b/styles/404.css index a6a43e2..14514b9 100644 --- a/styles/404.css +++ b/styles/404.css @@ -1,30 +1 @@ -#notfound { - --color: var(--dark) linear-gradient(#0000, #0003); - flex: 99999999999999; - display: flex; - justify-content: center; - align-items: center; - color: white; - flex-direction: column; - gap: 20px; -} - -#notfound > * { - max-width: 300px; -} - -#text-outer > i { - font-size: 30px; -} - -#text-outer { - display: inline-flex; - flex-direction: column; - align-items: center; - font-size: 25px; -} - -#text-404 { - font-size: 160px; - line-height: 1; -} \ No newline at end of file +#notfound{--color:var(--dark) linear-gradient(#0000, #0003);flex:99999999999999;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;gap:20px}#notfound>*{max-width:300px}#text-outer>i{font-size:30px}#text-outer{display:inline-flex;flex-direction:column;align-items:center;font-size:25px}#text-404{font-size:160px;line-height:1} \ No newline at end of file diff --git a/styles/default.css b/styles/default.css index fa3a116..f2c395f 100644 --- a/styles/default.css +++ b/styles/default.css @@ -1,296 +1 @@ -html { - scroll-behavior: smooth; - background-image: linear-gradient(#0003 0% 50%, #0000 50% 100%), - linear-gradient(var(--dark) 0% 50%, var(--light) 50% 100%); -} - -body { - display: flex; - flex-direction: column; - min-height: 100vh; - width: min(100vw, 1024px); - box-sizing: border-box; - margin: auto; - padding: 0 20px; - line-height: 1.2; -} - -/*----------------------------------------------------------------------------*/ - -* { - text-decoration: none; -} - -button { - background-color: transparent; -} - -.pre { - all: unset; - white-space: pre; -} - -.nav-link { - color: var(--color); - text-decoration: none; - font-weight: 900; - font-family: "Open Sans"; -} - -.shadow { - filter: drop-shadow(0 4px 0 #0004); -} - -.icon, .r-icon, .button { - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; -} - -.icon::before { - font-family: 'Material Symbols Outlined'; - content: attr(data-i); - font-size: 36px; - width: 1em; - margin-right: 5px; -} - -.r-icon::after { - font-family: 'Material Symbols Outlined'; - content: attr(data-i); - width: 1em; - margin-left: 5px; -} - -h1 { - font-size: 40px; - font-family: "Open Sans"; - font-weight: 900; -} - -h2 { - font-size: 30px; - font-family: "Open Sans"; - font-weight: 900; -} - -i { - font-size: 20px; - font-family: "Source Serif Pro"; -} - -p, section { - font-size: 20px; - font-family: "Open Sans"; - font-weight: 100; -} - -ul { - list-style-type: "- "; - padding-left: 2ch; -} - -li { - padding-bottom: 20px; -} - -.lighter { - background: #fff4; -} - -.darker { - background: #0004; -} - -hr { - height: 1px; - width: 100%; -} - -.button { - color: var(--color); - position: relative; - padding: 10px 30px; - font-size: 20px; -} - -.button::before { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: var(--color); - opacity: 25%; - content: ""; - border-radius: 10px; -} - -.width-pad { - width: 100vw; - background-color: var(--color); - padding: 10px 20px; - box-sizing: border-box; -} - -.png-icon { - filter: brightness(0) invert(1); -} - -/*----------------------------------------------------------------------------*/ - -#about { - position: relative; - margin: auto; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - max-width: 1024px; - min-height: 85vh; - color: var(--dark); - box-sizing: border-box; - gap: 30px; -} - -#about > * { - max-width: 600px; -} - -nav { - display: flex; - flex-wrap: wrap; - width: 100%; -} - -#inner-nav { - display: inline-flex; - flex-grow: 1; - gap: 20px; - flex-wrap: wrap; -} - -/*----------------------------------------------------------------------------*/ - -#projects { - padding: 30px 0; - position: relative; - display: flex; - flex-direction: column; - align-items: flex-start; - max-width: 1024px; - min-height: 100vh; - color: white; - box-sizing: border-box; - gap: 30px; -} - -#project-list { - overflow: visible; - display: flex; - flex-wrap: wrap; - width: 100%; - gap: 20px; -} - -.project-item { - min-width: min(max(40%, 400px), 100%); - flex: 1; - height: 300px; - background-color: var(--color); - border-radius: 10px; - overflow: visible; - display: flex; - flex-direction: column; -} - -.project-link { - color: white; - background-color: #0005; - padding: 10px; - border-radius: 0 0 10px 10px; -} - -#experience-button { - align-self: center; -} - -/*----------------------------------------------------------------------------*/ - -#menu { - top: 0; - left: 0; - max-width: none; - max-height: none; - position: fixed; - background-color: var(--light); - color: var(--dark); - width: 100vw; - font-size: 25px; - overflow: visible; -} - -#menu-top { - display: flex; - align-items: center; - transform: translateY(-1.5px); -} - -#menu-inner { - max-width: 1024px; - display: flex; - flex-direction: column; - gap: 30px; - margin: auto; - margin-bottom: 50px; -} - -/*----------------------------------------------------------------------------*/ - -@media (max-width: 464px) { - .nav2, .nav3 { - display: none; - } -} - -@media (max-width: 813px) and (min-width: 465px) { - .nav1, .nav3 { - display: none; - } -} - -@media (min-width: 814px) { - .nav1, .nav2 { - display: none; - } -} - -.project-noimage { - color: #0002; - font-size: 40px; - font-family: "Open Sans"; - font-weight: 900; - display: flex; - flex: 1000; - justify-content: center; - align-items: center; - text-align: center; - box-sizing: border-box; - padding: 10px; -} - -.project-image-outer { - position: relative; - justify-content: center; - align-items: center; -} - -.project-image { - position: absolute; - max-height: 100%; - max-width: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} \ No newline at end of file +html{scroll-behavior:smooth;background-image:linear-gradient(#0003 0% 50%,#0000 50% 100%),linear-gradient(var(--dark) 0% 50%,var(--light) 50% 100%)}body{flex-direction:column;min-height:100vh;width:min(100vw,1024px);box-sizing:border-box;margin:auto;padding:0 20px;line-height:1.2}*{text-decoration:none}button{background-color:transparent}.pre{all:unset;white-space:pre}.nav-link{color:var(--color);text-decoration:none;font-weight:900;font-family:"Open Sans"}.shadow{filter:drop-shadow(0 4px 0#0004)}.button,.icon,.r-icon{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.icon::before,.r-icon::after{font-family:"Material Symbols Outlined";content:attr(data-i);width:1em}.icon::before{font-size:36px;margin-right:5px}.r-icon::after{margin-left:5px}h1,h2{font-size:40px;font-weight:900}h2{font-size:30px}i,p,section{font-size:20px;font-family:"Source Serif Pro"}h1,h2,p,section{font-family:"Open Sans"}p,section{font-weight:100}ul{list-style-type:"- ";padding-left:2ch}li{padding-bottom:20px}.lighter{background:#fff4}.darker{background:#0004}hr{height:1px;width:100%}.button{color:var(--color);position:relative;padding:10px 30px;font-size:20px}.button::before{position:absolute;width:100%;height:100%;top:0;left:0;background:var(--color);opacity:25%;content:"";border-radius:10px}.width-pad{width:100vw;background-color:var(--color);padding:10px 20px;box-sizing:border-box}.png-icon{filter:brightness(0) invert(1)}#about,body,nav{display:flex}#about{position:relative;margin:auto;flex-direction:column;justify-content:center;align-items:flex-start;max-width:1024px;min-height:85vh;color:var(--dark);box-sizing:border-box;gap:30px}#about>*{max-width:600px}nav{flex-wrap:wrap;width:100%}#inner-nav{display:inline-flex;flex-grow:1;gap:20px;flex-wrap:wrap}#projects{padding:30px 0;position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:1024px;min-height:100vh;color:#fff;box-sizing:border-box;gap:30px}#project-list,.project-item{overflow:visible;display:flex}#project-list{flex-wrap:wrap;width:100%;gap:20px}.project-item{min-width:min(max(40%,400px),100%);flex:1;height:300px;background-color:var(--color);border-radius:10px;flex-direction:column}.project-link{color:#fff;background-color:#0005;padding:10px;border-radius:0 0 10px 10px}#experience-button{align-self:center}#menu{top:0;left:0;max-width:none;max-height:none;position:fixed;background-color:var(--light);color:var(--dark);width:100vw;font-size:25px;overflow:visible}#menu-top{display:flex;align-items:center;transform:translateY(-1.5px)}#menu-inner{max-width:1024px;display:flex;flex-direction:column;gap:30px;margin:auto auto 50px}@media (max-width:464px){.nav2,.nav3{display:none}}@media (max-width:813px) and (min-width:465px){.nav1,.nav3{display:none}}@media (min-width:814px){.nav1,.nav2{display:none}}.project-image-outer,.project-noimage{justify-content:center;align-items:center}.project-noimage{color:#0002;font-size:40px;font-family:"Open Sans";font-weight:900;display:flex;flex:1000;text-align:center;box-sizing:border-box;padding:10px}.project-image-outer{position:relative}.project-image{position:absolute;max-height:100%;max-width:100%;top:50%;left:50%;transform:translate(-50%,-50%)} \ No newline at end of file diff --git a/styles/experience.css b/styles/experience.css index 69de916..c101395 100644 --- a/styles/experience.css +++ b/styles/experience.css @@ -1,83 +1 @@ -#banner { - margin-top: 10px; - padding: 20px 0; - display: flex; - justify-content: space-between; - align-items: center; - line-height: 1; -} - -#experience { - color: white; - gap: 30px; - display: flex; - flex-direction: column; - align-items: flex-start; -} - -#content { - display: flex; - flex-wrap: wrap-reverse; - align-items: flex-end; - gap: 30px; - padding-bottom: 30px; -} - -#image { - background-color: #ccc; - border-radius: 10px; - height: 300px; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - color: #aaa; - position: relative; - text-align: center; - padding: 10px; - hyphens: manual; - box-sizing: border-box; -} - -#description { - flex: 1; - gap: 30px; - display: flex; - flex-direction: column; - align-items: flex-start; - min-width: min(300px, 100%); -} - -#image-side { - flex: 1; - gap: 20px; - display: flex; - flex-direction: column; - align-items: flex-start; - min-width: min(500px, 100%); -} - -#stack { - display: flex; - gap: 10px; - flex-flow: row wrap; -} - -#stack .chip { - flex-grow: 1; -} - -#stack::after { - content: ""; - flex: 1000000; -} - -#image-inner { - max-width: 100%; - max-height: 100%; -} - -#close-icon { - font-size: 36px; - line-height: 1; -} \ No newline at end of file +#banner{margin-top:10px;padding:20px 0;display:flex;justify-content:space-between;align-items:center;line-height:1}#experience{color:#fff;gap:30px;display:flex;flex-direction:column;align-items:flex-start}#content{display:flex;flex-wrap:wrap-reverse;align-items:flex-end;gap:30px;padding-bottom:30px}#image{background-color:#ccc;border-radius:10px;height:300px;width:100%;display:flex;align-items:center;justify-content:center;color:#aaa;position:relative;text-align:center;padding:10px;hyphens:manual;box-sizing:border-box}#description,#image-side{flex:1;gap:30px;display:flex;flex-direction:column;align-items:flex-start;min-width:min(300px,100%)}#image-side{gap:20px;min-width:min(500px,100%)}#stack{display:flex;gap:10px;flex-flow:row wrap}#stack .chip{flex-grow:1}#stack::after{content:"";flex:1000000}#image-inner{max-width:100%;max-height:100%}#close-icon{font-size:36px;line-height:1} \ No newline at end of file diff --git a/styles/footer.css b/styles/footer.css index f9e94d1..a405696 100644 --- a/styles/footer.css +++ b/styles/footer.css @@ -1,12 +1 @@ -footer { - display: flex; - align-items: center; - color: white; - max-width: 1024px; - margin: auto; - gap: 10px; -} - -footer::before { - filter: brightness(0.8); -} \ No newline at end of file +footer{display:flex;align-items:center;color:#fff;max-width:1024px;margin:auto;gap:10px}footer::before{filter:brightness(.8)} \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index 11c4faa..10a35c5 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,71 +1 @@ -* { - padding: 0; - border: 0; - margin: 0; - outline: 0; -} - -:root { - --light: #FEFADC; - --dark: #504B43; - --red: #EC1B24; - --yellow: #E19200; - --green: #4CB753; - --blue: #2B9EB3; - - --timing: cubic-bezier(0.2, 1, 0, 1); - --start-timing: cubic-bezier(0,.5,0,.9); - - --grad: linear-gradient(45deg, #F008, #00F8); - --shadow: 0px 10px 50px 0 #0008; - - --width: 1024px; -} - -.light { --color: var(--light) } -.dark { --color: var(--dark) } -.red { --color: var(--red) } -.yellow { --color: var(--yellow) } -.green { --color: var(--green) } -.blue { --color: var(--blue) } -.white { --color: white } -.malung { --color: #F76F8E } -.freshmanual { --color: #3b91db } -.pollbuddy { --color: #7f6491 } -.rpi-crisis { --color: #a06ce4 } - -.flex-space, .flex, br { flex-grow: 1 } -.flex.dark { background-color: var(--dark) } -.space { flex: 1000 } -.npad { padding: 0 !important } - -/*----------------------------------------------------------------------------*/ - -html { - background-color: var(--dark); -} - -/*----------------------------------------------------------------------------*/ - -.back { - position: relative; - padding: 10px 0; - width: min(100vw, 1024px, 100%); - box-sizing: border-box; -} - -.back::before { - background: var(--color); - width: 100vw; - height: 100%; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - content: ""; - z-index: -1; -} - -.dark-back::before { - filter: brightness(0.8); -} +*{padding:0;border:0;margin:0;outline:0}:root{--light:#FEFADC;--dark:#504B43;--red:#EC1B24;--yellow:#E19200;--green:#4CB753;--blue:#2B9EB3;--timing:cubic-bezier(0.2, 1, 0, 1);--start-timing:cubic-bezier(0,.5,0,.9);--grad:linear-gradient(45deg, #F008, #00F8);--shadow:0px 10px 50px 0 #0008;--width:1024px}.light{--color:var(--light)}.dark{--color:var(--dark)}.red{--color:var(--red)}.yellow{--color:var(--yellow)}.green{--color:var(--green)}.blue{--color:var(--blue)}.white{--color:white}.malung{--color:#F76F8E}.freshmanual{--color:#3b91db}.pollbuddy{--color:#7f6491}.rpi-crisis{--color:#a06ce4}.flex,.flex-space,br{flex-grow:1}.flex.dark,html{background-color:var(--dark)}.space{flex:1000}.npad{padding:0!important}.back{position:relative;padding:10px 0;width:min(100vw,1024px,100%);box-sizing:border-box}.back::before{background:var(--color);width:100vw;height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);content:"";z-index:-1}.dark-back::before{filter:brightness(.8)} \ No newline at end of file diff --git a/styles/header.css b/styles/header.css index d813256..6551bfb 100644 --- a/styles/header.css +++ b/styles/header.css @@ -1,13 +1 @@ -header { - position: sticky !important; - top: 0; - z-index: 10000; - - display: flex; - gap: 40px; - font-size: 25px; - font-family: "Open Sans"; - font-weight: bolder; - color: var(--dark); - align-items: center; -} \ No newline at end of file +header{position:sticky!important;top:0;z-index:10000;display:flex;gap:40px;font-size:25px;font-family:"Open Sans";font-weight:bolder;color:var(--dark);align-items:center} \ No newline at end of file diff --git a/styles/resume.css b/styles/resume.css index 815d86c..baf2b06 100644 --- a/styles/resume.css +++ b/styles/resume.css @@ -1,383 +1 @@ -/*---- Base ------------------------------------------------------------------*/ - -:root { - font-family: sans-serif; - --timing: cubic-bezier(.2,1,0,1); - --enter: 2s var(--timing) 0.2s both; - - --blue: #3F75A2; - --darkblue: #2E5476; - --grey: #575757; - - --link-r: #D13800; - --link-g: #006B00; - --link-b: #006EDB; -} - -* { - margin: 0; - padding: 0; - border: 0; -} - -html { - font-size: 1vw; - animation: var(--enter) scene-enter; -} - -@media print { - html { - font-size: 0.7rem; - } -} - -main { - display: contents; -} - -/*---- Generic Styles --------------------------------------------------------*/ - -h1 { - font-size: 3em; -} - -h2 { - font-size: 2em; -} - -h3 { - font-size: 1.5em; -} - -h4 { - font-size: 1.15em; -} - -h5 { - font-size: 0.75em; -} - -ul { - padding-inline-start: 2em; - margin: 0.5em 0; - list-style-type: '— '; -} - -/*---- Navbar ----------------------------------------------------------------*/ - -.navbar { - position: fixed; - height: 18em; - width: 100%; - left: 0; - z-index: -1; - display: flex; - justify-content: center; - align-items: center; -} - -nav.navbar { - top: 0; -} - -.resume-header { - position: absolute; - color: white; - filter: opacity(0.5); - font: 800 8em Poppins; - animation: var(--enter) title-enter; - will-change: transform, filter; - user-select: none; -} - -footer.navbar { - bottom: 0; -} - -.resume-footer { - font: bold 8em monospace; - animation: var(--enter) footer-enter; - will-change: transform, filter; - user-select: none; - display: flex; - justify-content: space-between; - width: 3em; -} - -.footer-icon { - text-decoration: none; - opacity: 0.5; - color: white; - font-size: 0.2em; - font-family: Verdana; - font-weight: 600; - display: inline-flex; - flex-direction: column; - align-items: center; - transition: transform 0.3s, opacity 0.3s; -} - -.footer-img { - display: inline-block; - font-size: 4em !important; - user-select: none; - filter: brightness(0) invert(1); - width: 1em; - height: 1.2em; - transform: scale(1); -} - -.footer-icon:hover { - transform: scale(1.1); - opacity: 1; -} - -/*---- Page ------------------------------------------------------------------*/ - -article { - background: whitesmoke; - border: 2px solid gainsboro; - padding: 3em; - margin: 18em 16em; - border-radius: 1em; - animation: page-enter var(--enter); - will-change: transform, filter; - box-shadow: 0 2.5em 5em 0 #0004, - inset 1.5em 1.5em 5em 2.5em white; -} - -body::before { - background: lightsteelblue var(--grad); - width: 100vw; - height: 100vh; - content: ""; - display: inline-block; - position: fixed; - top: 0; - left: 0; - z-index: -2; -} - -/*---- Header ----------------------------------------------------------------*/ - -.contact-details { - display: flex; - justify-content: space-between; - font-style: normal; - font-weight: bold; - margin-top: 1em; -} - -.contact-detail { - display: flex; - align-items: center; - white-space: nowrap; -} - -.email { - color: var(--link-b); -} - -.phone { - color: var(--link-r); -} - -.location { - color: var(--link-g); -} - -/*---- Sectioning ------------------------------------------------------------*/ - -.topic-title { - padding-bottom: 3px; - border-bottom: 2px solid cornflowerblue; - display: block; -} - -.topic { - margin-top: 2em; - page-break-inside: avoid; -} - -.topic-icon { - width: 1em; - height: 1em; - display: inline-block; -} - -/*---- Experience Title ------------------------------------------------------*/ - -.experience { - margin-top: 2em; - margin-bottom: 0.5em; -} - -.title { - font-weight: bold; - font-family: Verdana; - color: var(--blue); -} - -.title > i { - font-weight: normal; -} - -.date { - font-style: italic; -} - -.place { - font-weight: normal; - display: block; - color: var(--grey); - text-transform: uppercase; -} - -/*---- Skill List ------------------------------------------------------------*/ - -.skill-list { - list-style: none; - padding-inline-start: 0; -} - -.skill-list > li { - border: 1px solid gainsboro; - display: inline-flex; - padding: 0.5em 1em; - border-radius: 0.5em; - color: var(--blue); - background: whitesmoke; - font-family: monospace; - white-space: nowrap; - overflow: hidden; - align-items: center; - font-weight: bold; - user-select: none; - margin: 0.5em; - box-shadow: 0 0.25em 0.25em 0 #0004, - inset 0.15em 0.15em 0.5em 0.25em white; - transform: scale(1); - transition: transform var(--timing) 1s; -} - -.skill-list > li img { - height: 1.5em; -} - -.skill-list > li:hover { - transform: scale(1.1); -} - -/*---- Classes List ----------------------------------------------------------*/ - -.classes-list { - list-style: none; - padding-inline-start: 0; -} - -.classes-list > li::before { - content: '— '; -} - -.classes-list > li { - width: calc(50% - 3ch); - display: inline-block; -} - -/*---- Miscellaneous ---------------------------------------------------------*/ - -.hflex { - display: flex; - justify-content: space-between; - align-items: center; -} - -.icon { - margin-right: 0.5em; - width: 1em; - height: 1em; - user-select: none; - display: inline-block; -} - -.freshmanuals { - color: var(--darkblue); -} - -/*---- Animations ------------------------------------------------------------*/ - -@keyframes page-enter { - from { - transform: scale(0.9) translateY(10%); - } - - to { - transform: scale(1) translateY(0%); - } -} - -@keyframes title-enter { - 0% { - transform: scale(2) translateY(-50%); - } - - 100% { - transform: scale(1) translateY(0%); - } -} - -@keyframes footer-enter { - 0% { - transform: scale(2) translateY(50%); - } - - 100% { - transform: scale(1) translateY(0%); - } -} - -@keyframes scene-enter { - from { - filter: brightness(0); - } - - to { - filter: brightness(1); - } -} - -/*---- Print Styles ----------------------------------------------------------*/ - -@media print { - article { - margin: 0; - border-radius: 0; - border: 0; - padding: 0; - background: white; - box-shadow: none; - } - - main { - overflow: auto; - height: auto; - background: white; - box-shadow: none; - } - - html, body { - overflow: auto; - background: white; - height: auto; - } - - .skill-list > li { - box-shadow: none; - background-color: white; - } - - article * { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - } -} \ No newline at end of file +@keyframes page-enter{0%{transform:scale(.9) translateY(10%)}to{transform:scale(1) translateY(0)}}@keyframes title-enter{0%{transform:scale(2) translateY(-50%)}to{transform:scale(1) translateY(0)}}@keyframes footer-enter{0%{transform:scale(2) translateY(50%)}to{transform:scale(1) translateY(0)}}@keyframes scene-enter{0%{filter:brightness(0)}to{filter:brightness(1)}}:root{font-family:sans-serif;--timing:cubic-bezier(.2,1,0,1);--enter:2s var(--timing) 0.2s both;--blue:#3F75A2;--darkblue:#2E5476;--grey:#575757;--link-r:#D13800;--link-g:#006B00;--link-b:#006EDB}*{margin:0;padding:0;border:0}html{font-size:1vw;animation:var(--enter) scene-enter}@media print{html{font-size:.7rem}}main{display:contents}h1{font-size:3em}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1.15em}h5{font-size:.75em}ul{padding-inline-start:2em;margin:.5em 0;list-style-type:"— "}.navbar{position:fixed;height:18em;width:100%;left:0;z-index:-1;display:flex;justify-content:center;align-items:center}nav.navbar{top:0}.resume-header{position:absolute;color:#fff;filter:opacity(.5);font:800 8em Poppins;animation:var(--enter) title-enter;user-select:none}footer.navbar{bottom:0}.resume-footer,.resume-header,article{will-change:transform,filter}.resume-footer{font:700 8em monospace;animation:var(--enter) footer-enter;user-select:none;display:flex;justify-content:space-between;width:3em}.footer-icon{text-decoration:none;opacity:.5;color:#fff;font-size:.2em;font-family:Verdana;font-weight:600;display:inline-flex;flex-direction:column;align-items:center;transition:transform .3s,opacity .3s}.footer-img{display:inline-block;font-size:4em!important;user-select:none;filter:brightness(0) invert(1);width:1em;height:1.2em;transform:scale(1)}.footer-icon:hover{opacity:1}article{background:#f5f5f5;border:2px solid #dcdcdc;padding:3em;margin:18em 16em;border-radius:1em;animation:page-enter var(--enter);box-shadow:0 2.5em 5em 0#0004,inset 1.5em 1.5em 5em 2.5em #fff}body::before{background:lightsteelblue var(--grad);width:100vw;height:100vh;content:"";display:inline-block;position:fixed;top:0;left:0;z-index:-2}.contact-details{display:flex;justify-content:space-between;font-style:normal;font-weight:700;margin-top:1em}.contact-detail{display:flex;align-items:center;white-space:nowrap}.email{color:var(--link-b)}.phone{color:var(--link-r)}.location{color:var(--link-g)}.topic-title{padding-bottom:3px;border-bottom:2px solid #6495ed;display:block}.topic{margin-top:2em;page-break-inside:avoid}.topic-icon{width:1em;height:1em;display:inline-block}.experience{margin-top:2em;margin-bottom:.5em}.skill-list>li,.title{font-weight:700;font-family:Verdana;color:var(--blue)}.title>i{font-weight:400}.date{font-style:italic}.place{font-weight:400;display:block;color:var(--grey);text-transform:uppercase}.classes-list,.skill-list{list-style:none;padding-inline-start:0}.skill-list>li{border:1px solid #dcdcdc;display:inline-flex;padding:.5em 1em;border-radius:.5em;background:#f5f5f5;font-family:monospace;white-space:nowrap;overflow:hidden;align-items:center;user-select:none;margin:.5em;box-shadow:0 .25em .25em 0#0004,inset .15em .15em .5em .25em #fff;transform:scale(1);transition:transform var(--timing) 1s}.skill-list>li img{height:1.5em}.footer-icon:hover,.skill-list>li:hover{transform:scale(1.1)}.classes-list>li::before{content:"— "}.classes-list>li{width:calc(50% - 3ch);display:inline-block}.hflex{display:flex;justify-content:space-between;align-items:center}.icon{margin-right:.5em;width:1em;height:1em;user-select:none;display:inline-block}.freshmanuals{color:var(--darkblue)}@media print{article{margin:0;border-radius:0;border:0;padding:0;background:#fff}article,main{box-shadow:none}body,html,main{overflow:auto;background:#fff;height:auto}.skill-list>li{box-shadow:none;background-color:#fff}article *{-webkit-print-color-adjust:exact;print-color-adjust:exact}} \ No newline at end of file