body {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  section {
    background-image:url(images/background.png);
    background-attachment: fixed;
  }

  .navbar {
    background-color: black;
    justify-content: flex-end;
    text-transform: uppercase;
    text-align: center;
    display: flex;
  }

  .navbar li {
    list-style-type: none;
    padding: 1vw;
    width: 8vw;
  }

  .navbar a {
    text-shadow: 0vw 0vw 1vw white;
    transition: 0.3s ease-in-out;
    text-decoration:none;
    letter-spacing: 0.5vw;
    font-size: 1.5vw;
    line-height: 1.6;
    cursor: pointer;
    color: white;
  }

  .navbar a:hover {
    letter-spacing: 0.7vw;  
    text-shadow: none;
    color: gray;
  }

  .container {
    justify-content: space-around;
    text-align: center;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    height: 87.43vh;
    background-color: transparent;
  }

  .left-box {
      text-align: center;
      cursor: pointer;
      margin: 1vw;
      width: 45vw;
  }

  .left-box p {
      text-transform: uppercase;
      text-decoration: underline white;
      text-shadow: 0vw 0vw 3vw black;
      letter-spacing: 1vw;
      align-items: center;
      font-weight: bold;
      font-size: 1.5vw;
      font-weight: bolder;
      color: teal;
  }

  .left-box h1 {
      text-shadow: 0vw 0vw 3vw black;
      text-size-adjust: auto;
      letter-spacing: 0.3vw;
      margin-top: -0.2vw;
      font-size: 4vw;
      color: white;
  }

  .left-box h2 {
    text-shadow: 0vw 0vw 3vw black;
    text-size-adjust: auto;
    letter-spacing: 0.1vw;
    font-size: 2.3vw;
    margin-top: -2vw;
    color: teal;
}

  .left-box h2 span {
    color: white;
}

.left-box h3 {
  box-shadow: 0vw 0vw 0.5vw white;
  background-color: black;
  letter-spacing: 0.2vw;
  text-transform: uppercase;
  text-size-adjust: auto;
  border-radius: 3vw;
  border: 0.2vw outset teal;
  font-size: 1vw;
  font-weight: bolder;
  margin: auto;
  margin-top: 1vw;
  padding: 0.5vw;
  width: 19vw;
  color: silver;
}

.right-box {
    display: grid;
    margin: 1vw;
}

.right-box button {
    background-color: transparent;
    transition: 0.3s ease-in-out;
    text-transform: uppercase;
    border: 0.2vw solid white;
    letter-spacing: 0.1vw;
    cursor: pointer;
    color: white;
    font-size: 1vw;
    padding: 1vw;
    margin: 0.5vw;
    width: 17vw;
}

.right-box button:hover {
    letter-spacing: 0.2vw;
    border-left: 0.3vw;
    border-right: 0.3vw;
    border-color: teal;
    color: grey;
}

.arrow {
  margin-top: -3.5vw;
  text-align: center;
  display: grid;
}

.arrow h2 {
  text-decoration: underline black;
  text-transform: uppercase;
  letter-spacing: 1vw;
  font-size: 1vw;
  text-align: center;
  color: white;
  margin-top: 0.1vw;
}

.fa-arrow-down {
  text-shadow: 0vw 0vw 2vw black;
  transition: 0.2s ease-in-out;
  margin-top: 0.9vw;
  font-size: 2vw;
  color: teal;
}

.fa-arrow-down:hover {
  font-size: 2.2vw;
  color: white;
}

.about {
  text-align: center;
  padding: 3em;
  padding-top: 7vw;
  padding-bottom: 10vw;
}

.about .fa-face-smile {
  margin: 1vw;
  color: white;
  padding: 0.8vw;
  font-size: 2vw;
  border-radius: 2vw;
  letter-spacing: 0vw;
  box-shadow: 0vw 0vw 1vw teal;
  border: 0.15vw solid teal;
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.about h2 {
  text-shadow: 0vw 0vw 0.3vw teal;
  letter-spacing: 0.4vw;
  text-transform: uppercase;
  text-align: center;
  font-size: 3vw;
  color: silver;
}
.about .container {
  margin: auto;
  margin-bottom: 0.5vw;
  width: 60vw;
  height: 20vw;
}

.about p {
  letter-spacing: 0.2vw;
  text-align: start;
  font-size: 1.3vw;
  margin: auto;
  padding: 1vw;
  max-width: 60vw;
}

.about h4 {
  letter-spacing: 0.2vw;
  font-weight: 10;
  text-align: start;
  font-size: 1.3vw;
  margin: auto;
  max-width: 37vw;
}

.about img {
  border-radius: 2em;
  width: 19vw;
  height: 19vw;
}

.about p span {
  font-size: 1.3vw;
  color: teal;
}

.about h3 {
  text-shadow: 0vw 0vw 0.3vw teal;
  letter-spacing: 0.4vw;
  padding-top: 3vw;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.8vw;
  color: silver;
}

.offers {
  text-align: center;
  margin: auto;
  width: 90vw;
  margin-bottom: 1vw;
}

.offers h2 {
  text-shadow: 0vw 0vw 0.3vw teal;
  letter-spacing: 0.4vw;
  padding-top: 1vw;
  text-transform: uppercase;
  text-align: center;
  font-size: 3vw;
  color: silver;
}

.offers h6 {
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: teal;
  color: white;
  padding: 0.4vw;
  border-radius: 1vw;
  margin: auto;
  margin-bottom: 0.51vw;
  width: 20vw;
  text-transform: uppercase;
  letter-spacing: 0.5vw;
  font-size: 1.3vw ;
}

.offers .fa-question {
  margin: 1vw;
  color: white;
  padding: 0.8vw;
  font-size: 2vw;
  border-radius: 2vw;
  letter-spacing: 0vw;
  box-shadow: 0vw 0vw 1vw teal;
  border: 0.15vw solid teal;
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.offers .container {
  display: flex;
  flex-wrap: wrap;
}

.offers .container .box1 {
  box-shadow: 0vw 0.5vw 0.5vw teal;
  transition: 0.2s ease-in-out;
  border: 0.1vw solid teal;
  border-radius: 1vw;
  cursor: pointer;
  margin: 1vw;
  padding: 1vw;
  width: 24vw;
}

.offers .container .box1:hover {
  box-shadow: 0vw 0.5vw 0.5vw gray;
  border: 0.1vw solid black;
}

.offers .container .box1 i {
  border: 0.1vw solid black;
  box-shadow: 0vw 0.4vw 0.4vw black;
  border-radius: 100%;
  padding: 1.2vw;
  font-size: 2vw;
  color: black;
}

.offers .container .box1 h3 {
  font-size: 1.3vw;
  font-weight: bolder;
}

.offers .container .box1 p {
  font-weight: bolder;
  font-size: 0.9vw;
  color: gray;
}

.skills-container {
  text-align: center;
  padding: 3vw;
  padding-bottom: 8vw;
}

.skills-container h2 {
  text-shadow: 0vw 0vw 0.3vw teal;
  letter-spacing: 0.4vw;
  padding-top: 1vw;
  text-transform: uppercase;
  text-align: center;
  font-size: 3vw;
  color: silver;
}

.skills-container h3 {
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: teal;
  color: white;
  padding: 1vw;
  border-radius: 2vw;
  margin: auto;
  width: 22vw;
  text-transform: uppercase;
  letter-spacing: 0.3vw;
  font-size: 1.3vw ;
}

.skills-box {
  border: 0.3vw outset teal;
  background-image:url(images/code.png);
  background-attachment: fixed;
  padding: 3vw;
  display: grid;
  margin-top: 3vw;
  border-radius: 3vw;
  background-repeat: repeat;
}

.skills-box h1 {
  text-shadow: 0vw 0vw 0.3vw teal;
  letter-spacing: 0.4vw;
  padding-top: 1vw;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.8vw;
  color: white;
}

.skills {
  border: 0.10vw outset white;
  box-shadow: -0.8vw 0.5vw 0.8vw teal;
  background-color: black;
  letter-spacing: 0.3vw;
  justify-content: space-evenly;
  text-align: center;
  border-radius: 3vw;
  display: flex;
  padding: 0.5vw;
  margin: auto;
  margin-bottom: 6vw;
  width: 40vw;
}

.skills h2 {
  text-shadow: 0vw 0vw 1vw gray;
  transition: 0.3s ease-in-out;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.3vw;
  font-size: 1.1vw;
  align-items: center;  
  color: white;
}

.skills h2:hover {
  font-size: 1.2vw;
  color: teal;
}

.skills img {
  margin-top: 1vw;
  width: 3vw;
}

.skills-container .fa-screwdriver-wrench {
  margin: 1vw;
  color: white;
  padding: 0.8vw;
  font-size: 2vw;
  border-radius: 2vw;
  letter-spacing: 0vw;
  box-shadow: 0vw 0vw 1vw teal;
  border: 0.15vw solid teal;
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.tools {
  border: 0.10vw outset white;
  box-shadow: -0.8vw 0.5vw 0.8vw teal;
  background-color: black;
  letter-spacing: 0.3vw;
  justify-content: space-evenly;
  text-align: center;
  border-radius: 3vw;
  display: flex;
  padding: 0.5vw;
  margin: auto;
  width: 70vw;
}

.tools h2 {
  text-shadow: 0vw 0vw 1vw gray;
  transition: 0.3s ease-in-out;
  text-shadow: 0vw 0vw 1vw gray;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.3vw;
  font-size: 1vw;
  align-items: center;  
  color: white;
}

.tools h2:hover {
  font-size: 1.2vw;
  color: teal;
}

.tools img {
  margin-top: 1vw;
  width: 3vw;
}

.tools .klav {
  margin-top: 1.5vw;
  width: 6vw;
}

.tools .keap {
  margin-top: 1.5vw;
  width: 3vw;
}

.work-process {
  text-align: center;
  margin: auto;
  margin-top: 10vw;
  margin-bottom: 10vw;
        
}

.work-process h1 {
  text-shadow: 0vw 0vw 0.3vw teal;
  letter-spacing: 0.4vw;
  padding-top: 1vw;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.9vw;
  color: silver;
}

.work-process .examples h2 {
  background-color: blue;
  display: grid;
}


.work-process .examples i {
  font-size: 1.5vw;
  margin: 0.5vw;
  color: black;
}

.work-process .examples {
  justify-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  padding: 2vw;
  flex-wrap: wrap;
  display: flex;
}

.work-process .examples h3 {
  box-shadow: 0vw 0.5vw 0.5vw teal;
  transition: 0.2s ease-in-out;
  border: 0.1vw solid teal;
  text-transform: uppercase;
  letter-spacing: 0.1vw;
  cursor: pointer;
  border-radius: 1vw;
  margin-bottom: 3vw;
  margin-top: -0.5vw;
  font-size: 1vw;
  color: black;
  display: grid;
  padding: 1vw;
  width: 8vw;
}

.work-process .examples h3:hover {
  box-shadow: 0vw 0.4vw 0.5vw gray;
  border: 0.1vw solid black;
}

.work-process .examples h4 {
  margin-top: -1vw;
  font-size: 1.5vw;
  color: black;
}

.work-process .text {
  background-color: black;
  justify-content: space-between;
  border-radius: 10px;
  padding: 5px;
  margin: auto;
  display: flex;
  margin-top: -3vw;
  width: 89vw;
}

.work-process .text h4 {
  border-left: 0.3vw outset teal;
  padding-left: 1vw;
  text-align: start;
  color: white;
  font-size: 1vw;
  width: 10vw;
}

.marketing {
  padding: 1vw;
}

.marketing h1 {
  text-shadow: 0vw 0vw 0.3vw teal;
  letter-spacing: 0.4vw;
  padding-top: 1vw;
  text-transform: uppercase;
  text-align: center;
  font-size: 3vw;
  color: silver;
}


.marketing i {
  margin: 1vw;
  color: white;
  padding: 0.8vw;
  font-size: 2vw;
  border-radius: 2vw;
  letter-spacing: 0vw;
  box-shadow: 0vw 0vw 1vw teal;
  border: 0.15vw solid teal;
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.marketing h2 {
  border-left: 0.3vw solid teal;
  letter-spacing: 0.1vw;
  padding-left: 1vw;
  font-size: 1.1vw;
  margin: 2vw;
}

.marketing h2 span {
  font-size: 1.5vw;
  color: teal
}

.marketing h2 a {
  transition: 0.5s ease-in-out;
  text-decoration: none;
  list-style-type: none;
  cursor: pointer;
  color: teal;
  font-weight: bolder;
  font-size: 1.2vw;
}

.marketing h2 a:hover {
  letter-spacing: 0.2vw;
}

.resume {
  font-size: 3vw;
  text-align: center;
  margin-top: 10vw;
}

.resume .fa-paperclip {
  margin: 1vw;
  color: white;
  padding: 0.8vw;
  font-size: 2vw;
  border-radius: 2vw;
  letter-spacing: 0vw;
  box-shadow: 0vw 0vw 1vw teal;
  border: 0.15vw solid teal;
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.resume h1 {
  text-shadow: 0vw 0vw 0.3vw teal;
  letter-spacing: 0.4vw;
  padding-top: 1vw;
  text-transform: uppercase;
  text-align: center;
  font-size: 3vw;
  color: silver;
}

.resume .note {
  box-shadow: 0vw 0vw 1vw teal;
  border: 0.3vw outset gray;
  background-color: black;
  border-radius: 3vw;
  margin: auto;
  margin-top: 3vw;
  margin-bottom: 5vw;
  width: 50vw;
}

.resume h2 {
  font-size: 2vw;
  color: white;
}

.resume h3 {
  padding-bottom: 2vw;
  letter-spacing: 0.1vw;
  font-size: 1.1vw;
  color: gray;
  margin: auto;
  width: 45vw;
}

.resume .experiences {
  width: 95vw;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
}

.resume .experiences .box {
  box-shadow: 0vw 0vw 1vw teal;
  transition: 0.3s ease-in-out;
  border: 0.2vw outset gray;
  cursor: pointer;
  border-radius: 3vw;
  margin-bottom: 5vw;
  padding: 0.7vw;
  width: 42vw;
}

.resume .experiences .box:hover {
  box-shadow: 0vw 0vw 1vw black;
  border: 0.3vw outset gray;
}

.resume .experiences .left-side .box {
  margin-bottom: 10vw;
}

.resume .experiences .right-side .box {
  margin-top: 15vw;
  margin-bottom: 10vw;
}

.resume .experiences .box h2 {
  text-align: start;
  font-size: 1.5vw;
  color: teal;
}

.resume .experiences .box h3 {
  text-align: start;
  font-size: 1vw;
  color: black;
}

.resume .experiences .box h4 {
  text-align: start;
  font-size: 0.9vw;
  color: black;
}

.resume .experiences .box li {
  list-style-type: circle;
  padding-left: 2vw;
  padding-top: 0.3vw;
  text-align: start;
  font-size: 0.8vw;
  color: black;
}

.resume .experiences .box-1 {
  box-shadow: 0vw 0vw 1vw teal;
  border: 0.2vw outset gray;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 3vw;
  margin-bottom: 5vw;
  padding: 0.7vw;
  width: 42vw;
}

.resume .experiences .box-1:hover {
  box-shadow: 0vw 0vw 1vw black;
  border: 0.3vw outset gray;
}

.resume .experiences .box-1 h2 {
  text-align: start;
  font-size: 1.5vw;
  color: teal;
}

.resume .experiences .box-1 h3 {
  text-align: start;
  font-size: 1vw;
  color: black;
}

.resume .experiences .box-1 h4 {
  text-align: start;
  font-size: 0.8vw;
  color: black;
}

.resume .experiences .box-1 li {
  list-style-type: circle;
  padding-left: 2vw;
  padding-top: 0.3vw;
  text-align: start;
  font-size: 0.8vw;
  color: black;
}

.title {
  padding-top: 5vw;
}

.title h1 {
text-shadow: 0vw 0vw 0.3vw teal;
letter-spacing: 0.4vw;
padding-top: 1vw;
text-transform: uppercase;
text-align: center;
font-size: 3vw;
color: silver;
}

.title i {
margin: 1vw;
color: white;
padding: 0.8vw;
font-size: 2vw;
border-radius: 2vw;
letter-spacing: 0vw;
box-shadow: 0vw 0vw 1vw teal;
border: 0.15vw solid teal;
background-image:url(images/background.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

.layout {
  margin: auto;
  margin-bottom: 7vw;
  margin-top: 7vw;
  display: flex;
}

.layout .layout-1 {
  box-shadow: 0vw 0vw 2vw gray;
  border-radius: 3vw;
  cursor: pointer;
  background-color:aliceblue;
  padding: 1vw;
  margin: auto;
  width: 37vw;
}

.layout .layout-1 img {
  width: 1.8vw;
}

.layout .layout-1 h4 {
  font-family: 'Anton', sans-serif;
  background-color: aliceblue;
  border-radius: 3vw;
  padding-left: 2vw;
  font-size: 1.5vw;
  color:black;
  width: 30vw;
}

.layout .layout-1 h6 {
  font-family: 'Anton', sans-serif;
  background-color: aliceblue;
  border-radius: 3vw;
  font-weight: 700;
  padding-left: 2vw;
  font-size: 1.2vw;
  color:black;
  width: 30vw;
}


.layout .layout-1 h2 {
  font-family: 'Anton', sans-serif;
  background-color: aliceblue;
  border-radius: 3vw;
  padding-left: 1.5vw;
  font-size: 1.5vw;
  width: 30.5vw;
}

.layout .layout-1 .container {
  height: 200px;
}


.layout .layout-1 .container img {
  border-radius: 3vw;
  width: 10vw;
}

.layout .container-txt {
  margin-left: 3vw;
  font-size: 0.8vw;
  width: 35vw;
}
.layout .container-txt span {
  text-decoration: underline teal;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: teal;
}

.layout .container-txt span:hover {
  text-decoration: none;
  color:steelblue;
}

.layout .container-txt li {
  padding-left: 2vw;
  font-size: 0.8vw;
}

.layout .container-txt h4 {
  font-size: 0.8vw;
  margin-top: -1vw;
}

.layout .txt {
  cursor: pointer;
  border-radius: 2vw;
  padding: 1vw;
  margin: auto;
  width: 41vw;
}

.layout .txt h5 {
  font-family: 'Anton', sans-serif;
  padding-left: 1vw;
  margin: auto;
  font-size: 2vw;
  color: steelblue;
  width: 40vw;
}

.layout .txt h2 {
  font-size: 1.3vw;
  padding: 1.5vw;
  color: black;
  margin: auto;
  width: 29vw;
}

.layout .txt span {
  text-decoration: underline steelblue;
  letter-spacing: 0.2vw;
  color: steelblue;
}

.layout-2 {
  box-shadow: 0vw 0vw 2vw gray;
  border-radius: 3vw;
  cursor: pointer;
  background-color:whitesmoke;
  padding: 2vw;
  margin: auto;
  width: 37vw;
}

.layout-2 h2 {
  width: 32vw;
  margin: auto;
  font-size: 0.9vw;
  padding-bottom: 1vw;
}

.layout-2 h3 {
  text-align: center;
  padding-top: 2vw;
  font-size: 0.9vw;
  width: 32vw;
  margin: auto;
}

.layout-2 h4 {
  width: 32vw;
  margin: auto;
  font-size: 0.9vw;
  margin-top: -1vw;
}

.layout-2 span {
  text-decoration: underline steelblue;
  transition: 0.3s ease-in-out;
  letter-spacing: 0.1vw;
  font-weight: 900;
  color: steelblue;
  width: 33vw;
  margin: auto;
}

.layout-2 span:hover {
  color: black;
}

.projects-container {
  background-image:url(images/background.png);
  background-attachment: fixed;
  padding-bottom: 0.1vw;
  padding-top: 1vw;
}

.projects-container h1 {
  text-shadow: 0vw 0vw 0.8vw teal;
  padding-top: 1vw;
  margin-bottom: -2vw;
  text-transform: uppercase;
  letter-spacing: 0.4vw;
  text-align: center;
  font-size: 3vw;
  color: silver;
}


.projects-container h6 {
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: teal;
  text-align: center;
  color: white;
  padding: 0.4em;
  box-shadow: 0vw 6vw 1vw black;
  border-radius: 1vw;
  margin: auto;
  margin-top: 6vw;
  width: 20vw;
  text-transform: uppercase;
  letter-spacing: 0.3vw;
  font-size: 1.2vw ;
}

.projects-container i {
  margin: 1vw;
  color: white;
  padding: 0.8vw;
  font-size: 2vw;
  border-radius: 2vw;
  letter-spacing: 0vw;
  box-shadow: 0vw 0vw 1vw teal;
  border: 0.15vw solid teal;
  background-image:url(images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.projects {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-top: 1.2vw;
  margin-bottom: 7vw;
}

.projects .box {
  background-color: black;
  box-shadow: 0vw 0.9vw 1vw black;
  transition: 0.3s ease-in-out;
  border: 0.2vw solid teal;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 2vw;
  padding: 0.5vw;
  width: 18vw;
  margin: 1vw;
  color: aqua;
}

.projects .box:hover {
  box-shadow: 0vw 0.9vw 1vw teal;
  border: 0.15vw solid silver;
}


.projects .box h2 {
  text-decoration: underline black;
  letter-spacing: 0.2vw;
  font-size: 1.5vw;
  color: white;
}

.projects .box h3 {
  text-decoration: underline black;
  letter-spacing: 0.2vw;
  font-size: 1.5vw;
  color: gray;
}

.projects .box h4 {
  text-decoration: underline black;
  letter-spacing: 0.2vw;
  padding-bottom:  1.5vw;
  margin: auto;
  font-size: 1vw;
  color: gray;
}

.projects .box img {
  width: 15vw;
}

.projects .box button {
  transition: 0.3s ease-in-out;
  text-transform: uppercase;
  background-color: black;
  border: 0.2vw outset silver;
  letter-spacing: 0.2vw;
  border-radius: 3vw;
  margin-bottom: 2vw;
  cursor: pointer;
  font-size: 1vw;
  margin-top: 2vw;
  color: white;
  width: 14vw;
  padding: 0.6vw;
}

.projects .box button:hover {
  border: 0.2vw outset teal;
  background-color: black;
  letter-spacing: 0.3vw;
  color: white;
}

.footer {
  background-color: black;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 3vw;
  padding-bottom: 2vw;
  display: flex;
  flex-wrap: wrap;
}

.footer .links {
  text-align: center;
  width: 18vw;
  padding: 1vw;
  display: grid;
}

.footer .links h2 {
  text-decoration: underline teal;
  text-transform: uppercase;
  letter-spacing: 0.5vw;
  color: white;
  font-size: 1.3vw;
}

.footer .links li {
  list-style-type: none;
  margin: 0.6vw;
}

.footer .links a {
  transition: 0.3s ease-in-out;
  text-decoration: none;
  letter-spacing: 0.3vw;  
  font-size: 1.3vw;
  color: white;
}

.footer .links a:hover {
  text-shadow: 0px 0px 10px black;
  letter-spacing: 0.5vw;  
  color: gray;
}


.footer .newsletter {
  background-color: teal;
  border: 1px solid white;
  border-radius: 3vw;
  text-align: center;
  display: grid;
  padding: 1em;
}

.footer .newsletter h2 {
  text-decoration: underline teal;
  text-transform: uppercase;
  letter-spacing: 1vw;
  font-size: 1.3vw;
  color: white;
}

.footer .newsletter input {
  border-radius: 0.3vw;
  letter-spacing: 0.3vw;
  text-align: center;
  font-size: 1vw;
  padding: 0.6vw;
  border: none;
  width: 25vw;
  margin: 2vw;
}

.footer .newsletter button {
  background-color: transparent;
  transition: 0.3s ease-in-out;
  border: 0.15vw solid white;
  letter-spacing: 0.1vw;
  border-radius: 3vw;
  padding: 0.3vw;
  cursor: pointer;
  font-size: 1vw;
  color: white;
  margin: auto;
  width: 12vw;
}

.footer .newsletter button:hover {
  box-shadow: 0px 0px 10px black;
  letter-spacing: 0.20vw;
  color: black;
}


.footer .contact {
  text-align: center;
  padding: 1vw;
  cursor: pointer;
  justify-content: space-around;
}

.footer .contact .socials {
  align-items: center;
  align-self: center;
  justify-content: center;
  justify-content: space-around;
  width: 7vw;
  margin: auto;
  display: flex;
}

.footer .contact h2 {
  text-decoration: underline teal;
  text-transform: uppercase;
  letter-spacing: 0.3vw;
  font-size: 1.3vw;
  color: white;
}

.footer .contact h3 {
  letter-spacing: 0.2vw;
  font-size: 0.8vw;
  color: white;
  margin: 2em;
}

.footer .contact .fa-linkedin {
  margin: 0.3vw;
  color: black;
  color: white;
  font-size: 2vw;
  transition: 0.3s ease-in-out;
}

.footer .contact img {
  background-color: white;
  border-radius: 0.1vw;
  width: 1.78vw;
  transition: 0.3s ease-in-out;
}

.footer .contact .fa-linkedin:hover {
  font-size: 2.2vw;
}

.footer .contact img:hover {
  width: 2vw;
}

.credits-container {
  background-color: black;
  text-align: center;
  padding: 0.01vw;
}

.credits {
  justify-content: center;
  padding-bottom: 1vw;
  margin-top: -1vw;
  display: flex;
}

.credits h2 {
  border: 0.1vw solid snow; 
  align-items: center;
  align-self: center;
  justify-content: center; 
  border-radius: 5vw; 
  font-size: 0.9vw;
  color: snow;
  display: flex;
  margin: 0.4vw;
  padding: 0.2vw;  
  padding-bottom: 0.4vw; 
  width: 0.7vw;
  height: 0.4vw;
}

.credits h3 {
  color: silver;
  font-size: 1vw;
}

.credits i {
  margin: 0.3vw;
  color: red;
}