/* =========================
   YOUR OS
   Main Style
   ========================= */

   :root {
    --main-color: #2e9d50;
    --dark-color: #176b35;
    --light-color: #eaffea;
    --card-color: #ffffff;
    --text-color: #222222;
    --border-color: #b7d8bd;
}


/* =========================
   Themes
   ========================= */

body.theme-green {
    --main-color: #2e9d50;
    --dark-color: #176b35;
    --light-color: #eaffea;
    --border-color: #b7d8bd;
}

body.theme-blue {
    --main-color: #2878d8;
    --dark-color: #174f91;
    --light-color: #eaf4ff;
    --border-color: #a9c9ed;
}

body.theme-purple {
    --main-color: #8b55c7;
    --dark-color: #5c348a;
    --light-color: #f5ecff;
    --border-color: #d3b9eb;
}

body.theme-pink {
    --main-color: #e85b9e;
    --dark-color: #a83268;
    --light-color: #fff0f7;
    --border-color: #efbdd5;
}

body.theme-red {
    --main-color: #d94b4b;
    --dark-color: #8f2929;
    --light-color: #fff0f0;
    --border-color: #e4b1b1;
}

body.theme-orange {
    --main-color: #e88924;
    --dark-color: #a9570b;
    --light-color: #fff5e8;
    --border-color: #eac79e;
}

body.theme-yellow {
    --main-color: #c99d18;
    --dark-color: #866800;
    --light-color: #fffbea;
    --border-color: #e8d98e;
}

body.theme-cyan {
    --main-color: #20a9b5;
    --dark-color: #11737c;
    --light-color: #e9fcff;
    --border-color: #a8dfe4;
}

body.theme-black {
    --main-color: #444444;
    --dark-color: #111111;
    --light-color: #eeeeee;
    --border-color: #aaaaaa;
}


/* =========================
   Body
   ========================= */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 30px;

    background-color: var(--light-color);
    color: var(--text-color);

    transition: 0.3s;
}


/* =========================
   Text Size
   ========================= */

body.text-small {
    font-size: 14px;
}

body.text-medium {
    font-size: 17px;
}

body.text-large {
    font-size: 21px;
}


/* =========================
   Headings
   ========================= */

h1 {
    color: var(--main-color);
}

h2 {
    color: var(--dark-color);
}


/* =========================
   Buttons
   ========================= */

button {
    padding: 9px 15px;
    margin: 5px;

    border: none;
    border-radius: 12px;

    cursor: pointer;

    background-color: var(--main-color);
    color: white;

    font-size: 14px;

    transition: 0.2s;
}

button:hover {
    transform: scale(1.04);
    background-color: var(--dark-color);
}


/* =========================
   Inputs
   ========================= */

input,
select {
    padding: 9px;
    margin: 5px;

    border: 2px solid var(--border-color);
    border-radius: 10px;

    background-color: white;
}


/* =========================
   Links
   ========================= */

a {
    color: var(--main-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* =========================
   Cards
   ========================= */

.card {
    background-color: var(--card-color);

    border: 2px solid var(--border-color);

    padding: 15px;
    margin: 15px 0;

    border-radius: 15px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}


/* =========================
   Shape
   ========================= */

body.shape-heart .card {
    border-radius: 25px;
}

body.shape-star .card {
    border-radius: 4px;
    border-style: dashed;
}

body.shape-bow .card {
    border-radius: 30px;
}

body.shape-flower .card {
    border-radius: 50px;
}

body.shape-butterfly .card {
    border-radius: 20px 45px 20px 45px;
}

body.shape-cloud .card {
    border-radius: 35px;
}

body.shape-moon .card {
    border-radius: 50px 15px 50px 15px;
}


/* =========================
   Shape Decoration
   ========================= */

body.shape-heart::before {
    content: "❤️";
}

body.shape-star::before {
    content: "⭐";
}

body.shape-bow::before {
    content: "🎀";
}

body.shape-flower::before {
    content: "🌸";
}

body.shape-butterfly::before {
    content: "🦋";
}

body.shape-cloud::before {
    content: "☁️";
}

body.shape-moon::before {
    content: "🌙";
}

body::before {
    position: fixed;

    top: 15px;
    right: 20px;

    font-size: 30px;

    z-index: 1000;

    pointer-events: none;
}


/* =========================
   Effects
   ========================= */

body.effects-on .card {
    transition: 0.25s;
}

body.effects-on .card:hover {
    transform: translateY(-3px);
}

body.effects-off button:hover {
    transform: none;
}

body.effects-off .card:hover {
    transform: none;
}


/* =========================
   Horizontal line
   ========================= */

hr {
    border: none;
    border-top: 2px solid var(--border-color);

    margin: 25px 0;
}