/* fonts */
  @import url(https://fonts.googleapis.com/css?family=Neucha|Cabin+Sketch&display=swap);
  @import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&display=swap');
  @import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap);

  /* light-mode */
  body.light-mode {
   background-color: #f8f9fa;
    color: #121212;
  }
  .blue.light-mode {
      color: #17a2b8;
      font-weight: bold;
  }
  a.light-mode,
  a:hover.light-mode
  {
    text-decoration: none;
    color: #121212;
  }

  /* default */
  body {
    background-color: #343a40;
    color: #fff;
  }

  a, a:hover {
    text-decoration: none;
    color: #fff;
  }
  .resume-section {
    padding: 30px;
    border-bottom: 1px solid #666;
  }
  h2 {
    font-size: 400%;
    font-family: "Cabin Sketch", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  h3 {
    font-size: 200%;
    font-family: "Cabin Sketch", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  .contact-info {
    list-style: none;
    padding-left: 0;

  }
  .contact-info li {
    margin-bottom: 10px;
  }
  .profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
  }
  .large {
    font-size: 18px;
  }
  .x-large {
    font-size: 18px;
  }
  .blue {
    color: #71ffff;
  }
  .skill, .hobby {
    margin-bottom: 10px;
  }
  .hobby {
    font-style: italic;
  }
  .picto-item {
    position: relative;
    cursor: help;
    border-radius: 50%;
  }
  .picto-item:hover:after, .picto-item:focus:after {
    content: attr(aria-label);
    position: absolute;
    top: 2.4em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    white-space: nowrap;
    padding: 5px 14px;
    background: #222222;
    color: #71ffff;
    /*font-weight: bold;*/
    border-radius: 4px;
    font-size: 1rem;
    opacity: 0.9;
  }
  [aria-label]:hover:before, [aria-label]:focus:before {
    content: "▲";
    position: absolute;
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: #353535;
  }
  [aria-label]:focus {
    outline: none;
  }
  @media print {
    body {
      zoom: 95%;
      color: #000;
    }
    a {
      color: #000;
    }
    .blue {
      color: #17a2b8;
    }
    a,
    a:visited {
      text-decoration: underline;
    }
    .contact-info {
      line-height: normal;
     }
    .noprint {
      display: none;
    }
    .resume-section {
      padding: 20px;
      border-bottom: 1px solid #666;
    }
    .mt-5, .my-5 {
      margin-top: 0rem!important;
    }
  }