/*Main styles covered in this section are for regular mobile size 360px plus.
Smaller phone screens, ipads and desktop screen sizes are handled in media queries below*/
/*Colours: #F71735, #41EAD4, #00D9C0, #373F51, #008BF8*/

.outer {
  margin-top: 0;
}

.welcome {
  color:white;
  font-family: 'Cutive Mono', monospace;
  font-size: 24px;
  font-weight: bold;
  line-height: 90%;
  margin-top: 1.75rem;
  padding-left: 0 !important;
  margin-left: 1rem;
  float:left;
  width: 220px;
}

.header {
  height: 15vh;
  background-color:#3C4F76;
}

.fa-bars {
  margin-top: 1rem;
  margin-left: 1rem;
  align-items: center;
  padding-right: 0 !important;
  float:center;
  color: white !important;
  width: 50px;
  float:left;
}

p, span {
  display:inline-block;
  padding-left:2rem;
  color:#3C4F76;
  font-family: 'Cutive Mono', monospace;
  font-weight: bold;
  font-size: 28px;
  cursor:pointer;
}

a {
  color: #008BF8;
}

a:hover {
  color: #E43F6F;
}

li {
  font-size:14px;
  margin-bottom: 0.75rem;
}

.about-menu {
  display:none;
  position:absolute;
  z-index: 20;
  padding-right: 2rem;
  background-color: white;
}

.about-menu span {
  color: #008BF8;
}

.current {
  display:inline-block;
}

.current-menu {
  color:#008BF8;
}

.display-panel {
  padding: 2rem 0 0 2rem;
  margin-top: 2rem;
  display:inline;
}

.about-para, .work-para, .projects-para, .resume-para, .contact-para {
  display: none;
  font-size: 18px;
}

.contact-para {
  padding-left: 0;
}

.social-span {
  font-size: 18px;
  padding-left: 2rem;
}

.social {
  margin-top: 2rem;
  margin-left: 2rem;
  /*text-align: center;*/
}

.codewars {
  background-color: white;
  border-radius: 5px;
  display:inline-block;
  width:1.2em;
  height:1.2em;
  vertical-align: middle;
  margin-bottom: 7px;
}

svg {
  width: 100%;
  height:auto;
  fill: #008BF8;
}

a svg:hover #codewars {
  fill: #E43F6F;
}

.fa {
  color: #008BF8;
  margin-right: 0.5rem;
}

.fa:hover {
  color: #E43F6F;
}

@media only screen and (min-width: 310px) and (max-width: 359px) {
  .fa-bars {
    margin-top: 1rem;
    width: 50px;
    float:left;
  }
  .welcome {
    font-size: 22px;
    margin-top: 1.75rem;
    margin-left: 1rem;
    float:left;
    width: 220px;;
  }
  .about-menu {
    display:none;
    z-index: 20;
  }

}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .welcome {
    font-size: 34px;
    margin-left: 2rem;
    padding-top: 2rem;
    width: 600px;
  }
  .header {
    height: 15vh;
    width:100vw;
    padding-right:0 !important;
  }
  .fa-bars {
    display:none;
  }
  .about-menu p, .about-menu span {
    font-size: 18px;
    padding-left: 0.5rem;
    width: 25vw;
  }
  .about-menu {
    border-right: solid 3px #3C4F76;
    position:static;
    z-index: 0;
  }
  .display-panel p, .display-panel span {
    font-size: 18px;
    padding-left: 1rem;
  }
  .display-panel {
    margin-top: 1.25rem;
  }
  .email {
    margin-bottom: 0.75rem;
  }
  .social {
    text-align: left;
  }
  li {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  .welcome {
    font-size: 42px;
    margin-left: 4rem;
    width: 100%;
  }
  .fa-bars {
    display:none;
  }
  .about-menu p, .about-menu span {
    font-size: 22px;
    padding-left: 1rem;
    width: 20vw;
  }
  .about-menu {
    border-right: solid 3px #3C4F76;
    position:static;
    z-index: 0;
  }
  .display-panel {
    margin-top: 1.5rem;
    max-width: 700px;
  }
  li {
    font-size: 18px;
  }
  .contact-para, .email, .social-span {
    font-size: 18px;
    margin-left: 0;
    padding-left: 0;
  }
  .social {
    text-align: left;
  }
}