@font-face {
    font-family: JackwriteBold;
    src: url(JackwriteBold.ttf);
}

html,
body {
  margin: 0;
  background: #F5F5F6;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

a:link {
    color: #DE5F59;
    text-decoration:none;
}

a:visited {
    color: #DE5F59;
    text-decoration:none;
}

a:hover {
    color: #DE5F59;
    text-decoration:none;
}

a:active {
    color: #DE5F59;
    text-decoration:none;
}

.header {
    display: flex;
    column-gap: 5px;
    margin-left: 5px;
    margin-top: 5px;
}

.app-icon {
    height: 2em;
    align-self: center;
}

.marketing-title {
    color: #35475D;
    font-family: JackwriteBold;
    font-size: 2em;
    display: flex;
}

.caret {
    font-family: JackwriteBold;
    display: inline-block;
    background: #DE5F59;
    width: 0.15em;
    height: 2em;
}

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

.marketing-text {
    color: #35475D;
    text-align: center;
    font-size: 60px;
    font-weight: 600;
    margin-left: 25%;
    margin-right: 25%;
    letter-spacing: -0.02em;
    line-height: 1;
}

.marketing-text-medium {
    color: #35475D;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 3em;
    letter-spacing: 0.001em;
    line-height: 1.5;
    max-width: 750px;
}

.marketing-text-subheading {
    color: #F5F5F6;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.001em;
    line-height: 1.5;
    margin-top: 5px;
    margin-bottom: 5px;
}

.centered-text {
    text-align: center;
}

.marketing-text-small {
    color: #F5F5F6;
    font-size: 17px;
}

.feature-carousel-item {
    /* Will be toggled on via JS. */
    display:none;
    width: 100%;
    height: 450px;
    flex-grow: 1;
    margin-top: 2em;
    margin-bottom: 2em;
    justify-content: center;
}

.feature-carousel-item-inner {
    max-height: 450px;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
}

.screenshot {
    max-width:100%;
    max-height: 450px;
}

.animate-left {
  position:relative;
  animation:animateleft 0.4s;
}

.feature-highlights-container {
    background: #35475D;
    padding-top: 5em;
    padding-bottom: 5em;
}

.appstore-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.feature-highlights {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 5em;
    margin-left: 5em;
    margin-right: 5em;
    gap: 42px;
    padding-bottom: 2.5em;
}

.feature-highlights-entry {
    display: flex;
    flex-direction: column;
    max-width: 250px;
    flex-grow: 1;
    margin-left: auto;
    margin-right: auto;
    color: #F5F5F6;
}

@media only screen and (max-width: 600px) {
    .app-icon {
        height: 2.5em;
    }

    .caret {
        height: 2.5em;
    }

    .marketing-title {
        font-size: 2.5em;
    }

    .feature-highlights {
        flex-direction: column;
        text-align: center;
    }

    .feature-icon {
        align-self: center;
    }

    .feature-carousel-item {
        height: 300px;
    }

    .feature-carousel-item-inner {
        max-height: 300px;
    }

    .screenshot {
        max-height: 300px;
    }

    .marketing-text {
        font-size: 45px;
        margin-top: 45px;
        margin-left: 5%;
        margin-right: 5%;
    }

    .marketing-text-medium {
        margin-left: 5%;
        margin-right: 5%;
    }
}

.feature-icon {
    height: 2.5em;
    width: 2.5em;
}

.footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.001em;
    line-height: 1.5;
    margin-top: 2.5em;
    background: #F5F5F6;
    padding-top: 5em;
    padding-bottom: 5em;
}

.footer-heading {
    color: #35475D;
    font-size: 16px;
    font-weight: 800;
}

@keyframes animateleft {
  from {
    left:-300px;
    opacity:0
  }
  to {
    left:0;
    opacity:1
  }
}

.blink {
    animation: blink-animation 1.5s steps(5, start) infinite;
    -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}
@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* Blog cards */
.blog-card-link {
    text-decoration: none !important;
    display: block;
}

.blog-card {
    background: #fff;
    border: 1px solid #E0E4E8;
    border-radius: 16px;
    overflow: hidden;
    margin: 16px 20px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
    box-shadow: 0 4px 20px rgba(53, 70, 92, 0.12);
    transform: translateY(-2px);
}

/* Blog article body */
.blog-article p {
    color: #4A5568;
    line-height: 1.8;
    font-size: 17px;
}

.blog-article h2,
.blog-article h3,
.blog-article h4,
.blog-article h5 {
    color: #35465C;
    margin-top: 1.5em;
}

.blog-article ul,
.blog-article ol {
    color: #4A5568;
    line-height: 1.8;
}