
body {
    background-color: white;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    color: black;
    font-family: "Manrope", sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.site-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.site-content-wrapper {
    padding: 20px 20px;
}

@media only screen and (min-width:660px) {
    .site-content-wrapper {
        padding: 46px 20px;
        max-width: 960px;
    }
}

@media only screen and (min-width:660px) {
    .content-container--small {
        display: none
    }
}

.content-container--small p {
    margin-top: 30px;
    margin-bottom: 30px;
}

.content-container--small .image-content {
    display: flex;
    justify-content: center
}

@media only screen and (max-width:960px) {
    .content-container--large {
        display: none
    }
}

@media only screen and (min-width:660px) {
    .content-container--large {
        display: flex
    }
}

.content-container--large p {
    margin-top: 40px;
    margin-bottom: 40px;
}

.content-container--large .image-content {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    justify-content: flex-end;
    margin-left: 20px;
    width: 50%;
}

.content-container--large .info-content {
    width: 50%;
}

.content-container--small .app-info-icon {
    width: 64px;
    vertical-align: middle;
    border-radius: 15px;
}

.content-container--large .app-info-icon {
    width: 88px;
    vertical-align: middle;
    border-radius: 15px;
}

.content-container--small .store-button {
    display: flex;
    justify-content: center;
}

.content-container--large .store-button {
    display: flex;
    justify-content: left; 
}

.store-button img {
    height: 57px;
}

.content-container--small .device-mockup {
    position: relative;
    height: 450px;
    width: 225px;
}

.content-container--small .device-mockup img {
    position: absolute;
    height: 450px;
}

.content-container--large .device-mockup {
    position: relative;
    height: 600px;
    width: 300px;
}

.content-container--large .device-mockup img {
    position: absolute;
    height: 600px;
}

.device-fade img {
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 16s;
}

@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#f1 { 
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}

#f2 {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}

#f3 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

#f4 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

/*footer {*/
/*    color: #bdc3c7;*/
/*    font-size: 14px;*/
/*    background-color: black;*/
/*    text-align: center;*/
/*    z-index: 99;*/
/*}*/
/**/
/*footer a {*/
/*    color: #bdc3c7;*/
/*    text-decoration: none;*/
/*}*/


footer {
    background-color: black;
    color: #bdc3c7;
    padding: 12px 0;
    text-align: center;
    z-index: 99;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-list li {
    display: inline;
}

.footer-list a {
    text-decoration: none;
    color: #bdc3c7;
    font-size: 14px;
}

.footer-list a:hover {
    color: #ddd;
}

.not-found {
    color: black;
    font-size: 30px;
    text-align: center;
    padding: 20px;
}

.document {
    margin: auto;
    max-width: 960px;
    padding-left: 16px;
    padding-right: 16px;
}

.document ul {
    list-style-position: inside;
    padding: 0;
}
