html,
body {
  width: 100%;
  height: 100%;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 1em;
  color: #6B818C; }

a:hover,
a {
  color: #6B818C; }

h1 {
  font-size: 3em; }

h2 {
  font-size: 2em; }

.navbar {
  background: #ffe7e7; }

.nav-pills .nav-item.open .nav-link, .nav-pills .nav-item.open .nav-link:focus, .nav-pills .nav-item.open .nav-link:hover, .nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover {
  background: #ffdddd;
  color: #ff5d5d; }

#intro {
  background: url("../assets/bg.png") no-repeat 0 0;
  background-size: cover; }
  #intro .profile-picture {
    background: url("../assets/profile.jpg") no-repeat;
    height: 200px;
    width: 200px;
    background-size: contain;
    border-radius: 100px; }

#contact input.btn {
  width: 100%;
  background: #ffc3c3; }

ul.contact {
  list-style: none;
  font-size: 18px; }

section {
  height: 100%; }
  section .container {
    height: 100%;
    text-align: center; }
  section.odd {
    background: #FFF6F6; }
  section.even {
    background: #fff; }

.vertical-align {
  top: 50%;
  position: relative;
  transform: translate(0, -50%); }

.loading {
  position: fixed;
  z-index: 2000;
  height: 120px;
  width: 120px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }
  .loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF6F6; }

.spinner {
  border: 16px solid #ffc3c3;
  border-top: 16px solid #FFF6F6;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/* Small devices (landscape phones, 576px and up) */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  body {
    font-size: 1em; }

  .logo {
    max-width: 120px; }

  .contact {
    list-style-type: none;
    text-align: left;
    font-size: 1.2em; } }
/* Large devices (desktops, 992px and up) */
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  body {
    font-size: 1.2em; }

  h3 {
    font-size: 1.5em; }

  .logo {
    max-width: 150px; } }

/*# sourceMappingURL=screen.css.map */