@font-face {
  font-family: 'Recoleta';
  src: url("/static/fonts/Recoleta Black.otf");
  font-weight: normal;
  font-style: normal; }

.Path-finder {
  display: flex; }

.Path-text {
  display: flex;
  float: left;
  margin-top: 4rem;
  font-size: 2rem; }

.Path-Text2 {
  margin-bottom: .3rem; }

.Path-Github {
  margin-bottom: 1rem; }

.Github-Link {
  color: white; }

body {
  font-family: 'Recoleta';
  color: #FFF;
  background: #111;
  height: 100%; }

.p5Canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
  pointer-events: none; }

#__next {
  height: 100%;
  width: 77.1%;
  min-width: 259px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

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

html, body {
  height: 95%; }

.Button-StyleA {
  display: flex;
  justify-content: center; }

.Button-CV {
  position: relative;
  display: flex;
  float: right;
  margin-bottom: 1rem; }

.Button-Pro {
  position: relative;
  display: flex;
  float: left; }

.nav-social-image-link {
  display: flex;
  justify-content: space-between;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1.5rem; }

.Homepage-text {
  margin-bottom: .5rem; }

svg {
  display: inline-block;
  width: auto;
  height: 5vw;
  min-height: 2rem;
  max-height: 4rem;
  scale: 0.5; }

.Proj-Title {
  display: flex;
  position: relative;
  justify-content: center;
  margin-bottom: 1rem;
  height: auto; }

svg {
  fill: white; }

svg:hover path {
  fill: #1793D1; }

.Cards {
  max-width: 20rem;
  min-width: 16rem;
  margin: 1rem;
  height: 28rem;
  opacity: 0.8; }

.Cards:hover {
  opacity: 1; }

.ImgMediaCard {
  display: flex;
  height: 25rem;
  width: 100%;
  margin-top: 4rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; }

.MuiTypography-gutterBottom {
  text-align: center; }

.Tech-color {
  color: grey;
  text-align: center; }