html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.hidden,
[hidden] {
  display: none !important;
}

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

.invisible {
  visibility: hidden;
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
}

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}


body {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  text-align: center;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.button {
  padding: 10px 20px;
  border-radius: 5px;
  border-style: solid;
  background-color: transparent;
  text-transform: uppercase;
  cursor: pointer;
}

h3 {
  font-size: 1.4em;
  font-weight: bold;
}

section {
  margin: 30px 0;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.about-me {
  width: 80%;
  margin: 20px auto;
  font-family: "Lucida Console", "Courier New", monospace;
}

.about-me h3, section h3, .about-me__skills {
  color: green;
}

#slider {
  color: black;
}

.about-me__info {
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
}

.about-me__photo {
  border-radius: 50%;
  width: 250px;
  height: 250px;
}

.about-me__socials {
  padding: 0;
  margin: 25px;
  display: flex;
  justify-content: center;
}

.about-me__socials li {
  width: 25px;
  height: 25px;
  padding: 0 10px;
  list-style: none;
}

.about-me__socials--link svg {
  fill: grey;
}

.about-me__socials--link:hover svg {
  fill: green;
}

.button__green {
  border: none;
  color: white;
  background-color: green;
}

.button__green:hover {
  background-color: #39e839;
}

.button__green:hover:active {
  color: white;
  background-color: #03ad03;
  opacity: 0.7;
}

.about-me__button {
  margin: 20px;
}

.about-me__button:hover {
  background-color: white;
  color: green;
}

.job-reservation, .alert {
  width: 90%;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.job-reservation-form {
  padding: 20px;
  margin: 20px;
  position: relative;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
  text-align: center;
}

.job-reservation-form__close {
  width: 25px;
  height: 25px;
  position: absolute;
  color: green;
  cursor: pointer;
  top: 20px;
  right: 20px;
}

.job-reservation-form form {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: start;
}

input {
  width: 100%;
  height: 30px;
  overflow: hidden;
  border: 2px solid green;
}

.contact-form__message, input {
  margin-bottom: 15px;
}

.contact-form__email, .contact-form__name {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.contact-form__message {
  width: 100%;
}

textarea {
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
  height: 100px;
  border: 2px solid green;
  box-sizing: border-box;
  overflow: hidden;
}

.certificates__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.certificates__badge {
  margin-bottom: 20px;
}

.certificates__badge img {
  width: 300px;
  height: 300px;
}

.portfolio__skills-list,
.portfolio__skills h4 {
  margin: 0;
}

.portfolio__skills-list {
  display: flex;
  flex-wrap: wrap;
}

.portfolio__projects {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.portfolio__project {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.portfolio__project-img {
  height: 300px;
  width: 100%;
}

.portfolio__project-skills {
  display: flex;
  flex-wrap: wrap;
}

.portfolio__project-skills h4 {
  margin: 5px 15px 5px 5px;
  display: inline;
}

.portfolio__project-skill {
  padding: 2px 10px;
  margin: 5px;
  border: 1px solid #e9e1fb;
  border-radius: 5px;
  background-color: rgb(0 128 0 / 10%);
  font-size: 16px;
  line-height: 22px;
  font-style: italic;
}

.portfolio__project-link {
  margin: 20px auto;
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.alert-success, .alert-dangerous {
  background-color: white;
  border: solid 3px transparent;
  display: none;
}

.alert-success {
  color: green;
  border-color: green;
}

.alert-dangerous {
  border-color: red;
  color: red;
}

@media(min-width: 767px){
  .about-me {
    width: 70%;
  }

  .portfolio__project-link  {
    width: 25%;
    max-width: 200px;
  }

  .portfolio__project-description {
    text-align: left;
  }

  .job-reservation-form, .alert {
    padding: 30px;
    margin: 0 auto;
    max-width: 800px;
    background-color: white;
  }

  .job-reservation-form form {
    justify-content: space-between;
  }

  .contact-form__email, .contact-form__name {
    width: 45%;
  }

  #contact-form input {
    margin-bottom: 25px;
  }

  .contact-form__message {
    margin-bottom: 25px;
  }
}


@media(min-width: 1024px){
  .portfolio__projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .portfolio__project {
    width: 48%;
  }

  .portfolio__project > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .portfolio__project-link {
    width: 200px;
  }
}