html {
    scroll-behavior: smooth;
    height: 100%;
}

button:focus {
    outline: none;
}

button:active {
    background-color: #f7fafc;
}

#nav{
    color: #fff;
    z-index: 2;
}
.scroll-anchor { 
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}

.scrolled-nav {
    color: #000 !important; 
    background-color: white;
    animation-duration: 0.2s;
    animation-name: nav-scroll;
}

.scrolled-nav>a {
    color: #000 !important;
}

.scrolled-nav:after {
    content: '';
    height: 2px;
    background: #ECC94B;
    position: absolute;
    bottom: -2px;
    box-shadow: 0 4px 4px -4px rgba(0,0,0,.3);
  }

.unscrolled-nav {
    color: #fff !important;
    background-color: #1a202c;
    animation-name: nav-unscroll;
    animation-duration: 0.2s;
}

.unscrolled-nav>a {
    color: #fff !important;
}

.apple {
    position: relative;
}

.coming-soon {
    cursor: not-allowed;
}

.coming-soon::before {
    content: "Comming Soon";
    opacity: 0;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    width: 120px;
    bottom: 105%;
    left: 50%;
    margin-left: -60px;
    position: absolute;
    z-index: 10;
    transition:0.3s;
}

.coming-soon:hover::before { opacity:1; }


@keyframes nav-scroll {
    from {
        background-color: #1a202c;
        color: #fff !important;
    }

    to {
        background-color: white;
        color: #000 !important;
    }
}

@keyframes nav-unscroll {
    from {
        background-color: white;
        color: #000 !important;
    }

    to {
        background-color: #1a202c;
        color: #fff !important;
    }
}

.screenshot-wrap {
    position: relative;
    height: 600;
}

.screenshot {
    position:absolute;
    max-height: 600px;
    max-width: 287px;
    opacity: 0;
    -webkit-transition: opacity 2s ease;
    -moz-transition: opacity 2s ease;
    -ms-transition: opacity 2s ease;
    -o-transition: opacity 2s ease;
    transition: opacity 2s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    --moz-backface-visibility: hidden;
    --ms-backface-visibility: hidden;
    --o-backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
    -webkit-transform: translateZ(0) scale(1, 1);
    -moz-transform: translateZ(0) scale(1, 1);
    -ms-transform: translateZ(0) scale(1, 1);
    -o-transform: translateZ(0) scale(1, 1);
}

.screenshot.visible {
    opacity: 1;
}


.font-logo {
    font-family: 'Fira Sans', sans-serif;
    font-style: italic;
}