/* @import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap'); */

.handwritten{
  font-family: 'Cedarville Cursive', cursive;
}

body{
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  color:rgb(71,73,72);
  font-family: sans-serif;
}

body > .container{
  padding-top: 30px !important;
}

.name{
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-size: 60px;
  /* border: 1px solid #000; */
}

.back-button{
  font-size: 15px !important;
}

.back-button a{
  font-size: 15px !important;
}

.face{
  border-radius: 50%;
  height: 44px;
  vertical-align: baseline;
  margin-right: 20px;
  /* border: 1px solid #000; */
}


@media (max-width:600px){

  body{
    background-color:#EFEFEF;
    color:rgb(71,73,72);
  }

  body > .container{
    padding-top: 0px !important;
  }

  .name{
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 51px;
    /* border: 1px solid #000; */
  }

  .face{
    border-radius: 50%;
    height: 40px;
    vertical-align: baseline;
    margin-right: 17px;
    /* border: 1px solid #000; */
  }

}

@media (max-width:520px){

  .name{
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    /* border: 1px solid #000; */
  }

  .face{
    border-radius: 50%;
    height: 33px;
    vertical-align: baseline;
    margin-right: 15px;
    /* border: 1px solid #000; */
  }

}

@media (max-width:440px){

  .name{
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 33px;
    /* border: 1px solid #000; */
  }

  .face{
    border-radius: 50%;
    height: 27px;
    vertical-align: baseline;
    margin-right: 13px;
    /* border: 1px solid #000; */
  }

}

@media (max-width:350px){

  .name{
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    /* border: 1px solid #000; */
  }

  .face{
    border-radius: 50%;
    height: 25px;
    vertical-align: baseline;
    margin-right: 10px;
    /* border: 1px solid #000; */
  }
}

a{
  transition: all 0.2s ease-in-out;
  color: inherit;
}

a:hover{
  text-decoration: none;
  color: inherit;
  opacity: 0.8;
}

.container{
  max-width: 970px !important;
}

.hand{
  transition: all 0.2s ease-in-out;
  display: inline-block;
}

.hand-active{
  animation: shake 0.6s infinite ease-in-out;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(35deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(35deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.textbox-label{
  text-transform: uppercase;
  font-size:10px;
}

.social img{
  border-radius: 20%;
  width:20px;
  height:20px;
  transition: all 0.2s ease-in-out;
}

.social img:hover{
  transform: scale(1.1);
}

.social{
  padding:0px;
  padding-bottom: 5px;
  /* border: 1px solid #000; */
}

#resume-link{
  text-transform:uppercase;
  font-weight:600;
  font-size:12px;
}

@media (max-width:350px){

  #resume-link{
    text-transform:uppercase;
    font-weight:600;
    font-size:11px;
  }

  .social img{
    border-radius: 20%;
    width:20px;
    height:20px;
    transition: all 0.2s ease-in-out;
  }

}

input[type="submit"]{
  text-transform: uppercase;
  font-size:10px;
  margin-top: 10px;
  color:rgba(255,255,255,0.9);
  border:none;
  border-radius: 5px;
  background: rgba(71,73,72,0.7);
  transition: all 0.2s ease-in-out;
}

input[type="submit"]:hover{
  background: rgba(71,73,72,0.8);
}

.label{
  margin:5px;
  margin-right: 5px;
  display: inline-block;
  font-size: 10px;
  text-transform:uppercase;
  background:#fff !important;
  color:rgb(41,41,41) !important;
  border-radius: 10px;
  box-shadow: 4px 4px 3px rgba(100,100,100,0.1);
}