:root {
    --gray-1000: #000000;
    --gray-900: #1C1C1E;
    --gray-800: #2C2C2E;
    --gray-700: #3A3A3C;
    --gray-600: #48484A;
    --gray-500: #636366;
    --gray-400: #8E8E93;
    --gray-300: #AEAEB2;
    --gray-200: #C7C7CC;
    --gray-100: #D1D1D6;
    --gray-50: #E5E5EA;
    --gray-10: #F2F2F7;
    --text-color: #fff;    
    --primary-color: #4deeff;
    --secondary-color: #32adc8;
}

/* ---- GLOBAL STYLES ---- */
* {
    margin: 0;
    padding: 0;
}

/* START CUSTOM SCROLL BAR */
@-moz-document url-prefix() {
/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--gray-500) var(--gray-700);
    }
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    width: 11px;
}

*::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--gray-500);
}

*::-webkit-scrollbar-track:active {
    background-color: var(--gray-500);
}

*::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--gray-700);
    border: 2px solid var(--gray-500);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}

*::-webkit-scrollbar-thumb:active {
    background-color: var(--secondary-color);
}
/* END CUSTOM SCROLL BAR */

html {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 28px;
    width: 100%;
    min-width: 325px;
    background-color: var(--gray-1000);
    color: var(--gray-10);
}

h1, .privacy-policy h2:not(.privacy-policy nav h2), h3, h4, h5, h6, li, .privacy-policy p {
    margin:0 0 16px;
}

h1 {
    font-size: 40px;
    line-height:60px;
}

h1, h2 {
    font-weight:700;
}

h2 {
    font-size: 32px;
    line-height:48px;
}

h3 {
    font-size: 24px;
    line-height:36px;
}

h3, h4 {
    font-weight:700;
}

h4 {
    font-size: 20px;
    line-height:30px;
}

h5, h6 {
    font-size: 16px;
    line-height: 24px;
    font-weight:700;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--primary-color);
}

a:hover {
    color: var(--secondary-color);
}


/* ---- HEADER STYLES ---- */
header {
    background-color: var(--gray-1000);
    padding: 18px 24px;
    margin-top: 48px;
}

header h1, header p {
    margin: 0;
}

header h1 {
    text-align: center;
}

/* ---- NAV STYLES ---- */ 
nav {
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* Fixed position */
    top: 0; /* Stick to the top */
    left: 0;
    width: 100%; /* Full width */
    z-index: 1000; /* Ensure it stays on top of other content */
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 30%, rgba(0,0,0,1) 100%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gray-800);
}
  
nav h2 {
    margin: 0;
    position: absolute; /* Hide the heading visually, but keep it accessible for screen readers */
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dropdown-toggle::after {
    display: none;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
    height: fit-content;
}

nav ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

nav ul li:not(.dropdown-menu li) {
    width: 75px;
}

nav img {
    width: 50px;
    height: 50px;
    clip-path: url(#ios-icon-mask);
    object-fit: cover;
}

nav ul li a {
    text-decoration: none;
}

.all-apps a {
    display: flex;
}

.all-apps svg {
    width: 10px;
    height: auto;
    margin-right: 5px;
}

.all-apps svg path {
    fill: var(--primary-color);
}

.all-apps a:hover svg path {
    fill: var(--secondary-color);
}

nav ul li.home {
    margin: 0 auto;
}

nav ul li.menu button {
    padding: 0px 7px;
    font-size: 22px;
}

nav ul li.menu .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 100px;
    background-color: #444;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

nav ul li.menu .dropdown li a {
    padding: 10px 20px;
    display: block;
    color: white;
}

nav ul li.menu .dropdown.show {
    display: block;
}

/* ---- MAIN STYLES ---- */
main {
    margin: 18px;
}

.privacy-policy main {
    margin: 32px;
    max-width: 1024px;
}

main section:not(main > section:last-of-type) {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}

#content-container section {
    background: radial-gradient(circle at 100% 100%, var(--gray-900) 0, var(--gray-900) 15px, transparent 15px) 0% 0%/16px 16px no-repeat,
            radial-gradient(circle at 0 100%, var(--gray-900) 0, var(--gray-900) 15px, transparent 15px) 100% 0%/16px 16px no-repeat,
            radial-gradient(circle at 100% 0, var(--gray-900) 0, var(--gray-900) 15px, transparent 15px) 0% 100%/16px 16px no-repeat,
            radial-gradient(circle at 0 0, var(--gray-900) 0, var(--gray-900) 15px, transparent 15px) 100% 100%/16px 16px no-repeat,
            linear-gradient(var(--gray-900), var(--gray-900)) 50% 50%/calc(100% - 2px) calc(100% - 32px) no-repeat,
            linear-gradient(var(--gray-900), var(--gray-900)) 50% 50%/calc(100% - 32px) calc(100% - 2px) no-repeat,
            linear-gradient(45deg, transparent 0%, var(--gray-500) 100%);
    border-radius: 16px;
    padding: 16px;
    box-sizing: border-box;
}

main h2, main p {
    margin: 0;
}

main h2:not(.privacy-policy main h2) {
    text-align: center;
}

main img {
    width: 70%;
    max-width: 300px;
}

#home-screen-icon {
    width: 100px;
    height: auto;
    clip-path: url(#ios-icon-mask);
}

main p:not(.privacy-policy main p) {
    padding: 10px;
}

main > section:last-of-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#app-store {
    display: flex;
    justify-content: center;
}

#app-store img {
    width: 40%;
    height: auto;
    min-width: 125px;
    max-width: 200px;
}


/* ---- MEDIUM SCREEN STYLES ---- */
@media screen and (min-width: 834px) {
    /* ---- GLOBAL STYLES ---- */
    body {
        display: grid;
    }

    /* ---- HEADER STYLES ---- */
    header {
        justify-self: center;
        max-width: 787px;
    }

    /* ---- MAIN STYLES ---- */
    main {
        justify-self: center;
    }

    #content-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #content-container section {
        width: 787px;
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-template-rows: 100px 1fr;
        justify-items: center;
        margin-right: 32px;
    }

    #content-container h2 {
        grid-column: 2 / 3;
    }

    #content-container img {
        width: 100%;
        grid-row: 1 / 3;
    }

    #content-container p {
        grid-column: 2 / 3;
        padding: 24px;
    }
}