body {
    background: #f5f5f7;
}

img {
    pointer-events: none;
}

#nav-bar {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    background: rgba(5,6,26,0.7);
    transition: 200ms linear;
}

#nav-bar.scrolled {
    background: rgba(245, 245, 247, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
}

#nav-bar img {
    filter: invert(0%) sepia(6%) saturate(26%) hue-rotate(224deg) brightness(97%) contrast(107%);
    transition: 200ms linear;
}

#nav-bar.scrolled img {
    filter: invert(99%) sepia(0%) saturate(7220%) hue-rotate(147deg) brightness(112%) contrast(101%);
}

#nav-bar a, #nav-bar a:hover, #nav-bar a:active, #nav-bar a:visited {
    color: #f5f5f7;
    transition: 200ms linear;
}

#nav-bar.scrolled a, #nav-bar.scrolled a:hover, #nav-bar.scrolled a:active, #nav-bar.scrolled a:visited {
    color: #000000;
}

.app-icon {
    width: 80px;
    height: 80px;
    border-radius: 20%;
}

.hero-section {
    padding-top: 150px;
}

.hero-phone {
    max-height: 600px;
}

.highlight-phone {
    width: 320px;
}

.bg-sky {
    background: linear-gradient(rgba(61,98,153,1), rgba(130,165,217,1));
    color: white;
}

.bg-night {
    background: url("images/stars.png"), linear-gradient(rgba(5,6,26,1), rgba(38, 51, 84, 1));
    background-size: cover;
    color: white;
}

.highlight {
    background: white;
    border-radius: 25px;
}

.feature-icon {
    width: 24px;
    height: 24px;
}

.phone-frame {
    width: 320px;
    position: absolute;
}

.phone-video {
    width: 280px;
    padding-left: 7px;
    padding-right: 7px;
}