html {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background:
            linear-gradient(60deg, blue, pink);
}

body {
    width: 70vw;
    margin: var(--nav-bar-height) auto 1.5rem auto;
    background-color: white;
    padding: 0 4rem 4rem 4rem;
    border: 0.7rem outset black;
}

    h1 {
        font-size: 3rem;
        text-align: center;
        margin: 0;
        padding: 2rem 0;
        color: black;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {font-size: 1.5rem;
        text-align: center;
    }

    p,
    li {
        font-size: 1.1rem;
        line-height: 2;
        /*letter-spacing: 1px;*/
        text-align: justify;
    }

    img {
        display: block;
        margin: 0 auto;
    }

    .image-container {
        position: relative;
        height: 31rem;
    }

    .top-image,
    .bottom-image  {
        height: 31rem; /*equals to height of a container*/
        width: auto; /*auto to not distort the img*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .top-image:hover{
        opacity: 0;
    }

    a:hover {
        text-decoration: none;
    }

    .programming-skills li {
        list-style: "👍 ";
    }

    .programming-skills .github {
        list-style: "🤟 ";
    }

    .about-me li {
        list-style: "🤝 ";
    }

    .contact-info .mail {
        list-style: "🪱" ;
    }

    .contact-info .phone {
        list-style: "🪲";
    }

    .contact-info .instagram {
        list-style: "🪰";
    }

    .contact-info .facebook {
        list-style: "🪳";
    }

    :root {
        --loading-bar-width: 100%;
    }

    #loading-bar-container {
        position: static;
        height: 1.9rem;
        width: var(--loading-bar-width);
        border: 3px outset black;
        background-color: white;
        margin: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      
      #loading-bar {
        width: calc(3% - var(--loading-bar-width));
        background: linear-gradient(60deg, blue, pink);
        padding: 1rem;
        z-index: 1;
      }
      
      #loading-bar-container p {
        z-index: 2;
        color: black;
        font-weight: bold;
        font-size: 1em;
        }

      iframe {
          position: static;
          height: 31rem;
          width: 100%;
          border: 3px outset black;
      }

    :root {
        --nav-bar-height: 3rem;
    }
      .navigation-bar {
          width: 100%;
          height: var(--nav-bar-height);
          background-color: black;
          padding: 0.5rem;
          display: flex;
          flex-direction: row;
          position: absolute;
          top: 0;
          left: 0;
      }

      .nav-links{
          display: grid;
          grid-template-columns: 8fr 1fr 1fr;
          padding-bottom: 1rem;
      }

      .nav-links li {
          display: flex;
          padding-left: 3rem;
          list-style-type: none;
      }

      .nav-home a,
      .task-manager-link a,
      .blog-link a {
          text-decoration-line: none;
          color: white;
      }