@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
.counter-main { display: flex; align-items: center; height: 100vh; }

.counter-main main { margin: auto; color: white; text-align: center; font-size: 2rem; font-family: 'Permanent Marker', cursive; }

.counter-main main #since-we-met { margin-bottom: 6rem; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }

html { font-family: "Noto sans", sans-serif; font-size: 16px; line-height: 1.3; }

@media (min-width: 1920px) { html { font-size: 18px; } }

body { color: black; background-color: #0a2d59; display: grid; }

@media (max-width: 600px) { body { grid-template-columns: 100%; grid-template-areas: "tabpanel" "content" "footer" "resume"; } }

@media (min-width: 600px) { body { grid-template-columns: 1fr 80ch 1fr; grid-template-areas: "tabpanel tabpanel tabpanel" "left-panel content right-panel" "footer footer footer" "resume resume resume"; } }

.panel { background-color: #0d639a; }

.tabpanel { background-color: #0a2d59; grid-area: tabpanel; text-align: center; color: white; }

.tabpanel h1 { margin: 0rem; }

.tabpanel .navline { text-align: center; padding: 1rem 0rem 1rem 0rem; margin: 0; list-style-type: none; }

.tabpanel .navline li { display: inline-block; }

.tabpanel .navline a:hover { background-color: #f2c54b; color: black; }

.tabpanel .navline a { text-decoration: none; padding: 1rem 0.5rem 1rem 0.5rem; color: white; }

.tabpanel .navline .active { background-color: #0d639a; }

.tabpanel p { margin: 0.2rem 0rem 1rem 0rem; font-size: 0.75rem; }

footer { grid-area: footer; background-color: #0a2d59; padding: 1rem; }

footer div { margin: auto; width: 5rem; }

a { text-decoration: underline; color: #0d639a; }

a:hover, a:focus { color: purple; }

a:visited { color: purple; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem; }

.contact-grid div a { display: block; margin: auto; text-align: center; }

.contact-grid div p { text-align: center; }

.contact-grid .contact-icon { height: 5rem; width: 5rem; }

.page, .post { margin-bottom: 8rem; }

.article-header { margin-top: 2rem; margin-bottom: 2rem; }

#resume-grid-outer { grid-area: resume; display: grid; background-color: #0d639a; }

@media (max-width: 640px) { #resume-grid-outer { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "intro" "education" "anhs" "fullerton" "work-experience" "digitalscepter" "iso" "helpdesk" "freelance" "hire" "skills-header" "programming" "windows" "linux" "networking" "security" "homelab" "outro"; } }

@media (min-width: 640px) and (max-width: 1366px) { #resume-grid-outer { grid-template-columns: 15% 1fr 15%; grid-template-rows: auto; grid-template-areas: "intro intro intro" ". education ." ". anhs ." ". fullerton ." ". work-experience ." ". digitalscepter ." ". iso ." ". helpdesk ." ". freelance ." ". hire ." ". skills-header ." ". programming ." ". windows ." ". linux ." ". networking ." ". security ." ". homelab ." "outro outro outro"; } }

@media (min-width: 1366px) { #resume-grid-outer { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-template-areas: "intro intro intro intro" ". education education ." ". anhs fullerton ." ". work-experience work-experience ." " . digitalscepter digitalscepter ." " . iso iso ." " . helpdesk helpdesk ." " . freelance hire ." " . skills-header skills-header ." " . programming windows ." " . linux networking ." " . security . ." " . homelab homelab ." "outro outro outro outro"; } }

#resume-grid-outer #intro { grid-area: intro; text-align: center; padding: 10rem 0rem 5rem 0rem; color: white; background-color: #0a2d59; }

#resume-grid-outer #intro h1 { display: inline-block; border-bottom-width: 1px; border-bottom-style: solid; }

#resume-grid-outer #intro h2 { margin-top: 0rem; font-weight: 100; }

#resume-grid-outer .card { background-color: #f0f0f0; padding: 1rem 1rem 0rem 1rem; border-radius: 0.2rem; }

@media (max-width: 960px) { #resume-grid-outer .card { margin: 1.5rem 2rem 2rem 1.5rem; } }

@media (min-width: 960px) { #resume-grid-outer .card { margin: 1.5rem 1rem 2rem 1rem; box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.9); } }

#resume-grid-outer .card ul { padding: 0rem 0rem 0rem 1rem; }

#resume-grid-outer .card li { margin: 0.25rem 0rem 0.25rem 0rem; }

#resume-grid-outer .card h2 { margin: 0.5rem 0rem 0.5rem 0rem; text-align: center; }

#resume-grid-outer .card h3 { margin-top: 0.5rem; text-align: center; font-weight: 300; }

#resume-grid-outer .section-header { color: white; margin-top: 2rem; text-align: center; }

#resume-grid-outer #education { grid-area: education; }

#resume-grid-outer #anhs { grid-area: anhs; }

#resume-grid-outer #fullerton { grid-area: fullerton; }

#resume-grid-outer #work-experience { grid-area: work-experience; }

#resume-grid-outer #helpdesk { grid-area: helpdesk; }

#resume-grid-outer #iso { grid-area: iso; }

#resume-grid-outer #digitalscepter { grid-area: digitalscepter; }

#resume-grid-outer #freelance { grid-area: freelance; }

#resume-grid-outer #hire { grid-area: hire; }

#resume-grid-outer #skills-header { grid-area: skills-header; }

#resume-grid-outer #programming { grid-area: programming; }

#resume-grid-outer #windows { grid-area: windows; }

#resume-grid-outer #linux { grid-area: linux; }

#resume-grid-outer #networking { grid-area: networking; }

#resume-grid-outer #security { grid-area: security; }

#resume-grid-outer #homelab { grid-area: homelab; }

#resume-grid-outer #outro { grid-area: outro; text-align: center; padding: 5rem 0rem 5rem 0rem; color: white; background-color: #0a2d59; }

#resume-grid-outer #outro a { color: white; text-decoration: none; display: inline-block; border-bottom-width: 1px; border-bottom-style: solid; }

article.post > h3 { counter-increment: section; }

article.post > h3:before { content: counter(section) "."; }

.content { grid-area: content; background-color: #f0f0f0; padding: 0rem 1.5rem 0rem 1.5rem; counter-reset: section -1; }

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { font-weight: bold; color: black; text-rendering: optimizeLegibility; margin: 3.5rem 0rem 0.5rem 0rem; }

.content h1 { font-size: 2rem; margin-bottom: 1.5rem; }

.content h2 { font-size: 1.5rem; }

.content h3 { font-size: 1.25rem; }

.content h4, .content h5 { font-size: 1rem; }

.content p { margin-top: 0rem; margin-bottom: 1.5rem; }

.content p + ul { margin: 0rem 0rem 1.5rem 0rem; }

.content .post-listing { margin-bottom: 2rem; }

.content .post-listing img { width: 100%; }

.content .post-listing h4 { margin-bottom: 0rem; margin-top: 0rem; }

.content .post-listing .post-description, .content .post-listing .post-dateline, .content .post-listing .post-tags { font-size: 0.9rem; margin-top: 0rem; margin-bottom: 0.4rem; color: #515151; }

.content .post-listing .post-description { line-height: 1rem; margin: 0.3rem 0rem 0.3rem 0rem; color: black; }

.content .post-listing .post-tags { line-height: 1.5rem; }

.content .post-listing .post-tag { white-space: nowrap; display: inline-block; color: black; font-size: 0.8rem; border-radius: 4px; background-color: #e4e4e4; padding: 0.1rem 0.3rem 0.1rem 1.2rem; margin: 0rem 0.3rem 0.3rem 0rem; background-image: url(assets/icons/octicons/tag.svg); background-repeat: no-repeat; background-position: 0.2rem 50%; }

.content .toc { border: 1px solid; background-color: white; padding: 0.5rem; }

.content .toc h4 { margin-top: 0; }

.content .toc ol { list-style: none; padding: 0 0 0 0.5rem; counter-reset: toc-counter -1; margin: 0; }

.content .toc ol li { counter-increment: toc-counter; margin-bottom: 0.5rem; }

.content .toc ol li::before { font-size: 1.2rem; content: counter(toc-counter) "."; margin-right: 0.5rem; }

.content div.highlighter-rouge { border: 1px solid; padding: 0rem 0.25rem 0rem 0.25rem; margin: 0rem 0rem 1.5rem 0rem; color: black; background-color: white; white-space: nowrap; font-size: 0.9rem; }

.content div.highlighter-rouge > div { padding: 0rem 0.5rem 0rem 0.5rem; margin: 0rem 0.25rem 0rem 0.25rem; overflow-x: auto; }

.content code.highlighter-rouge { padding: 0rem 0.25rem 0rem 0.25rem; color: black; background-color: white; }

.content .diagram { border-style: solid; border-width: 1px; padding: 0.5rem; margin-bottom: 1.5rem; background-color: white; font-size: 0.8rem; }

.content .diagram img { width: 100%; }

.content .diagram .caption { margin: 0rem; }

.content blockquote { margin: 1.2rem 2rem 1.7rem 2rem; border-width: 2px 0; border-style: solid; border-color: #515151; background-color: #e4e4e4; position: relative; }

.content blockquote:before { content: "“"; font-size: 6rem; position: absolute; top: -2rem; left: -2.5rem; }

.content blockquote:after { content: "”"; font-size: 6rem; position: absolute; top: calc(100% - 1.8rem); left: 101%; }

.content blockquote p { margin: 0.5rem 1rem 0.5rem 1rem; }

.content blockquote .blockquote-cite { text-align: right; margin: 0rem 1rem 0.5rem 0rem; }

.content blockquote .blockquote-cite:before { content: "—"; }

.content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }

.content table th { background-color: #d6dbdf; border: 1px solid; }

.content table td { padding-left: 0.4rem; border: 1px solid; }

.highlight .hll { background-color: #ffffcc; }

.highlight .c { color: #408080; font-style: italic; }

/* Comment */
.highlight .err { border: 1px solid #FF0000; }

/* Error */
.highlight .k { color: #008000; font-weight: bold; }

/* Keyword */
.highlight .o { color: #666666; }

/* Operator */
.highlight .cm { color: #408080; font-style: italic; }

/* Comment.Multiline */
.highlight .cp { color: #BC7A00; }

/* Comment.Preproc */
.highlight .c1 { color: #408080; font-style: italic; }

/* Comment.Single */
.highlight .cs { color: #408080; font-style: italic; }

/* Comment.Special */
.highlight .gd { color: #A00000; }

/* Generic.Deleted */
.highlight .ge { font-style: italic; }

/* Generic.Emph */
.highlight .gr { color: #FF0000; }

/* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold; }

/* Generic.Heading */
.highlight .gi { color: #00A000; }

/* Generic.Inserted */
.highlight .go { color: #808080; }

/* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold; }

/* Generic.Prompt */
.highlight .gs { font-weight: bold; }

/* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold; }

/* Generic.Subheading */
.highlight .gt { color: #0040D0; }

/* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold; }

/* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold; }

/* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold; }

/* Keyword.Namespace */
.highlight .kp { color: #008000; }

/* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold; }

/* Keyword.Reserved */
.highlight .kt { color: #B00040; }

/* Keyword.Type */
.highlight .m { color: #666666; }

/* Literal.Number */
.highlight .s { color: #BA2121; }

/* Literal.String */
.highlight .na { color: #7D9029; }

/* Name.Attribute */
.highlight .nb { color: #008000; }

/* Name.Builtin */
.highlight .nc { color: #0000FF; font-weight: bold; }

/* Name.Class */
.highlight .no { color: #880000; }

/* Name.Constant */
.highlight .nd { color: #AA22FF; }

/* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold; }

/* Name.Entity */
.highlight .ne { color: #D2413A; font-weight: bold; }

/* Name.Exception */
.highlight .nf { color: #0000FF; }

/* Name.Function */
.highlight .nl { color: #A0A000; }

/* Name.Label */
.highlight .nn { color: #0000FF; font-weight: bold; }

/* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold; }

/* Name.Tag */
.highlight .nv { color: #19177C; }

/* Name.Variable */
.highlight .ow { color: #AA22FF; font-weight: bold; }

/* Operator.Word */
.highlight .w { color: #bbbbbb; }

/* Text.Whitespace */
.highlight .mf { color: #666666; }

/* Literal.Number.Float */
.highlight .mh { color: #666666; }

/* Literal.Number.Hex */
.highlight .mi { color: #666666; }

/* Literal.Number.Integer */
.highlight .mo { color: #666666; }

/* Literal.Number.Oct */
.highlight .sb { color: #BA2121; }

/* Literal.String.Backtick */
.highlight .sc { color: #BA2121; }

/* Literal.String.Char */
.highlight .sd { color: #BA2121; font-style: italic; }

/* Literal.String.Doc */
.highlight .s2 { color: #BA2121; }

/* Literal.String.Double */
.highlight .se { color: #BB6622; font-weight: bold; }

/* Literal.String.Escape */
.highlight .sh { color: #BA2121; }

/* Literal.String.Heredoc */
.highlight .si { color: #BB6688; font-weight: bold; }

/* Literal.String.Interpol */
.highlight .sx { color: #008000; }

/* Literal.String.Other */
.highlight .sr { color: #BB6688; }

/* Literal.String.Regex */
.highlight .s1 { color: #BA2121; }

/* Literal.String.Single */
.highlight .ss { color: #19177C; }

/* Literal.String.Symbol */
.highlight .bp { color: #008000; }

/* Name.Builtin.Pseudo */
.highlight .vc { color: #19177C; }

/* Name.Variable.Class */
.highlight .vg { color: #19177C; }

/* Name.Variable.Global */
.highlight .vi { color: #19177C; }

/* Name.Variable.Instance */
.highlight .il { color: #666666; }

/* Literal.Number.Integer.Long */

/*# sourceMappingURL=styles.css.map */