:root { --body-padding: 0px; --main-width: 60em; --text-faded: rgba(192, 214, 228, 0.73); }

html, body { height: 100%; }

/* Body */
body { max-width: 60em; /* width: 60em; */ margin: 0 auto; /* Top/Bot are 0, Right/Left are auto  */ padding: 0px; padding: 0px var(--body-padding); display: flex; flex-direction: column; align-items: center; background-color: #000000; }

.in-text-images { max-width: 100%; height: auto; display: block; }

.main { /* Increase to other values 80em if I want to have more than just text*/ /* max-width: 50em; */ /* top right bottom left  */ margin: 0 auto 100px auto; width: 85%; /* width: var(--main-width); */ /* padding: 5px; */ /* Attempting to use the same metrics (% in this case) for both margin and padding on this element */ padding: 0.5%; background-color: #000000; color: #c0d6e4; font-family: "Noto Sans", Georgia; font-size: 18px; line-height: 30px; /* Spacing between each line */ /* align-items: stretch; */ }

/* Bold */
strong, b { color: #BCE844; }

/* Create a specific bold */
.main-title { margin-top: 1em; margin-bottom: 2em; text-align: center; }

h1, h2, h3, h4, h5, h6 { color: #FF7000; font-weight: normal; }

h2 { margin-top: 2em; }

li { margin: 1em 0; }

/* Links on text */
a { text-decoration: none; /* Experiment with the below atributes */ /* text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: .2em; */ overflow-wrap: break-word; /* To wrap the lines */ color: #4D84C4; }

a:visited { color: #4D84C4; /* color: #6f9cd0; */ }

a:hover { text-decoration: underline; }

/* Links outside text */
.link-light-up a:hover { /* background-color: #ddd; */ /* color: #4D84C4; */ /* Initiate an Animation */ animation-name: light-up; animation-duration: 0.4s; /* The goal would be for it not to loop but instead stay with that color */ animation-fill-mode: forwards; /* Makes the animation end-state persist */ }

.link-light-up a:active { /* background-color: #04AA6D; */ color: white; }

@keyframes light-up { 0% { color: #c0d6e4; }
  100% { color: #4D84C4; } }

/* *** */
/* SVG */
/* *** */
.my-svg { fill: #FFFFFF; width: 1.5em; padding: 0 5px; }

.svg-light-up:hover { /* background-color: #ddd; */ /* color: #4D84C4; */ /* Initiate an Animation */ fill: red; animation-name: s-light-up; animation-duration: 0.4s; /* The goal would be for it not to loop but instead stay with that color */ animation-fill-mode: forwards; /* Makes the animation end-state persist */ }

.svg-light-up:active { /* background-color: #04AA6D; */ fill: #FFFFFF; }

@keyframes s-light-up { 0% { fill: #FFFFFF; }
  100% { fill: #4D84C4; } }

.homepage-title-section { width: 8em; margin: 0 auto; }

.homepage-title-section p { width: 8em; margin-top: 0.2em; margin-bottom: 0.2em; }

.name-IPA { padding-left: 0; margin-left: 1.0em; text-align: left; color: var(--text-faded); font-size: 0.59em; }

/* This must be below the main.css due to the general link formatting */
/* Navigation Bar */
.navbar { /* background-color: #202020; */ overflow: hidden; }

.navbar-elements { float: right; }

.navbar a { float: left; color: #c0d6e4; text-align: center; padding: 14px 16px; /* top/bottom right/left*/ margin: 0em; text-decoration: none; font-size: 20px; }

footer { width: 85%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; /* Align the items at the same 'vertical level' */ margin: auto auto 0 auto; /* padding: 5px; */ /* Attempting to use the same metrics (% in this case) for both margin and padding on this element */ padding: 0.5%; min-height: 3em; /* background-color: #202020; */ color: #c0d6e4; font-family: "Noto Sans", Georgia; font-size: 18px; }

.footer-name { padding: 0 5px; }

.footer-name a { text-decoration: none; color: #c0d6e4; }

.footer-mail { padding: 0 5px; font-size: 80%; line-height: 100%; }

.footer-mail a { text-decoration: none; color: #c0d6e4; }

.footer-links-section { /* margin: auto 0 auto auto; */ text-decoration: none; padding: 5px; }

.footer-links-section a:hover { text-decoration: none; }

.footer-links img { padding: 0 5px; width: 1.5em; }

.filter-white { filter: invert(100%) sepia(54%) saturate(2%) hue-rotate(117deg) brightness(112%) contrast(100%); }

#photo { display: block; margin-left: auto; margin-right: 2em; width: 15em; height: auto; border-radius: 5px; }

@media (min-width: 50em) { .about-me { display: flex; align-items: center; } }

@media (max-width: 50em) { #photo { margin-left: auto; margin-right: auto; } }

.project-media { display: block; margin: auto; width: 75%; height: auto; }

.project-div { margin-top: 5em; /* To make each project clearly separated from each other */ }

blockquote p { font-style: italic; /* quotes: '"' '"'; */ }

/* blockquote p::before { content: open-quote; } blockquote p::after { content: close-quote; } */
.post-title { line-height: 130%; }

.post-date { /* color: #4D84C4; */ color: var(--text-faded); font-size: 15px; }

/* Thoughts Page */
.thoughts-post-title { margin-bottom: 0; }

.thoughts-post-date { margin-top: 0; font-size: 0.75em; color: var(--text-faded); }

.thought-image { max-width: 100%; }

@media (max-width: 50em) { :root { --body-padding: 10px; } .main { /* top right bottom left  */ width: 97%; } footer { flex-direction: column; } .about-me { flex-direction: column; } .project-media { width: 100%; } }

/* @import "styles/main.css";
@import "styles/navbar.css"; */

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