@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400|Ubuntu:300&display=swap);
@import url("https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
:root {
  --primary-color: rgb(218, 65, 165);
  --secondary-color: rgb(12, 154, 154);
  --accent-color: #ff8800;
  --link-color: rgb(109 191 238);
  --link-hover-color: var(--accent-color);
}

:root {
  --primary-color: rgb(218, 65, 165);
  --secondary-color: rgb(12, 154, 154);
  --accent-color: #ff8800;
  --link-color: rgb(109 191 238);
  --link-hover-color: var(--accent-color);
}

#contact_div {
  text-align: center;
}
#contact_div #image_wrapper img {
  /*object-position: center;*/
  width: 40%;
  height: 40%;
}
@media screen and (max-width: 1025px) {
  #contact_div #image_wrapper img {
    width: 50%;
    height: 50%;
  }
}

.title_wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 1em;
  padding-top: 0;
}

.sweet_title {
  order: 2;
  color: white;
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 0.75em;
  text-align: center;
  text-shadow: 3px 1px 1px rgb(12, 154, 154), 2px 2px 1px rgb(218, 65, 165), 4px 2px 1px rgb(12, 154, 154), 3px 3px 1px rgb(218, 65, 165), 5px 3px 1px rgb(12, 154, 154), 4px 4px 1px rgb(218, 65, 165), 6px 4px 1px rgb(12, 154, 154), 5px 5px 1px rgb(218, 65, 165), 7px 5px 1px rgb(12, 154, 154), 6px 6px 1px rgb(218, 65, 165), 8px 6px 1px rgb(12, 154, 154), 7px 7px 1px rgb(218, 65, 165), 9px 7px 1px rgb(12, 154, 154);
}
.sweet_title span {
  display: block;
  position: relative;
}
.sweet_title span:before {
  content: attr(data-text);
  position: absolute;
  text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9, -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;
  z-index: 1;
}
.sweet_title span:nth-child(1) {
  padding-right: 2.25rem;
}
.sweet_title span:nth-child(2) {
  padding-left: 2.25rem;
}

#contact_details {
  padding: 1em;
  width: 40%;
  margin: 0 auto 1rem auto;
  text-align: center;
  display: flex;
  flex-basis: 50%;
  flex-direction: row;
  flex-wrap: wrap;
}
#contact_details > a {
  color: whitesmoke;
  width: 50%;
  height: 100%;
  padding: 1rem;
}
#contact_details > a > svg {
  max-height: 5rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
#contact_details > a > div {
  height: 1em;
}
#contact_details > a:hover {
  color: rgb(218, 65, 165);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
#contact_details > a:hover > svg {
  fill: rgb(12, 154, 154);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

@media (max-width: 961px) and (orientation: portrait) {
  #contact_details {
    width: 100%;
  }
}
@media (min-width: 1025) {
  #contact_details {
    flex-basis: 100%;
  }
}
@media (min-width: 320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width: 481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width: 641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width: 961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width: 1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width: 1281px) { /* hi-res laptops and desktops */ }
.h_iframe iframe {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  border: 1px solid #777777;
}

.h_iframe {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 */
}

.img_row {
  width: 100%;
  display: inline-flex;
}

.img_col {
  flex: 33.33%;
  padding: 1em;
}

.layout {
  display: grid;
  width: 100%;
  gap: 1.5rem;
}

.layout.layout_2 {
  grid-template-columns: repeat(2, 1fr);
}

.layout.layout_3 {
  grid-template-columns: repeat(3, 1fr);
}

.layout.layout_4 {
  grid-template-columns: repeat(4, 1fr);
}

.layout.layout_5 {
  grid-template-columns: repeat(5, 1fr);
}

.layout.layout_6 {
  grid-template-columns: repeat(6, 1fr);
}

.layout_col {
  padding: 0.5rem;
}

/* FROM EVSM ARTICLE ---- REWRITE LATER */
.screenshots {
  display: flex;
  width: 70%;
  margin: 0 15% 0 15%;
}

.screenshots_wide {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 98%;
  margin: 0 1% 0 1%;
}

.screenshots_wide > div {
  flex: 33.3%;
}

.screenshot_wrapper {
  display: block;
}

.screenshots_wide > .screenshot_wrapper,
.screenshots > .screenshot_wrapper {
  /*flex: auto; !* risky? *!*/
  flex: 33%;
  text-align: center;
  /*width: 100%;*/
  /*clear: both;*/
}

.flex_50p {
  flex: 50%;
}

.screenshots_description {
  text-align: center;
  margin-top: 0.2em;
}

.screenshots a,
.screeshots_wide a,
.screeshots_wide video {
  display: block;
  padding: 5px;
  width: 100%;
}

.screenshots img,
.screenshots_wide img {
  border: 2px solid #3d3d3d;
  width: 100%;
  transition: 0.15s all ease;
}

.screenshots a:hover img,
.screenshots_wide a:hover img {
  border: 2px solid white;
  width: 100%;
}

.author {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 2em;
}

.shortcuts {
  list-style: none;
}

.measurements {
  border: 1px solid #1d1b12;
}

.measurements td {
  border: 1px solid #1d1b12;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1em 0 1em 0;
  width: 100%;
}

.tg td {
  padding: 0.2em 0.3em 0.4em 0.3em;
  overflow: hidden;
  word-break: normal;
  border: 1px solid black;
}

.tg th {
  padding: 0.5em;
  overflow: hidden;
  word-break: normal;
  border: 1px solid black;
}

.tg .tg-c3ow {
  border-color: inherit;
  text-align: center;
  vertical-align: top;
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  .tg {
    width: auto !important;
  }
  .tg col {
    width: auto !important;
  }
  .tg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto 0px;
  }
}
.callout-heading {
  position: relative;
  display: inline-block;
  font-weight: 600;
  padding-bottom: 0.15em;
  cursor: pointer;
}
.callout-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--accent-color, #ff8800), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.callout-heading:hover::after, .callout-heading:focus::after {
  transform: scaleX(1);
}

@media (prefers-color-scheme: dark) {
  .callout-heading::after {
    background: linear-gradient(to right, var(--accent-color, #ffaa33), transparent);
  }
}
.callout-quote {
  position: relative;
  font-style: italic;
  background: var(--quote-bg, #fafafa);
  border-left: 4px solid var(--accent-color, #ff8800);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  border-radius: 4px;
  color: var(--quote-text, #333);
  transition: background 0.4s ease, transform 0.4s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.callout-quote::before {
  content: "❝";
  position: absolute;
  top: -0.6rem;
  left: 0.6rem;
  font-size: 3rem;
  opacity: 0.12;
  color: var(--accent-color, #ff8800);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.callout-quote footer {
  display: block;
  font-style: normal;
  font-weight: 600;
  margin-top: 0.5rem;
  color: var(--accent-color, #ff8800);
}
.callout-quote:hover {
  background: var(--quote-bg-hover, #fff);
  transform: translateY(-2px);
}
.callout-quote:hover::before {
  opacity: 0.25;
  transform: translateY(-4px);
}

@media (prefers-color-scheme: dark) {
  .callout-quote {
    background: var(--quote-bg-dark, #1c1c1c);
    color: var(--quote-text-dark, #ddd);
    border-left-color: var(--accent-color, #ffaa33);
  }
  .callout-quote::before {
    color: var(--accent-color, #ffaa33);
  }
  .callout-quote footer {
    color: var(--accent-color, #ffaa33);
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in:is(:in-view) {
  animation: fade-up 0.8s ease forwards;
}

.floating-background {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: #0d1117;
  color: #fff;
}
.floating-background .floating-shape {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  animation: float 12s ease-in-out infinite alternate;
}
.floating-background .shape1 {
  background: radial-gradient(circle, var(--accent-color), transparent 70%);
  top: 10%;
  left: 15%;
  animation-delay: 0s;
}
.floating-background .shape2 {
  background: radial-gradient(circle, #00b7ff, transparent 70%);
  top: 40%;
  left: 60%;
  animation-delay: 3s;
}
.floating-background .shape3 {
  background: radial-gradient(circle, #b144ff, transparent 70%);
  top: 70%;
  left: 30%;
  animation-delay: 6s;
}
.floating-background .floating-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    transform: translateY(-20px) translateX(15px) scale(1.05);
  }
  100% {
    transform: translateY(20px) translateX(-15px) scale(0.95);
  }
}
@media (prefers-color-scheme: light) {
  .floating-background {
    background: #f7f7f7;
    color: #222;
  }
  .floating-background .floating-shape {
    opacity: 0.15;
    filter: blur(50px);
  }
}
:root {
  --primary-color: rgb(218, 65, 165);
  --secondary-color: rgb(12, 154, 154);
  --accent-color: #ff8800;
  --link-color: rgb(109 191 238);
  --link-hover-color: var(--accent-color);
}

nav {
  display: inline-block;
  color: white;
  float: right;
  width: 50%;
  height: 100%;
}

#admin_nav {
  display: block;
  float: none;
  width: 100%;
  height: 5rem;
}

nav > ul, #admin_nav > ul {
  list-style-type: none;
  height: 100%;
  float: none;
  display: flex;
  flex-basis: 25%;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
nav > ul > a, #admin_nav > ul > a {
  height: 100%;
  width: 100%;
  display: inline;
  padding: 1rem 0;
  width: 25%;
  height: 100%;
  text-align: center;
}

.navbar_card {
  position: relative;
  outline: 0;
  overflow: hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition: 0.08s ease-in;
  -o-transition: 0.08s ease-in;
  -ms-transition: 0.08s ease-in;
  -moz-transition: 0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
  -webkit-transition: all 150ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.navbar_card:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar_card:after {
  content: "";
  position: absolute;
  background: var(--secondary-color);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -2;
  -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar_card:hover {
  color: white;
}

.navbar_card:hover:before {
  opacity: 0.8;
}

.navbar_card:hover:after {
  top: 0;
}

@media screen and (max-width: 641px) and (orientation: portrait), screen and (max-width: 481px) and (orientation: landscape) {
  nav, #admin_nav {
    float: none;
    width: 100%;
  }
}
#square_container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  /*flex-basis: calc(25% - 10px);*/
  flex-basis: 16.666%;
  /*margin: 5px;*/
  /*border: 1px solid;*/
  box-sizing: border-box;
}
@media (max-width: 1559px) {
  .square {
    flex-basis: 25%;
  }
}
@media (max-width: 1023px) {
  .square {
    flex-basis: 33.333%;
  }
}
@media (max-width: 767px) {
  .square {
    flex-basis: 50%;
  }
}
@media (max-width: 319px) {
  .square {
    flex-basis: 100%;
  }
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.square .content img {
  position: absolute;
  object-fit: cover;
  object-position: left;
  /*object-position: center;*/
  width: 100%;
  height: 100%;
  transition: 0.5s ease;
  top: 0;
  left: 0;
}

.text {
  color: white;
  font-size: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  -ms-transform: translate(-50%, -20%);
  text-align: center;
  transition: 0.2s opacity linear;
  transition: 0.15s transform ease-in-out;
  opacity: 0;
}

.image_overlay {
  position: absolute;
  top: 0;
  left: 0;
  /*border: solid red 1px;*/
  background-color: rgba(0, 0, 0, 0.5);
}

.content:hover .text {
  opacity: 0.9;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.content:hover img {
  opacity: 0.3;
}

.img_overlay {
  pointer-events: none;
}

.content .img_overlay {
  opacity: 0;
}

.content:hover .img_overlay {
  opacity: 1;
}

@media (min-width: 320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width: 481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width: 641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width: 961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width: 1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width: 1281px) { /* hi-res laptops and desktops */ }
:root {
  --primary-color: rgb(218, 65, 165);
  --secondary-color: rgb(12, 154, 154);
  --accent-color: #ff8800;
  --link-color: rgb(109 191 238);
  --link-hover-color: var(--accent-color);
}

h1.project_title {
  padding-top: 1rem;
  font-size: 5rem;
  text-align: center;
  color: white;
}

.project_body h1 {
  font-size: 4rem;
  margin-top: 2rem;
  padding: 2rem 0;
  text-align: center;
}
.project_body h1 > a {
  color: white;
}

h2.project_title, h3.project_title, h4.project_title, h5.project_title, h6.project_title {
  color: rgb(195, 0, 127);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  text-decoration: none;
  color: rgb(195, 0, 127);
}
h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover {
  color: rgb(195, 0, 127);
}

:root {
  --primary-color: rgb(218, 65, 165);
  --secondary-color: rgb(12, 154, 154);
  --accent-color: #ff8800;
  --link-color: rgb(109 191 238);
  --link-hover-color: var(--accent-color);
}

#hide_if_not_top.disabled {
  pointer-events: none;
  cursor: default;
}
#hide_if_not_top > li {
  opacity: 0;
}

.project_nav {
  position: -webkit-sticky;
  position: sticky;
  overflow-y: scroll;
  overflow-x: hidden;
  top: 10rem;
  width: 15%;
  height: auto;
  float: left;
  display: block;
  text-align: right;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.project_nav ul {
  list-style: none;
  padding-right: 2rem;
}
.project_nav ul li {
  font-weight: 300;
  padding: 1rem;
}
.project_nav ul a {
  position: relative;
  display: block; /* ensures underline fits text width */
  font-size: 100%;
  color: whitesmoke;
  font-family: "Roboto", Georgia, serif;
  text-decoration: none;
  transition: color 0.3s ease;
}
.project_nav ul a::after {
  content: "";
  position: absolute;
  right: 0; /* align underline with right edge (since text is right-aligned) */
  bottom: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(to left, var(--accent-color), transparent);
  transition: width 0.5s ease;
}
.project_nav ul a:hover::after {
  width: 100%;
  right: 0; /* animate leftward expansion */
}
.project_nav ul a:hover {
  color: var(--accent-color);
}
.project_nav::-webkit-scrollbar {
  width: 0px;
}
.project_nav::-webkit-scrollbar-thumb {
  background: #FF0000;
}
@media (max-width: 1559px) {
  .project_nav {
    display: none;
  }
}

#main_div video {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.article_img {
  width: 100%;
  height: auto;
}

#main_div > img {
  width: 100% !important;
  height: auto;
  border: 1px solid #777777;
}

#project_detail_header img {
  object-fit: cover;
  object-position: left;
  width: 100%;
  height: 6em;
}

#main_div ul {
  list-style-type: circle;
}

.software_ul {
  list-style: none;
  display: flex;
  height: 3rem;
}

.software_ul > li {
  display: inline-block;
  width: auto;
  height: 3rem;
  margin: 0 1rem;
}

/*.software_ul li img {*/
/*}*/
.sw_icon {
  width: auto;
  height: 3rem;
  /*object-fit: cover;*/
  /*object-position: center;*/
  vertical-align: middle;
}

:root {
  --primary-color: rgb(218, 65, 165);
  --secondary-color: rgb(12, 154, 154);
  --accent-color: #ff8800;
  --link-color: rgb(109 191 238);
  --link-hover-color: var(--accent-color);
}

/* --- Container --- */
.blog_post_container {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

/* --- Post Card --- */
.blog_post_square {
  display: grid;
  grid-template-rows: auto 1fr;
  background-color: #222;
  border-radius: 1.5em;
  border: 1px solid rgb(60, 60, 60);
  overflow: hidden;
  flex-basis: 31.333%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  margin: 1em 0;
}
.blog_post_square:hover {
  border-color: #777;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 1281px) {
  .blog_post_square {
    flex-basis: 46%;
  }
}
@media screen and (max-width: 481px) {
  .blog_post_square {
    flex-basis: 100%;
  }
}

.sidebar {
  float: left;
  margin-right: 2em;
  width: 10%;
  display: block;
}
.sidebar a {
  text-decoration: none;
}

@media (max-width: 1025px) {
  .sidebar {
    display: none;
  }
}
/* --- Image --- */
.blog_post_image {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.blog_post_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease;
}
.blog_post_image .img_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.blog_post_image:hover img:first-child {
  transform: scale(1.05);
  opacity: 0.7;
}
.blog_post_image:hover .img_overlay {
  opacity: 1;
}

/* --- Content --- */
.blog_post_content {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 1.2em;
  color: rgb(190, 190, 190);
}

/* --- Title --- */
.blog_post_title {
  font-size: 1.2em;
  text-align: center;
  padding-bottom: 0.6em;
}
.blog_post_title a {
  color: rgb(230, 230, 230);
  text-decoration: none;
}
.blog_post_title a:hover {
  color: white;
}

/* --- Brief --- */
.blog_post_brief {
  font-size: 1em;
  line-height: 1.4;
  color: rgb(172, 169, 163);
  margin-bottom: 0.8em;
}

/* --- Tags --- */
.blog_post_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 0.8em;
}

.blog_post_tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border-radius: 1em;
  background-color: rgb(14, 68, 108);
  color: white;
  font-size: 0.8em;
  padding: 0.3em 0.8em;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.blog_post_tag:hover {
  background-color: cyan;
  border: 2px solid white;
}

.blog_post_tag img {
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
  display: inline-block;
}

/* --- Next/Previous Post Links --- */
.next_blog_post_section {
  margin: 1em 15%;
  width: 70%;
  height: 4em;
  padding: 0;
  position: relative;
}
.next_blog_post_section > * {
  display: inline-block;
  width: calc(50% - 0.5em);
  margin: 0 auto;
  position: absolute;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  border-radius: 2px;
  padding: 1em;
}
.next_blog_post_section > a.previous_post {
  margin-right: 0;
  left: 0;
}
.next_blog_post_section > a.next_post {
  right: 0;
  margin-left: 0;
  text-align: right;
}
.next_blog_post_section > a {
  color: rgb(200, 200, 200);
}
.next_blog_post_section > a:hover {
  color: white;
  background-color: rgb(12, 154, 154);
}
@media screen and (max-width: 1281px) {
  .next_blog_post_section {
    width: 90%;
    margin: 1em 5%;
  }
}
@media screen and (max-width: 1025px) {
  .next_blog_post_section {
    width: 100%;
    margin: 1em 0;
  }
}

/* --- Date --- */
.blog_post_date {
  font-size: 0.8em;
  color: rgb(110, 110, 110);
  text-align: right;
}

.blog_post_date_banner {
  background-color: #111;
  color: rgb(140, 140, 140);
  text-align: center;
  padding: 0.5em 0;
  width: 20%;
  margin: 2em auto;
  border-radius: 1em;
  border: 1px solid rgb(60, 60, 60);
}

#projects_container {
  display: flex;
  flex-wrap: wrap;
}

.project_square {
  position: relative;
  /*flex-basis: calc(25% - 10px);*/
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  /*border: 1px solid;*/
}

.project_square::before {
  content: "";
  display: block;
  padding-top: 60%;
}

.project_square .project_content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.project_square .project_content img, video {
  position: absolute;
  object-fit: cover;
  object-position: left;
  /*object-position: center;*/
  width: 100%;
  height: 100%;
  transition: 0.5s ease;
  top: 0;
  left: 0;
  border: 1px solid #222222;
  /* IE11 */
  /*height: auto; */
}

.project_thumbnail_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  width: 100%;
  height: auto;
}

.project_text {
  text-shadow: 2px 2px 1px #000000;
  color: white;
  font-size: 1.6em;
  font-weight: 100;
  position: absolute;
  top: 17%;
  left: 7%;
  text-align: center;
  opacity: 0;
  /*transition: opacity 1.0s ease-in-out 0.0s;*/
  /*-webkit-transition: -webkit-transform 0.3s ease-in-out 1.0s;*/
  /*-moz-transition: -moz-transform 0.3s ease-in-out 1.0s;*/
  /*-o-transition: -o-transform 0.3s ease-in-out 1.0s;*/
  /*transition: transform 0.3s ease-in-out 1.0s;*/
}

.project_content:hover .project_text {
  opacity: 0.95;
  transform: translate(0, -0.7em);
  /*-ms-transform: translate(-50%, -50%);*/
  transition: 0.4s ease-in-out;
}

.project_description {
  text-shadow: 2px 2px 1px #000000;
  color: white;
  font-size: 1em;
  font-weight: 100;
  position: absolute;
  top: 30%;
  left: 8%;
  right: 8%;
  /*transform: translate();*/
  /*-ms-transform: translate(-50%, -20%);*/
  text-align: justify;
  opacity: 0;
  transition: 0.5s ease-in-out;
}

.project_content:hover .project_description {
  opacity: 0.95;
  /*transform: translate(0, -0.5em);*/
  /*-ms-transform: translate(-50%, -50%);*/
  transition: 1s ease-in-out;
  transition-delay: 0.2s;
}

.project_content:hover img {
  opacity: 0.2;
  border: 1px solid #777777;
}

.project_content .img_overlay {
  opacity: 0;
  /*-webkit-filter: invert(1);*/
  /*filter: invert(1);*/
}

.project_content:hover .img_overlay {
  opacity: 1;
}

.static {
  position: absolute;
  background: white;
}

.static:hover {
  opacity: 0;
}

@media (hover: none) {
  /* Primary Input doesn't respond to hover at all, even partially (ie: there is no pointing device) */
  .project_content img {
    border: 1px solid #ebebeb;
    opacity: 0.8;
  }
  .project_content .img_overlay {
    opacity: 1;
  }
  .project_text {
    opacity: 0.95;
  }
  .project_description {
    opacity: 0.95;
  }
}
@media (hover: hover) {
  /* Primary Input responds to hover fully, such as a mouse or a Nintendo Wii controller */
}
@media screen and (max-width: 1281px) {
  .project_square {
    font-size: 1em;
    flex-basis: calc(50% - 10px);
    font-size: 0.8em;
  }
  .project_description {
    top: 40%;
  }
}
@media screen and (max-width: 481px) {
  .project_square {
    flex-basis: calc(100% - 10px);
  }
}
@media (min-width: 320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width: 481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width: 641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width: 961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width: 1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width: 1281px) { /* hi-res laptops and desktops */ }
:root {
  --primary-color: rgb(218, 65, 165);
  --secondary-color: rgb(12, 154, 154);
  --accent-color: #ff8800;
  --link-color: rgb(109 191 238);
  --link-hover-color: var(--accent-color);
}

header {
  display: block;
  /*position: -webkit-sticky;*/
  /*position: sticky;*/
  top: 0;
  background: rgb(23, 23, 23);
  width: 100%;
  font-size: 1.4em;
  border-bottom: 1px solid #777777;
  /*border: 1px solid red;*/
  /*height: auto;*/
  height: 5rem;
  margin: 0;
  z-index: 10;
}

header a {
  color: white;
}

header a:visited {
  color: white;
}

header a:hover {
  color: white;
}

.main_link {
  height: 100%;
  /*font-size: 1.5em;*/
  /*padding: 1em;*/
  display: inline-block;
  margin-left: 2rem;
  margin-top: 2rem;
}

.main_link img {
  height: 2em;
  width: auto;
  margin: 0;
  padding: 0;
  display: inline-block;
}

@media screen and (max-width: 641px) and (orientation: portrait), screen and (max-width: 481px) and (orientation: landscape) {
  .main_link {
    display: none;
    visibility: hidden;
    position: absolute;
    margin: 0;
  }
}
@media screen and (max-width: 641px) and (orientation: landscape) {
  header {
    margin: 0.8em 0 0.2em 0;
    font-size: 1em;
  }
}
@media screen and (max-width: 481px) {
  header {
    margin: 0.8em 0 0.2em 0;
    font-size: 1em;
  }
}
@media screen and (max-width: 320px) {
  header {
    margin-bottom: 0.4em;
    font-size: 0.75em;
  }
}
@media (min-width: 320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width: 481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width: 641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width: 961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width: 1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width: 1281px) { /* hi-res laptops and desktops */ }
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  /*padding-top: 100px; !* Location of the box *!*/
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  /*overflow: auto; !* Enable scroll if needed *!*/
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal_content {
  /*filter: gray; !* IE6-9 *!*/
  /*-webkit-filter: grayscale(1); !* Google Chrome, Safari 6+ & Opera 15+ *!*/
  /*filter: grayscale(1); !* Microsoft Edge and Firefox 35+ *!*/
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*width: auto;*/
  /*height: auto;*/
  /*margin: auto;*/
  display: block;
  /*width: 80%;*/
  /*max-width: 700px;*/
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #d74700;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}
/* Next & previous buttons */
.prev,
.next {
  opacity: 0.4;
  transition: 0.2s ease opacity;
  background-color: black;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 1em; /* enlarge clickable area, move away from sides */
  color: white;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  opacity: 1;
}

.img_detail_top {
  background-color: black;
  height: 80vh;
  width: 100%;
}

.img_detail_container {
  position: relative;
  background: transparent; /* ← not black */
  width: 100%;
  height: 100%;
  /*margin-bottom: 1em;*/
  overflow: hidden;
  transition: background 5s cubic-bezier(0.63, 0.87, 0.33, 0.01); /* smooth fade-in */
}

/* --- Blobs --- */
.img_detail_container .color-blob {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.18;
  animation: blobFloat 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0; /* sit behind image/info */
}

@keyframes blobFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(10px, -10px) scale(1.05);
  }
  100% {
    transform: translate(-10px, 10px) scale(0.95);
  }
}
.img_detail {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.5s ease, transform 0.3s ease;
}

.img_info {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  right: 1em;
  bottom: 1em;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 1em;
  padding: 2em;
}

/* CLEAN SOLUTION TO THE PROBLEM - NOT COMPATIBLE WITH IE */
/*.img_detail_container {*/
/*background-color: black;*/
/*position: relative;*/
/*width: 100%;*/
/*height: 100%;*/
/*!*float: left;*!*/
/*margin-bottom: 0.5em;*/
/*}*/
/*.img_detail {*/
/*width: 100%;*/
/*height: 100%;*/
/*object-fit: contain;*/
/*}*/
/* Next & previous buttons */
.prev,
.next {
  opacity: 0.2;
  transition: 0.2s ease opacity;
  background-color: black;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 1em; /* enlarge clickable area, move away from sides */
  color: white;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
@media screen and (max-width: 1025px) {
  .prev,
  .next {
    display: none;
  }
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  opacity: 1;
}

.thumb_square {
  position: relative;
  border: 1px solid #222222;
  background-color: black;
  /*flex-basis: calc(25% - 10px);*/
  flex-basis: 11.111%;
  /*margin: 5px;*/
  /*border: 1px solid;*/
  box-sizing: border-box;
}

.thumb_square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.thumb_square .content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.thumb_square .content img {
  position: absolute;
  object-fit: cover;
  object-position: left;
  /*object-position: center;*/
  width: 100%;
  height: 100%;
  transition: 0.5s ease;
  top: 0;
  left: 0;
}

.img_detail_thumbnail {
  margin: 0;
  padding: 0;
  /*display: inline-block;*/
  background-color: #90bce5;
  border: 1px solid red;
  width: 20%;
  height: 100%;
}

@media (min-width: 320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width: 481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width: 641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width: 961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width: 1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width: 1281px) { /* hi-res laptops and desktops */ }
:root {
  --primary-color: rgb(218, 65, 165);
  --secondary-color: rgb(12, 154, 154);
  --accent-color: #ff8800;
  --link-color: rgb(109 191 238);
  --link-hover-color: var(--accent-color);
}

:root {
  --theme-color-a: #5df;
  --theme-color-b: #f39;
  --text-color: #000;
  --text-color--lighter: #555;
  --background-color: #fff;
  --background-color-secondary: #eee;
  --background-color-secondary-darkened: #ccc;
  --xxxs: 0.1rem;
  --xxs: 0.2rem;
  --xs: 0.3rem;
  --s: 0.5rem;
  --m: 1rem;
  --l: 1.2rem;
  --xl: 1.5rem;
  --xxl: 3rem;
  --xxxl: 6rem;
}

.shiki {
  border-radius: var(--m);
  overflow: auto;
  font-size: var(--l);
  line-height: 1.2;
  position: relative;
  /* Large Devices, Wide Screens */
  /* Small Devices, Tablets */
}
@media only screen and (max-width: 1200px) {
  .shiki {
    font-size: var(--l);
  }
}
@media only screen and (max-width: 768px) {
  .shiki {
    font-size: var(--l);
  }
}

.shiki code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: var(--s) 0;
}

.language-id {
  color: #ccc;
  padding: var(--xs) var(--m);
  background: rgba(255, 255, 255, 0.1333333333);
  font-size: var(--l);
  position: sticky;
  left: 0;
}

.line.sh--highlight,
.line.sh--add.sh--highlight,
.line.sh--remove.sh--highlight {
  background: rgba(255, 255, 0, 0.1333333333);
  box-shadow: inset var(--s) 0 0 #ff0;
}

.sh--focus ~ .line:not(.sh--focus),
.line:not(.sh--focus):has(~ .sh--focus) {
  filter: blur(1.5px);
}

.shiki:hover .line {
  filter: blur(0);
}

.line {
  transition: filter 0.3s;
  display: inline-block;
  width: 100%;
  padding: 0 var(--l);
}

.shiki {
  counter-reset: step;
}

.shiki::-webkit-scrollbar {
  height: 1em;
}

.shiki::-webkit-scrollbar-thumb {
  background: rgb(60, 60, 60);
  border-radius: 0.5em;
}

.shiki::-webkit-scrollbar-track {
  background: transparent;
}

.shiki .line::before {
  content: counter(step);
  counter-increment: step;
  width: var(--xxl);
  margin-right: var(--s);
  padding-right: var(--s);
  display: inline-block;
  text-align: right;
  color: rgba(115, 138, 148, 0.6);
  border-right: var(--xxxs) solid rgba(255, 255, 255, 0.0666666667);
}

.shiki .line.sh--add::before {
  content: "+";
  color: #487e02;
}

.shiki .line.sh--remove::before {
  content: "-";
  color: #f00;
}

.line.sh--add {
  background: rgba(72, 126, 2, 0.0980392157);
  box-shadow: inset var(--xxs) 0 0 #487e02;
}

.line.sh--remove {
  background: rgba(136, 0, 0, 0.2666666667);
  box-shadow: inset var(--xxs) 0 0 #800;
}

.line.sh--updated {
  background: rgba(0, 0, 255, 0.1333333333);
  box-shadow: inset var(--xxs) 0 0 rgba(0, 0, 255, 0.5333333333);
}

:root {
  --admonition-border-radius: 0.4em;
  --note-title-background-color: #305070;
  --note-body-background-color: #303d4f;
  --note-text-color: #bfefff;
  --warning-title-background-color: #865E06;
  --warning-body-background-color: #72520D;
  --warning-text-color: #ffeeaf;
  --error-title-background-color: #55191A;
  --error-body-background-color: #70232C;
  --error-text-color: #ffe8e8;
  --tip-title-background-color: #336648;
  --tip-body-background-color: #28382d;
  --tip-text-color: #dfd;
}

.admonition {
  border-radius: var(--admonition-border-radius);
  box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.29);
}
.admonition .title {
  padding: var(--admonition-border-radius);
  border-top-left-radius: var(--admonition-border-radius);
  border-top-right-radius: var(--admonition-border-radius);
  margin: 0;
  margin-top: 1em;
  text-transform: capitalize;
}
.admonition .title::before {
  display: inline-block;
  width: 25px;
  padding-right: 5px;
  text-align: center;
}
.admonition .content {
  padding: var(--admonition-border-radius);
  margin: 0 var(--admonition-border-radius) calc(3 * var(--admonition-border-radius));
}
.admonition.note {
  color: var(--note-text-color);
  background-color: var(--note-body-background-color);
}
.admonition .note.title {
  background-color: var(--note-title-background-color);
}
.admonition .note.title::before {
  content: "🧾";
}
.admonition.warning {
  color: var(--warning-text-color);
  background-color: var(--warning-body-background-color);
}
.admonition .warning.title {
  background-color: var(--warning-title-background-color);
}
.admonition .warning.title::before {
  content: "⚠️";
}
.admonition.error {
  color: var(--error-text-color);
  background-color: var(--error-body-background-color);
}
.admonition .error.title {
  background-color: var(--error-title-background-color);
}
.admonition .error.title::before {
  content: "❗";
}
.admonition.tip {
  color: var(--tip-text-color);
  background-color: var(--tip-body-background-color);
}
.admonition .tip.title {
  background-color: var(--tip-title-background-color);
}
.admonition .tip.title::before {
  content: "💡";
}

.full-width {
  width: 100%;
}

body {
  font-size: 1.6rem;
  color: whitesmoke;
  font-family: "Roboto", Georgia, serif;
  background-color: #171717;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {
  display: inline;
}

ul.breadcrumb li + li:before {
  padding: 8px;
  color: black;
  content: "/ ";
}

.pagination {
  position: relative;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  border-radius: 2px;
}

.pagination li {
  list-style-type: none;
  display: inline-block;
}

.pagination li a {
  padding: 20px 25px;
  position: relative;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
}

.pagination li a:hover,
.pagination li.active a {
  background: rgba(255, 255, 255, 0.2);
}

a.disabled {
  pointer-events: none;
  cursor: default;
  background-color: rgb(12, 154, 154);
}

.button {
  border-top: 1px solid #96d1f8;
  background: rgb(218, 65, 165);
  background: -webkit-gradient(linear, left top, left bottom, from(#008c83), to(#008279));
  background: -webkit-linear-gradient(top, #008c83, #008279);
  background: -moz-linear-gradient(top, #008c83, #008279);
  background: -ms-linear-gradient(top, #008c83, #008279);
  background: -o-linear-gradient(top, #008c83, #008279);
  padding: 9px 18px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: rgb(0, 0, 0) 0 1px 0;
  -moz-box-shadow: rgb(0, 0, 0) 0 1px 0;
  box-shadow: rgb(0, 0, 0) 0 1px 0;
  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
  color: #ffffff;
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  vertical-align: middle;
}

.button:hover {
  border-top-color: #28597a;
  background: #28597a;
  color: #ffd4ff;
}

.button:active {
  border-top-color: #1b435e;
  background: #1b435e;
}

.notice {
  color: #a9191b;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  visibility: hidden;
}

.centered {
  /*display: block;*/
  width: 100%;
  text-align: center;
}

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: var(--width);
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll; /* force vertical scrollbar so the page doesn't jump around */
  overflow-x: hidden;
}

*, *:before, *:after {
  box-sizing: inherit;
}

#wrapper {
  /*border: 2px solid red;*/
  /*display: table;*/
  /*display: block;*/
  /*height: 100%;*/
  /*height: 100vh;*/
  /*overflow: visible;*/
  width: 80%;
  margin: 0 10% 0 10%;
  /*overflow: hidden;*/
  /*background-color: transparent;*/
  /*background-color: blue;*/
  /*background: rgb(23, 23, 23);*/
  z-index: 1;
}
@media (max-width: 1559px) {
  #wrapper {
    width: 100%;
    margin: 0;
  }
}

/*=== Main === */
#main_div {
  border: 0.1px solid black;
  background-color: #242424;
  color: #CCCCCC;
  /*line-height: 2.0;*/
  /*position: relative;*/
  margin: 0 15%;
  /*margin: 0 0 0 10%;*/
  width: 70%;
  /*margin-right: 15%;*/
  /*float: right;*/
  padding: 2rem 5% 5% 5%;
  -webkit-box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.6);
}
@media (max-width: 1559px) {
  #main_div {
    margin: 0 5% 0 5%;
    width: 90%;
  }
}
@media (max-width: 1023px) {
  #main_div {
    margin: 0;
    width: 100%;
  }
}

#main_div p, li {
  font-weight: 400;
  line-height: 1.5;
  padding-left: 0.5em;
  padding-right: 0.8em;
}

footer {
  margin: 1em 0 1em 0;
  width: 100%;
  text-align: center;
  clear: both;
}

.fade_in_100, .fade_in_200, .fade_in_300, .fade_in_400, .fade_in_500 {
  display: inherit;
}

.profile_picture_wrapper {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: 0 auto 0 auto;
  position: relative;
  overflow: hidden;
}

.profile_picture {
  height: auto;
  width: 100%;
  display: inline;
  margin: 0 auto;
}

a, a:hover, a:link, a:visited {
  text-decoration: none !important;
}

a {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.font_lightest {
  font-weight: 100;
}

@media screen and (max-width: 641px) {
  h1 {
    font-size: 110%;
  }
  h2 {
    font-size: 105%;
  }
  h3 {
    font-size: 100%;
  }
}
.grid {
  width: 14rem;
  margin: 0 auto 0 auto;
  display: grid;
  grid-template-columns: 7rem 7rem;
  grid-template-rows: 7rem;
  /*grid-gap: 1rem;*/
  grid-auto-flow: dense;
}

.grid > * {
  color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 2px solid black;*/
  font-size: 3em;
}
.grid > * > svg {
  max-height: 5rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.grid > * > div {
  height: 1em;
}
.grid > *:hover {
  color: rgb(218, 65, 165);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.grid > *:hover > svg {
  fill: rgb(12, 154, 154);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.retro_text {
  background: linear-gradient(to top, rgb(218, 65, 165) 0%, rgb(12, 154, 154) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tangerine-regular {
  font-family: "Tangerine", cursive;
  font-weight: 400;
  font-style: normal;
}

.tangerine-bold {
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-style: normal;
}

blockquote {
  width: 90%;
  margin: 1em auto;
  font-family: Open Sans;
  font-style: italic;
  color: #555555;
  padding: 1em 2em;
  border-left: 8px solid var(--primary-color);
  line-height: 1.6;
  position: relative;
  background: #EDEDED;
}

blockquote::before {
  font-family: Arial;
  content: "“";
  color: var(--primary-color);
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

blockquote::after {
  content: "";
}

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