/* ------------------------------------- Footer ---------------------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-image: url('../images/footerbgimage.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 8%;
  margin-top: 5%;
  margin-bottom: 5%;
}

.footerHeader {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid white;
  padding-bottom: 1rem;
}

.myName {
  display: flex;
  align-items:center;
  width: 100%;
  color: white;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 8px;
}

@media only screen and (max-width: 500px) {
  .myName {
     font-size: 21px;
  }
}

@media only screen and (max-width: 400px) {
  .myName {
     font-size: 16px;
     font-weight: bold;
  }
}

.based {
  display: flex;
  align-items: center;
  width: 100%;
  color: white;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: lighter;
  letter-spacing: 1px;
}

@media only screen and (max-width: 800px) {
  .based {
    font-size: .8rem;
  }
}

@media only screen and (max-width: 400px) {
  .based {
     font-size: .65rem;
  }
}

.wd {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: lighter;
  color: white;
  letter-spacing: 0px;
}

.education {
  display: flex;
  flex-direction: row;
  justify-content: start;
  color: white;
  width: 100%;
  margin-top: 2%;
  padding-bottom: 4%;
}

@media only screen and (max-width: 800px) {
  .education {
      flex-direction: column;
  }
}

.webdev, .artacademy {
  margin-top: 1%;
  width: 50%;
}

@media only screen and (max-width: 800px) {
  .webdev, .artacademy  {
     width: 100%;
  }
}

.webdevelopment, .arteducation, .links {
  margin-bottom: 2%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: white;
  letter-spacing: 3px;
}

.artawards {
  margin-bottom: 2%;
  margin-top: 2%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: white;
  letter-spacing: 3px;
}

@media only screen and (max-width: 500px) {
 .webdevelopment, .arteducation, .links, .artawards{
     font-size: 14px;
  }
}

@media only screen and (max-width: 800px) {
  .webdevelopment {
      margin-top: 2%;
  }
}

.list {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: lighter;
}

.mailsocial {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 3%;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: lighter;
}

.mail {
  display: flex;
  flex-direction: row;
  justify-content: start;
  color: white
}

@media only screen and (max-width: 400px) {
  .mail {
    width: 100%;
    display: block;
  }
}

.contact {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding-right: 1%;
  width: 50%;
}

.emailadress {
  font-size: 16px;
}

.social {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 50%;
  color: white;
}

@media only screen and (max-width: 400px) {
  .mailsocial {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}

@media only screen and (max-width: 400px) {
  .social {
    width: 100%;
    justify-content: flex-start;
    margin-top: 2%;
  }
}

@media only screen and (max-width: 500px) {
  .contact, .emailadress {
     font-size: 12px;
  }
}

.facebook, .instagram {
  margin-left: 1%;
}

@media only screen and (max-width: 400px) {
  .list,  ul, .wd {
     font-size: 10px;
  }
}

.related {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
  padding-bottom: 3%;
  border-bottom: 1px solid white;
}

.links {
  margin-bottom: 1%;
}

.link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: lighter;
  color: white;
}

.link a {
  text-decoration: none;
  color: white;
}

.social a {
  text-decoration: none;
  color: white;
}

ul {
   list-style-position: inside;
}

.sublist {
  padding-left: 40px;
}

.fab {
  font-size: 2rem;
}