::selection {
  color: white; 
  background: #ff5737;
}

/*
white: #F0EFD6;
deepdarkbrown: #362510;
darkbrown: #5A3F1B;
lightBrown: #C7B27A;
brown: #C06919;
green: #8A8417;
green= #398d7a
yellow = #f7ba3a
gray: 201f1b;
*/

body {
  background-color: #201f1b;
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 300;
  position: relative; /* for Navbar*/
  min-width:179px;
  position: relative;
}

.flex {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.flex-col {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 60px;
}

.padding-up {  padding-top: 15px;  }
.padding-down { padding-bottom: 15px; }
.section {
  padding-top:30px;
  padding-bottom: 60px;
}
.container {
  padding-left:0px;
  padding-right: 0px;
}

.scroll-up {
  position:fixed;
  bottom:2%; right:2%;
  font-size: 36px;
  color: black;
}

.white-text {  color: #f1f1f1; }

.gray-text {  color: #98958e; }
.handwriting {font-family:'Satisfy', cursive;}

.logo {
  height: 35px;
  width: auto;
  border-radius: 10px;
  font-size: 35px !important;
  color: #f4f3f1;
}

#about {
  padding-top: 80px;
  background-color:#363335;
}

#portfolio {
  background-color: #F0EFD6;
  color: #0f0f0f;
  padding-bottom: 0px;
}

#quali {
  background-color: #F2C100;
}

#certFrontEnd {
  width:100%;
  height:auto;
  max-width:660px;
}

#about h1 {
  color:#F5C81E;
}

#portfolio h1 {
  color: #F2C100;
}

#quali h2 {
  margin-bottom:15px;
  color: #FAFAFA;
}

.portfolio {
  margin: 5%;
  border: 0px;
  border-radius: 10px;
  background-color: #363335;
  box-shadow: 0 1px 1px #363335 inset, 0 0 20px #363335;
}

.portfolio-photo {
  padding:10px;
}

.portfolio-text {
  padding: 10px 15px 10px 15px;
  color: #F0EFD6;
  font-size: 12px;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

.contactform {
  padding: 25px 10% 0px 10%;
}

a:hover {
  text-decoration: none;
}

input[placeholder] {
  color: #fff;
  font-family: 'Lato', san-serif;
  font-weight:300;
  border: 0px;
  background-color: #201f1b;
}

textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
.uneditable-input:focus {
  box-shadow: 0 1px 1px rgba(240, 240, 240, 0.075) inset, 0 0 8px rgba(240, 240, 240, 0.6);
  outline: 0 none;
}

.btn-default {
  background-color: #98958e !important;
  color: #f1f1f1 !important;
  border: 0px;
  border-radius: 1px;
}

#logo-container {
  margin-top: 15px;
  margin-bottom: 15px;
}

#logo-freecodecamp {
  margin-bottom: 20px;
  height: 33px;
  background-color: #201f1b;
}

#my-photo {
  border: 3px solid #f7ba3a;
  margin-top: 0px;
}

#contact-intro { padding: 20px 10% 0px 10%; }

#usrmessage {
  height: 100px;
}

@media screen and (max-width: 480px) {
  body {font-size:15px;}
  h1 {font-size: 30px;}
}

/* Placeholder Text */
::-webkit-input-placeholder {
  color: #98958e !important;
}

:-moz-placeholder { /* Firefox 18- */
   color: #98958e !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #98958e !important;  
}

:-ms-input-placeholder {  
   color: #98958e !important;
}