html {
    scroll-behavior: smooth;
    color: #292f38;
}
body {
  font-family: 'Raleway', sans-serif;
}
h1, h2 {
    font-family: 'Poppins', sans-serif;
}
h3 {
  color: #ffc47f;
}
p {
  margin: auto;
  margin-bottom: 1rem;
}
a {
  text-decoration: none;
  color: #292f38;
}
a:hover {
  text-decoration: none;
  color: #545e68;
}
.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/
  display: none;
}
.menu {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  width: 300px;
  height: 100%;
  transform: translate3d(-300px, 0, 0);
  transition: transform 0.35s;
  box-shadow: 0px 1px 2px 0 rgba(60,64,67,0.302), 0px 1px 3px 1px rgba(60,64,67,0.149);
  z-index: 9;
}
.menu label.menu-toggle {
  position: fixed;
  right: -60px;
  width: 60px;
  height: 60px;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: -9999px;
  background: #fff url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50%/25px 25px no-repeat;
  box-shadow: 1px 1px 2px 0 rgba(60,64,67,0.302), 2px 1px 3px 1px rgba(60,64,67,0.149);
  cursor: pointer;
}
.menu ul {
  padding: 0;
  list-style-type: none;
}
.menu ul li > label {
  background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50%/16px 16px no-repeat;
}
.menu ul li a, .menu ul li label {
  display: block;
  text-align: left;
  padding: 0 20px;
  line-height: 60px;
  text-decoration: none;
}
.menu-checkbox {
  display: none;
}
.menu .menu label.menu-toggle {
  background: none;
}
.menu-checkbox:checked + .menu {
  transform: translate3d(0, 0, 0);
}
.menu-logo img {
    width: 100%;
    padding: 20px;
}
.parallax {
    background: #ffc47f;
    background: -moz-linear-gradient(#a3f4ff 30%, #ffc47f 70%); /* FF 3.6+ */  
    background: -ms-linear-gradient(#a3f4ff 30%, #ffc47f 70%); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a3f4ff), color-stop(100%, #ffc47f)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#a3f4ff 30%, #ffc47f 70%); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#a3f4ff 30%, #ffc47f 70%); /* Opera 11.10 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a3f4ff', endColorstr='#ffc47f'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#a3f4ff', endColorstr='#ffc47f')"; /* IE8+ */ 
    background: linear-gradient(#a3f4ff 30%, #ffc47f 70%); /* the standard */ 
    /*height: 100%;*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}
.parallax .inverted {
    background: #ffc47f;
    background: -moz-linear-gradient(#ffc47f 70%, #a3f4ff 30%); /* FF 3.6+ */  
    background: -ms-linear-gradient(#ffc47f 70%, #a3f4ff 30%); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffc47f), color-stop(100%, #a3f4ff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#ffc47f 70%, #a3f4ff 30%); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#ffc47f 70%, #a3f4ff 30%); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc47f', endColorstr='#a3f4ff'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc47f', endColorstr='#a3f4ff')"; /* IE8+ */
    background: linear-gradient(#ffc47f 70%, #a3f4ff 30%); /* the standard */ 
}
.jumbotron {
  background: transparent;
}
.jumbotron h1, .jumbotron h2 {
  color: white;
  text-shadow: 1px 1px rgba(60,64,67,0.302);
}
.jumbotron hr {
  margin: 5px auto;
  width: 80%;
  border-color: white;
} 
.profile-picture {
  overflow: hidden;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.profile-picture img {
  width: 200px;
}
#bio {
  padding: 15px 0;
}
#bio .link {
  margin-top: 2.5em;
}
.button {
  color: white;
  background: rgb(255,196,127);
  background: linear-gradient(45deg, rgba(255,196,127,1) 50%, rgba(163,244,255,1) 100%);
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
  transition: 0.3s;
}
.button:hover {
  color: white;
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
}
.progress {
  margin: 15px auto;
  height: 3em;
}
.progress-bar {
  height: 3em;
  color: #292f38;
  font-family: "Nunito", sans-serif
}
#html {background-color: #a3f4ff}
#css {background-color: #d0e6a5;}
#js {background-color: #FDF69B;}
#asp {background-color: #fa897b;}
#php {background-color: #ccabd8}
#xml {background-color: #ffc47f;}
.description {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
#features {
  padding-top: 25px;
  padding-bottom: 25px;
  margin: 30px auto;
  background-color: #ffc47f;
  color: white;
  text-align: center;
}

.icon {
  font-size: 5em;
}
.feature {
  padding-top: 25px;
  padding-bottom: 25px;
  height: 350px;
}
.feature-info {
  padding-left: 30px;
  padding-right: 30px;
}
.website {
  padding: 15px;
  margin: 15px auto;
}
.website-thumbnail img {
  width: 100%;
}
.website-title {
  text-align: center;
}
.website-title h4 {
  margin-top: 10px;
}
.website h5 {
  color: red;
  text-transform: uppercase;
}
#footer {
  padding: 5em 0;
}
.logo {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
}
.logo img {
  width: 100%;
}
.input {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 50px;
  -webkit-appearance: none;
  -moz-box-shadow:    inset  0 1px 2px 0 rgba(60,64,67,0.302), inset 0 1px 3px 1px rgba(60,64,67,0.149);
  -webkit-box-shadow: inset  0 1px 2px 0 rgba(60,64,67,0.302), inset 0 1px 3px 1px rgba(60,64,67,0.149);
  box-shadow:         inset  0 1px 2px 0 rgba(60,64,67,0.302), inset 0 1px 3px 1px rgba(60,64,67,0.149);
  padding: 10px 20px;
  margin: 5px;
}
.input::placeholder {
  font-style: italic;
}
.message {
  border-radius: 25px;
}
.send {
  background: transparent;
  padding: 10px 20px;
  color: rgba(60,64,67);
  border: 3px solid rgba(60,64,67);
  border-radius: 25px;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
  transition: 0.3s;
}
.send:hover {
  box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
}

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffc47f;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}

@media screen and (min-width: 768px) {
    .jumbotron  {
        padding: 15em 0;
    }
    .jumbotron .h1, .jumbotron h1 {
        font-size: 72px;
    }
    .jumbotron .h2, .jumbotron h2 {
        font-size: 48px;
    }
}
@media screen and (max-width: 768px) {
  .jumbotron {
    padding: 40vh 0;
  }
  #bio h3, #bio .link, #progress-bars h3 {
    text-align: center;
  }
}