/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version

Font: Zen Maru Gothic
Text Color (White Smoke): #F5F5F5;
Background Color (Black): #000000;
Primary Color (Rebecca Purple): #663399;
Secondary Color (Green): #669933;

Links
Unvisited Links (Soft Yellow): #ffff90
Active Link (Dark Blue/Green): #05676e
Visited Link (Yellow): #ffff00
 */

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  /* forces the padding and border to be included in the final
 specified width rather than being added on top, with the
 width of the item itself changing to accommodate the padding
 and border */
}

body {
  background-color: #000;
  color: #f5f5f5;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 30px;
  font-weight: 700;
}

h2 {
  font-size: 25px;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-weight: 700;
}

a {
  color: #ffff90;
}

a:visited {
  /* visited link */
  color: #ff0;
}

a:hover {
  /* No underlining when hovering over a link */
  text-decoration: none;
  -webkit-transition: 1s opacity;
  -o-transition: 1s opacity;
  transition: 1s opacity;
}

a:focus {
  /* No underlining when hovering over a link */
  text-decoration: none;
  -webkit-transition: 1s opacity;
  -o-transition: 1s opacity;
  transition: 1s opacity;
}

a:active {
  /* selected link */
  color: #05676e;
}

button {
  /* overwrites browser defaults and resets the border */
  border: none;

  /* takes the font from the outer container */
  font-family: inherit;
  background-color: #639;
  color: #f5f5f5;
  text-decoration: none;
  margin: 15px 0 0 10px;
  padding: 5px;
  border-radius: 1.5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  -webkit-transition: 1s opacity;
  -o-transition: 1s opacity;
  transition: 1s opacity;
}

.button {
  /* overwrites browser defaults and resets the border */
  border: none;

  /* takes the font from the outer container */
  font-family: inherit;
  background-color: #639;
  color: #f5f5f5;
  text-decoration: none;
  margin: 15px 0 0 10px;
  padding: 5px;
  border-radius: 1.5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  -webkit-transition: 1s opacity;
  -o-transition: 1s opacity;
  transition: 1s opacity;
}

button:hover {
  /* lets the mouse appear as a hand when hovering over the button */
  cursor: pointer;
  opacity: 0.8;
}

button:focus {
  /* lets the mouse appear as a hand when hovering over the button */
  cursor: pointer;
  opacity: 0.8;
}

.button:hover {
  /* lets the mouse appear as a hand when hovering over the button */
  cursor: pointer;
  opacity: 0.8;
}

.button:focus {
  /* lets the mouse appear as a hand when hovering over the button */
  cursor: pointer;
  opacity: 0.8;
}

input,
textarea {
  margin: 1.75%;
  background: none;
}

.page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 20px;
}

.page-header__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 200px;
          flex: 0 1 200px;
}

.page-header__item:last-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: right;
}

.navigation-list {
  list-style-type: none;
}

.navigation-list li {
  display: inline-block;
  margin-left: 15px;
}

.navigation-list__item--active {
  text-decoration: none;
}

.profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 70vh;
  margin: 0 auto;
}

.profile-portrait {
  border-radius: 80%;
  float: left;
  width: 250px;
  margin-right: 40px;
}

#button-projects {
  background-color: #639;
  color: #f5f5f5;
}

#button-contact {
  background-color: #693;
  color: #f5f5f5;
}

.standard-submit {
  color: #f5f5f5;
  cursor: pointer;
  -webkit-transition: 1s opacity;
  -o-transition: 1s opacity;
  transition: 1s opacity;
}

.page-footer {
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  margin-bottom: 20px;
}

#social-links a {
  text-decoration: none;
}

/* about.html */
.about {
  text-align: center;
  margin: 0 auto;
  max-width: 700px;
}

.about-table {
  text-align: center;
  margin: 50px auto;
  padding: 15px;
}

.about-table__level {
  padding: 10px;
}

.about-cv {
  padding-bottom: 15px;
}

#cv-button {
  color: #f5f5f5;
}

@-webkit-keyframes color-change {
  0% {
    fill: #edc655;
  }

  50% {
    fill: #fcffad;
  }

  100% {
    fill: #f76414;
  }
}

@keyframes color-change {
  0% {
    fill: #edc655;
  }

  50% {
    fill: #fcffad;
  }

  100% {
    fill: #f76414;
  }
}

.sun {
  -webkit-animation: 4s color-change infinite alternate linear;
          animation: 4s color-change infinite alternate linear;
}

@-webkit-keyframes cloud-move-reverse {
  from {
    -webkit-transform: translate(146px, 2px);
            transform: translate(146px, 2px);
  }

  to {
    -webkit-transform: translate(-300px, 2px);
            transform: translate(-300px, 2px);
  }
}

@keyframes cloud-move-reverse {
  from {
    -webkit-transform: translate(146px, 2px);
            transform: translate(146px, 2px);
  }

  to {
    -webkit-transform: translate(-300px, 2px);
            transform: translate(-300px, 2px);
  }
}

.cloud-back {
  -webkit-animation: 34s cloud-move-reverse infinite alternate linear;
          animation: 34s cloud-move-reverse infinite alternate linear;
}

#freepik-link {
  font-size: 10px;
  text-decoration: none;
  color: #808080;
}

/* projects.html */
.projects-intro {
  text-align: center;
  margin: 0 auto;
  max-width: 700px;
}

.projects-intro p {
  padding-bottom: 15px;
}

/* contact.html */
.contact {
  max-width: 700px;
  margin: 0 auto;
}

.contact-heading {
  text-align: center;
  margin: 0 auto;
  max-width: 700px;
}

.contact-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.contact-form {
  text-align: right;
  margin-top: 30px;
}

input {
  color: #f5f5f5;
  max-width: 200px;
}

textarea {
  color: #f5f5f5;
  width: 300px;
}

.vl {
  border-left: 1px solid whitesmoke;
  height: 650px;
  position: absolute;
  left: 50%;
  margin: inherit;
}

.contact-footer {
  padding-top: 20px;
}

/* start grid fallback */
.grid__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 33%;
}

/* end grid fallback */

@supports (display: grid) {
  .grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    grid-gap: 20px;
    margin: 20px;
  }

  .grid__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: #639;
    opacity: 80%;
    width: auto;
    min-height: auto;
    padding: 15px;
  }

  .grid__item:last-child {
    -ms-grid-column: 3;
    grid-column: 3 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / 3;
  }
}

/*
  or
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
*/

#header-logo {
  width: 200px;
  height: 70px;
}

/* responsive design through media queries */
@media all and (max-width: 500px) {
  .grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

@media all and (max-width: 650px) {
  .contact-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .contact-form {
    text-align: center;
    margin: 0 auto;
  }

  .contact-info {
    text-align: center;
    margin: 0 auto;
  }

  .vl {
    display: none;
  }
}

@media all and (min-width: 500px) and (max-width: 750px) {
  .grid {
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

@media all and (max-width: 750px) {
  .grid {
    grid-gap: 10px;
  }

  .grid__item:last-child {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }

  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 15px;
  }
}