html,
body {
    font-family: "Inter", sans-serif;
    background-color: #100f1e;
    color: white;
}

p {
    margin: 0px;
}

.navbar {
    background-color: #100f1e;
}

.navbar .nav-link {
    color: white;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.navigation-logo {
    height: 46px;
}

#home {
    background-image: url("../img/landing/home-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 64px 0px 98px 0px;
}

#home p.title {
    font-weight: 700;
    font-size: 52px;
    line-height: 72px;

    letter-spacing: -0.02em;
    text-transform: uppercase;
}

#home p.subtitle {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    padding: 24px 0px 48px 0px;
}

#home form {
    display: inline-block;
}

#home form button {
    border: 0 none;
}

#home button.locale-btn {
    background-color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #344054;
    padding: 16px 28px;
    border-radius: 30px;
    margin: 0px 6px;
}

.marquee {
    overflow: hidden;
    height: 246px;
    margin-bottom: 32px;
}

.marquee.blogs {
    height: 300px;
}

.marquee.blogs a {
    color: white;
    text-decoration: none;
}
.marquee.blogs span {
    float: left;
}

.marquee.blogs img {
    float: left;
}

.marquee.blogs .blog {
    display: inline-block;
    width: 246px;
    margin-right: 32px;
}

.marquee.blogs .blog p {
    text-align: center;
    padding-top: 10px;
    float: left;
    height: 40px;
    width: 100%;
}

.marquee img {
    height: 246px;
    width: 246px;
    border-radius: 40px;
    margin-right: 32px;
}

#premium-podcasts {
    padding: 64px 0px 66px 0px;
}

#podcast-scene p.title,
#premium-podcasts p.title {
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
}

#podcast-scene p.subtitle,
#premium-podcasts p.subtitle {
    padding-top: 20px;
    padding-bottom: 30px;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
}

#for-podcasters {
    background-color: #161b29;
    padding: 40px 0px 67px 0px;
}

#for-podcasters p.title {
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #fab915;
    padding-bottom: 40px;
}

#for-podcasters p.heading {
    font-weight: 600;
    font-size: 30px;
    line-height: 44px;
    padding-bottom: 16px;
}

#for-podcasters p.subtitle {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 24px;
}

#for-podcasters a.action,
#podcast-scene a.action {
    margin-top: 16px;
    display: inline-block;
    padding: 16px 28px;
    background: #ec1b52;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 30px;
    text-decoration: none;
    color: white;
}

#podcast-scene {
    padding: 40px 0px;
}

#podcast-scene a.action {
    background-color: #1877f2;
}

#download-app {
    background-color: #fab915;
}

#download-app p.title {
    font-weight: 600;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: #000000;
}

#download-app p.subtitle {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    padding-top: 24px;
    color: #000000;
    padding-bottom: 40px;
}

#download-app .store-download {
    width: 132px;
    display: inline-block;
    padding-right: 12px;
}

footer {
    background-color: #101828;
    padding: 48px 0px;
}

footer p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #98a2b3;
}

footer a {
    float: right;
    padding: 0px 12px;
    text-decoration: none;
}

@media screen and (max-width: 500px) {
    #home,
    #premium-podcasts {
        padding: 32px 0px 44px 0px;
    }
    #home p.title {
        font-size: 20px;
        line-height: inherit;
    }
    #home p.subtitle {
        font-size: 14px;
        padding: 12px 0px 32px 0px;
    }
    #home button.locale-btn {
        padding: 10px 22px;
        font-size: 14px;
    }

    #podcast-scene p.title,
    #premium-podcasts p.title {
        font-size: 24px;
    }

    #podcast-scene p.subtitle,
    #premium-podcasts p.subtitle {
        font-size: 14px;
        line-height: inherit;
    }

    .marquee {
        height: 150px;
        margin-bottom: 16px;
    }

    .marquee.blogs .blog {
        width: 150px;
    }

    .marquee.blogs {
        height: 220px;
    }

    .marquee img {
        height: 150px;
        width: 150px;
        border-radius: 20px;
        margin-right: 16px;
    }

    #for-podcasters {
        padding: 20px 0px 34px 0px;
    }

    #for-podcasters p.title {
        font-size: 24px;
        text-align: center;
    }

    #for-podcasters .action-container {
        text-align: center;
    }

    #for-podcasters p.heading {
        font-size: 18px;
        line-height: inherit;
    }

    #for-podcasters p.subtitle {
        font-size: 14px;
        line-height: inherit;
    }

    #for-podcasters a.action,
    #podcast-scene a.action {
        padding: 8px 14px;
        font-size: 12px;
        margin-bottom: 16px;
    }

    #download-app p.title {
        font-size: 28px;
        line-height: inherit;
        text-align: center;
    }
    #download-app p.subtitle {
        font-size: 18px;
        line-height: inherit;
    }
    #download-app .store-download-container {
        text-align: center;
    }
    footer {
        padding: 20px;
    }
    footer a {
        float: none;
    }
    footer .social-links {
        text-align: center;
        padding-bottom: 16px;
    }
}