html {
  font-size: calc(0.6em + 0.6vw);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

h3 {
    margin-top: 1em;
}

h4 {
    margin-top: 0.6em;
}

#home nav {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

#home nav a {
    color: white;
}

#intro {
    font-size: 1.2em;
}

#intro .carousel-caption {
    bottom: 4.1em;
    right: 16%;
}

    #intro .carousel-caption h5 {
        font-size: calc(0.5em + 1.8vw);
        text-align: start;
        text-transform: capitalize;
    }

    #intro .carousel-caption a {
        color: white;
        text-decoration: none;
    }

#intro .screenshot {
    position: absolute;
    bottom: 7px;
    right: 7px;
    z-index: 9;
    width: 12.4%;
}

#intro .screenshot.zoomed {
    right: 14%;
    width: auto;
    height: 80%;
}

    #intro img.w-100 {
        min-height: 300px;
        object-fit: cover;
    }

.download-links p {
    text-align: center;
    padding: 1.5em;
}

.download-links a img {
    height: 3.6em;
}

.download-links a.qrcode img {
    height: 12em;
}

.download-links a.qrcode {
    text-decoration: none;
    font-size: 70%;
}

img.ss-howto {
    width: 18rem;
    margin: 2rem;
}

p.note {
    color: crimson;
    padding: 0.6em 0;
}