* {
    padding: 0;
    margin: 0;
}

body {
    position: relative;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #eee;
}

.ios-btn, .ios-blue-btn {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 5px 20px;
    border-radius: 30px;
    border: none;
    margin: 10px;
    transition: .2s;
    box-shadow: 0 5px 15px #00000018;
    &:hover {
        transform: scale(1.07);
    }
}

.ios-blue-btn {
    background-color: #007AFF;
    color: #fff;
    border-top: .9px solid #00ccff;
    border-bottom: .9px solid #00ccff;
    &:hover {
        background-color: #00aaff;
    }
}

/* Dark Mode */
/*
:root {
    --ios-btn-bg-color: #7f7f7f22;
    --ios-btn-active-bg-color: #7f7f7f33;
    --border-color: #222;
    --ios-btn-color: #fff;
}
*/

/* Light Mode bg #eee*/
:root {
    --ios-btn-bg-color: #7771;
    --ios-btn-active-bg-color: #fff4;
    --border-color: #fff;
    --ios-btn-color: #000;
}

.ios-btn {
    background-color: var(--ios-btn-bg-color);
    color: var(--ios-btn-color);
    border-top: .9px solid var(--border-color);
    border-bottom: .9px solid var(--border-color);
    &:hover {
        background-color: var(--ios-btn-active-bg-color);
    }
}