/* line 1, ../../../../../Desktop/Portfolio/scss/styles.scss */
* {
  margin: 0;
  padding: 0; }

/* line 6, ../../../../../Desktop/Portfolio/scss/styles.scss */
html {
  scroll-behavior: smooth; }

/* line 10, ../../../../../Desktop/Portfolio/scss/styles.scss */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  margin: 0;
  background-color: #f2f2f2; }

/* line 18, ../../../../../Desktop/Portfolio/scss/styles.scss */
canvas {
  width: 100%; }

/* line 22, ../../../../../Desktop/Portfolio/scss/styles.scss */
p {
  font-size: 1.3em;
  font-weight: 500; }

/* line 27, ../../../../../Desktop/Portfolio/scss/styles.scss */
#frontpage a {
  width: 30%;
  height: 10%;
  position: absolute;
  bottom: 10%;
  left: 35%; }

/* line 35, ../../../../../Desktop/Portfolio/scss/styles.scss */
#loader {
  width: 100%;
  height: 100%;
  background-color: #0c0c0c;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white; }

/* line 46, ../../../../../Desktop/Portfolio/scss/styles.scss */
.spinner {
  width: 80px;
  height: 80px;
  animation: coin-spin 2.4s  infinite; }

@keyframes coin-spin {
  0%, 100% { }
  0% {
    transform: rotateY(0deg); }
  50% {
    transform: rotateY(180deg); }
  100% {
    transform: rotateY(360deg); } }

/* line 69, ../../../../../Desktop/Portfolio/scss/styles.scss */
.menu-bar {
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 25%;
  margin-right: 25%;
  width: 50%;
  height: 4vh;
  border-bottom: 3px solid black; }
  /* line 79, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .menu-bar a {
    text-decoration: none;
    color: #141414;
    font-size: 1.2em;
    font-weight: bold;
    font-family: monospace;
    mix-blend-mode: difference; }

/*#bottom-gradient{
    width: 100%;
    height: 10vh;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
    position: fixed;
    bottom: 0;
}*/
/* line 98, ../../../../../Desktop/Portfolio/scss/styles.scss */
.mute img {
  bottom: 35px;
  right: 35px;
  position: absolute;
  height: 30px; }

/* line 105, ../../../../../Desktop/Portfolio/scss/styles.scss */
.hide {
  display: none; }

/* line 109, ../../../../../Desktop/Portfolio/scss/styles.scss */
#Hello {
  font-family: monospace;
  text-align: center;
  font-size: 6em;
  color: #303030; }

/* line 116, ../../../../../Desktop/Portfolio/scss/styles.scss */
#portrait {
  width: 100%; }

/* line 120, ../../../../../Desktop/Portfolio/scss/styles.scss */
blink {
  -webkit-animation: 21s linear infinite condemned_blink_effect;
  /* for Safari 4.0 - 8.0 */
  animation: 1s linear infinite condemned_blink_effect; }

/* for Safari 4.0 - 8.0 */
@-webkit-keyframes condemned_blink_effect {
  0% {
    visibility: hidden; }
  50% {
    visibility: hidden; }
  100% {
    visibility: visible; } }

@keyframes condemned_blink_effect {
  0% {
    visibility: hidden; }
  50% {
    visibility: hidden; }
  100% {
    visibility: visible; } }

/* line 150, ../../../../../Desktop/Portfolio/scss/styles.scss */
#about {
  margin: 8vh 0; }

/* line 154, ../../../../../Desktop/Portfolio/scss/styles.scss */
#content-margin {
  margin: 0 10%; }

/* line 158, ../../../../../Desktop/Portfolio/scss/styles.scss */
.about-grid-container {
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10%;
  align-items: center; }
  /* line 165, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .about-grid-container h1 {
    display: flex;
    background-image: url(../images/static.gif);
    font-size: 2em;
    color: white;
    padding: 20px 0;
    text-align: center;
    justify-content: center; }
  /* line 174, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .about-grid-container p {
    margin-top: 2%; }

/* line 179, ../../../../../Desktop/Portfolio/scss/styles.scss */
.marg-top {
  margin-top: 5%; }

/* line 184, ../../../../../Desktop/Portfolio/scss/styles.scss */
.project-grid-container {
  margin: 10vh 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%; }
  /* line 190, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .project-grid-container h1 {
    color: white;
    font-size: 3em; }

/* line 196, ../../../../../Desktop/Portfolio/scss/styles.scss */
#projects {
  margin-top: 5vh; }
  /* line 198, ../../../../../Desktop/Portfolio/scss/styles.scss */
  #projects img {
    width: 100%; }
  /* line 203, ../../../../../Desktop/Portfolio/scss/styles.scss */
  #projects p {
    color: white; }

/* line 207, ../../../../../Desktop/Portfolio/scss/styles.scss */
.static {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  background-image: url(../images/static.gif);
  padding-left: 10%;
  background-size: cover; }
  /* line 216, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static h1 {
    width: 90%; }
  /* line 219, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static p {
    width: 90%; }
  /* line 223, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static a {
    margin-top: 2%;
    color: white;
    font-size: 1.4em; }

/* line 230, ../../../../../Desktop/Portfolio/scss/styles.scss */
#contact {
  margin-top: 5vh;
  display: flex;
  flex-direction: column;
  align-items: center; }
  /* line 235, ../../../../../Desktop/Portfolio/scss/styles.scss */
  #contact p {
    text-align: center;
    font-size: 1.3em; }

/* line 241, ../../../../../Desktop/Portfolio/scss/styles.scss */
#mail-style {
  color: white;
  background-image: url(../images/static.gif);
  padding: 30px; }

/* line 247, ../../../../../Desktop/Portfolio/scss/styles.scss */
.social-icons {
  display: flex;
  justify-content: center;
  flex-direction: row; }
  /* line 251, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .social-icons img {
    width: 60px;
    margin: 20px 10px; }

/* line 257, ../../../../../Desktop/Portfolio/scss/styles.scss */
span {
  font-weight: 700;
  font-size: 3em; }

/* line 262, ../../../../../Desktop/Portfolio/scss/styles.scss */
#smile {
  transform: rotate(90deg); }

/* line 265, ../../../../../Desktop/Portfolio/scss/styles.scss */
footer {
  height: 10vh;
  width: 100%;
  background-image: url(../images/static.gif);
  margin-top: 2%;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center; }
  /* line 275, ../../../../../Desktop/Portfolio/scss/styles.scss */
  footer a img {
    height: 4vh; }

@media only screen and (max-width: 1320px) {
  /* line 284, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static p {
    font-size: 1em; }
  /* line 287, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static a {
    font-size: 1.2em; } }

@media only screen and (max-width: 1024px) {
  /* line 298, ../../../../../Desktop/Portfolio/scss/styles.scss */
  p {
    font-size: 1em; }
  /* line 302, ../../../../../Desktop/Portfolio/scss/styles.scss */
  #content-margin {
    margin: 0 5%; }
  /* line 307, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static p {
    font-size: 0.75em; }
  /* line 310, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static a {
    font-size: 1.2em; } }

@media only screen and (max-width: 764px) {
  /* line 318, ../../../../../Desktop/Portfolio/scss/styles.scss */
  #about {
    margin: 3vh 0; }
  /* line 322, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .about-text {
    grid-area: about-text; }
  /* line 326, ../../../../../Desktop/Portfolio/scss/styles.scss */
  #portrait {
    grid-area: portrait; }
  /* line 330, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .about-grid-container {
    justify-content: center;
    grid-gap: 2%;
    grid-template-columns: 80%;
    grid-template-areas: 'portrait'
 'about-text'; }
  /* line 339, ../../../../../Desktop/Portfolio/scss/styles.scss */
  #Hello {
    font-size: 5em; }
  /* line 343, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .project-grid-container {
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-areas: 'project-cover'
 'static'; }
  /* line 350, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static {
    padding-bottom: 2%;
    grid-area: static; }
    /* line 353, ../../../../../Desktop/Portfolio/scss/styles.scss */
    .static p {
      font-size: 1em; }
  /* line 358, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .project-cover {
    grid-area: project-cover; } }

@media only screen and (max-width: 500px) {
  /* line 364, ../../../../../Desktop/Portfolio/scss/styles.scss */
  p {
    font-size: 0.8em; }
  /* line 367, ../../../../../Desktop/Portfolio/scss/styles.scss */
  #Hello {
    font-size: 3em; }
  /* line 372, ../../../../../Desktop/Portfolio/scss/styles.scss */
  .static p {
    font-size: 0.8em; } }

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