/* ===========================================
   SELARAS
   Balanced Family Finance
=========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    --primary:#FFD600;
    --primary-dark:#F6C90E;

    --background:#F5F5F7;

    --white:#FFFFFF;

    --black:#202020;

    --text:#333333;

    --text-light:#8A8A8A;

    --border:#ECECEC;

    --income:#2ECC71;

    --expense:#FF5B5B;

    --radius:24px;

    --shadow:
        0 15px 35px rgba(0,0,0,.06);

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--background);

    color:var(--text);

}

/* ========================= */

.app{

    max-width:430px;

    min-height:100vh;

    margin:auto;

    background:white;

    position:relative;

    overflow:hidden;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

/* Desktop */

@media(min-width:768px){

body{

display:flex;

justify-content:center;

align-items:center;

padding:40px;

}

.app{

height:900px;

border-radius:40px;

overflow:hidden;

}

}

/* ========================= */

.page{

padding:20px;

padding-bottom:95px;

}

/* ========================= */

.card{

background:white;

border-radius:24px;

box-shadow:var(--shadow);

}

/* ========================= */

h1{

font-size:28px;

font-weight:700;

}

h2{

font-size:22px;

font-weight:700;

}

h3{

font-size:18px;

font-weight:600;

}

p{

font-size:14px;

color:var(--text-light);

}

/* ========================= */

.mt-1{

margin-top:8px;

}

.mt-2{

margin-top:16px;

}

.mt-3{

margin-top:24px;

}

.mt-4{

margin-top:32px;

}

.mb-1{

margin-bottom:8px;

}

.mb-2{

margin-bottom:16px;

}

.mb-3{

margin-bottom:24px;

}

.text-income{

color:var(--income);

}

.text-expense{

color:var(--expense);

}

/* ========================= */

.btn{

border:none;

cursor:pointer;

font-family:inherit;

}

.btn-primary{

background:var(--primary);

color:#222;

padding:14px 22px;

border-radius:18px;

font-weight:600;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-2px);

}

/* ========================= */

::-webkit-scrollbar{

width:0;

}

.phone-frame{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

}

@media(min-width:768px){

.phone-frame{

padding:30px;

}

.app{

border-radius:38px;

}

}

/* =======================================
HEADER
======================================= */

.header{

display:flex;

justify-content:space-between;

align-items:flex-start;

padding:24px 20px 10px;

}

.app-title{

font-size:28px;

font-weight:700;

letter-spacing:.5px;

color:#222;

}

.welcome{

margin-top:8px;

font-size:15px;

color:#666;

}

.today{

display:block;

margin-top:4px;

font-size:12px;

color:#999;

}

.notification-btn{

width:48px;

height:48px;

border:none;

background:#fff;

border-radius:16px;

box-shadow:0 8px 20px rgba(0,0,0,.06);

position:relative;

cursor:pointer;

transition:.25s;

}

.notification-btn:hover{

transform:translateY(-2px);

}

.notification-btn i{

font-size:20px;

}

.notification-dot{

width:10px;

height:10px;

background:#ff5252;

border-radius:50%;

position:absolute;

top:12px;

right:12px;

border:2px solid white;

}