body {
  font-size: 1.2em;
  background-color: #EFE0EF;
  color: darkSlateGray;
  font-family: 'Urbanist', sans-serif;
  margin: 0em;
}

h1 {
  font-weight: 100;
  font-size: 2.3em;
}

h2 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

progress[value] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 0.5em;
  transform: translate(-0.4rem, -0.5rem);
  border: none;
  border-radius: 0.2em;
  overflow: hidden;
}

progress::-moz-progress-bar {
  background-color: orange;
  border-radius: 0.2em;
  box-shadow: 0.2em 0em 0.75em black;
}

progress::-webkit-progress-bar {
  background-color: beige;
}

progress::-webkit-progress-value {
  background-color: orange;
  border-radius: 0.2em;
  box-shadow: 0.2em 0em 0.75em black;
}

.quote {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 0.05em;
  line-height: 1.3em;
  background-color: #FFFFFF22;
  padding: 1.2em 0.7em 0.8em 1.2em;
  border-style: solid;
  border-width: 0em 0em 0em 0.3em;
  border-color: #FFB55D;
  transition: border-color 0.2s ease;
}

.quote:hover {
  border-color: #F9FF33;
}

.quote > p {
  margin: 0em 0em 0.5em 0em;
}

.profilePicture {
  border-radius: 100%;
  overflow: hidden;
  border-style: solid;
  border-color: white;
  border-width: 0.8em;
  box-shadow: 0em 0.2em 0.6em #00000066;
}

.canvasBanner {
  position: absolute;
  background-color: #333333;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 22.4rem;
  z-index: 1;
}

@media (orientation: portrait) {
  .canvasBanner {
    height: 25.5rem;
  }
}

.contactHeader {
  position: relative;
  background-color: #FFFFFFF4;
  box-shadow: 0em 0.3em #44444455;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: -3.2em;
  border-radius: 0.3rem;
  z-index: 5;
}

@media (orientation: portrait) {
  .contactHeader {
    margin-top: 3em;
    border-radius: 0rem;
  }
}

.contactHeader > h1 {
  margin: -0.5em 0em 0.4em 0em;
}

.contactCard {
  font-size: 0.7em;
}

.contactCard > h2 {
  margin: 0.3em 0em;
}

.contactCard > p {
  margin: 0.4em 0em;
}

.mainContent {
  display: flex;
  flex-direction: row;
}

@media (orientation: portrait) {
  .mainContent {
    flex-direction: column;
  }
}

.mainContent > div {
  padding: 2.8em 1em 4rem 2em;
}

.sideSectionLeft {
  background-color: #B25D5D;
  flex: 3;
  min-width: 12em;
  max-width: 20em;
  color: white;
}

@media (orientation: portrait) {
  .sideSectionLeft {
    max-width: 100%;
  }
}

.sideSectionLeft > ul {
  margin: 0em;
}

.sideSectionLeft > ul > li {
  margin: 0.2em;
}

ul {
  padding: 0em  0em 0em 1em;
}

ul > li {
  padding-left: 0.4em;
  list-style-type: "🧡";
}

.apple {
  list-style-type: "🍎";
}

.android {
  list-style-type: "🤖";
}

.mobile {
  list-style-type: "📱";
}

.reactNative {
  list-style-type: "⚛️";
}

.unity {
  list-style-type: "🔲";
}

.blender {
  list-style-type: "🐵";
}

.unitTests {
  list-style-type: "⚗️";
}

.shader {
  list-style-type: "✨";
}

.tooling {
  list-style-type: "🎬";
}

.vim {
  list-style-type: "✅";
}

.xcode {
  list-style-type: "🔨";
}

.fr {
  list-style-type: "🇫🇷";
}

.en {
  list-style-type: "🇺🇸";
}

.masterSection {
  flex: 5;
}

.noteContainer {
  display: inline-block;
  background-color: grey;
  width: 6em;
  height: 0.5em;
  margin-left: 0.3em;q
}

.flexTable {
  display: flex;
}

.flexTable > p {
  margin: 0.2em 0em;
  padding: 0.3em 0.7em;
}

.description {
  color: grey;
}

.flexTable > .date {
  width: 5em;
  border-style: solid;
  border-width: 0px 1px 0px 0px;
  font-weight: bold;
  flex-shrink: 0;
}

.flexTable > .year {
  width: 3em;
}