body {
   margin: 0px;
   background-color: black;
}

/* colors */

.color-0 {
   stroke: #00FFE5;
}
.light-theme .color-0 {
   stroke: #00ccd4;
}

.color-1 {
   stroke: #FF00D6;
}
.light-theme .color-1 {
   stroke:  #a600ff;
}

.color-2 {
   stroke: #FEFF2D;
}
.light-theme .color-2 {
   stroke: #43dc00;
}

.contrast, .text-box, a {
   color: white;
   stroke: white;
   fill: white;
   border-color: white;
}

.shadow {
   filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.5));
}

.light-theme .contrast, .light-theme .text-box, .light-theme a {
   color: black;
   stroke: black;
   fill: black;
   border-color: black;
}

.light-theme .shadow {
   filter: drop-shadow(0px 0px 6px  rgba(0, 0, 0, 0.5));
}

.light-theme .portfolio #page-content::before, .light-theme .portfolio #page-content::after {
   filter: invert(100%);
}

/* everything else */

path {
   transition: stroke 0.2s, fill 0.2s;
}

p, a, h3, ul {
   transition: color 0.2s;
}

#main-body {
   opacity: 1;
   display: flex;
   flex-direction: column;
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
   transition: background-color 0.2s;
   background-color: black;
}

.light-theme #main-body {
   background-color: white;
}

/* Only vertially center the landing page*/
#main-body.landing {
   justify-content: center;
}

.container {
   display: flex;
   justify-content: center;
   width: 100%;
}

.primary.container {
   height: calc(100% - 40px);
   position: absolute;
   top: 40px;
}

.landing .primary.container {
   height: initial;
   position: initial;
}

#letters {
   width: 912px;
   margin-top: -100px;
   padding-left: 2%;
   user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
}

#letters svg {
   overflow: visible;
}

#letters.loading {
   opacity: 0;
}

.bridge {
   stroke-dashoffset: 280.80615234375;
}

#sun-moon * {
   transition: all 0s;
   user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   stroke-width: 2;
   fill-rule: evenodd;
}

#arrow-wrapper {
   width: 40px;
   height: 30px;
   margin-top: 10px;
   filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.5));
}
.light-theme #arrow-wrapper {
   filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));
}

.arrow {
   fill: none;
   stroke-width: 3;
}

.arrow.side {
   stroke-width: 2;
}

#page-body {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: safe center;
   width: 612px;
   overflow-x: hidden;
}

.game-detail #link-wrapper {
   height: 0px;
   overflow: hidden;
}

#link-row {
   position: relative;
   margin-bottom: 12px;
   display: flex;
   justify-content: space-evenly;
   flex-wrap: wrap;
}

@supports (-ms-ime-align: auto) {
   #link-row {
      justify-content: space-between; /* Edge Fallback */
   }
}

#link-row a {
   display: inline-block;
   font-family: Arial, Helvetica, sans-serif;
   font-style: italic;
   font-size: 2em;
   margin: 2px;
   text-decoration: none;
   filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.5));
}

.light-theme #link-row a {
   filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

@media (max-width: 625px) {
   #link-row a {
      font-size: 1.5em;
   }
}

#divider {
   fill: none;
   stroke-width: 3;
   transition: stroke 0s;
}

.text-box li {
   padding: 0.25em 0;
}

.portfolio #page-content {
   overflow-y: scroll;
   overflow-x: hidden;
   width: calc(100% + 20px);
}

.portfolio #page-content::before {
   content: url(../portfolio/scrollborder.svg);
   width: 620px;
   height: 40px;
   position: fixed;
   transition: filter 0.2s;
   z-index: 1;
}

.portfolio #page-content::after {
   content: url(../portfolio/scrollborder.svg);
   width: 620px;
   height: 40px;
   position: absolute;
   bottom: 0px;
   transform: scale(1, -1);
   transition: filter 0.2s;
}

#page-content div {
   opacity: 1;
}

.text-box {
   font-family: Arial, Helvetica, sans-serif;
   padding: 10px;
}

#game-box {
   /* width: calc(100% + 20px); */
   padding-bottom: 30px;
}

.game-banner {
   margin: 20px 0px;
   transform: translate(10px, 0);
}

.game-banner rect {
   transition: all 0.3s ease-out;
}

.game-banner:hover .desc-clip rect {
   width: 578px;
   height: 160px;
   transform: translate(-10px, -10px) skewX(-11.31deg);
   /* border-radius: 30px; */
   /*fill: transparent;
}

.game-box image:hover {
   opacity: 0.9;*/
   rx: 30px;
   ry: 30px;
}

.desc-overlay text {
   font-family: Arial, Helvetica, sans-serif;
   font-style: italic;
   fill: white;
   stroke: none;
}

.game-name {
   font-size: 2em;
}

#return-arrow {
   position: absolute;
   width: 55px;
   filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.5));
}
.light-theme #return-arrow {
   filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));
}

#return-arrow a {
   position: relative;
   right: 55px;
}

#game-details {
   padding: 30px 0px 40px;
}

.game-title {
   display: flex;
   justify-content: center;
   font-size: 3em;
   font-family: Arial, Helvetica, sans-serif;
   font-style: italic;
   color: white;
   width: 100%;
   text-align: center;
}

.game-info {
   border: 3px solid;
   border-radius: 15px;
   width: calc(100% - 32px);
   margin: 3px;
}

#big-screenshot, #screenshot-selector {
   width: calc(100% - 12px);
   position: relative;
   margin: 0px 6px;
}

#big-screenshot {
   margin-bottom: 6px;
}

.classic #big-screenshot {
   padding-top: 75%;
}

.widescreen #big-screenshot {
   padding-top: 56.25%;
}

.square #big-screenshot {
   padding-top: 100%;
}

#big-screenshot img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.classic #screenshot-selector {
   padding-top: 18.75%;
}

.widescreen #screenshot-selector {
   padding-top: 14%;
}

.square #screenshot-selector {
   padding-top: 25%;
}

#screenshot-selector > * {
   position: absolute;
   text-align: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   cursor: pointer;
}

#screenshot-selector img {
   width: 24%;
   display: inline-block;
   transition: opacity 500ms;
}

#screenshot-selector img.selected {
   opacity: 0.5;
}

#marble-marble, #marble-head {
   transform-origin: center;
}

#light-toggle {
   position: fixed;
   bottom: 4px;
   right: 4px;
   width: 40px;
   height: 40px;
   cursor: pointer;
}