@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

:root {
    --background: hsla(0, 0%, 98%, 1);
    --backgroundDark: hsla(215, 15%, 96%, 1);

    --text: hsla(215, 10%, 30%, 1);
    --textLight: hsla(215, 10%, 50%, 1);
    --textLighter: hsla(215, 10%, 75%, 1);

    --main: hsl(215, 10%, 44%);
    --mainLight: hsl(215, 10%, 94%);

    --osl: hsl(213, 42%, 51%);
    --oslLight: hsl(213, 42%, 90%);
    --oswl: hsl(330, 82%, 47%);
    --oswlLight: hsl(330, 82%, 90%);
    --kmlb: hsl(120, 60%, 45%);
    --kmlbLight: hsl(120, 100%, 90%);

    --shadow: hsla(0, 0%, 0%, 0.15);

    --statsGreen:hsla(113, 100%, 36%, 1);

    --success: hsla(113, 70%, 30%, 1);
    --successBackground: hsl(113, 70%, 95%);
    --alert: rgb(223, 41, 41);
    --alertBackground: hsl(0, 76%, 95%);

    --layoutMaxWidth: 1200px;
    --breakpoint: 600px;
    --borderRadius: 2px;
}

html,
body {
    font-family: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-rendering: optimizeLegibility;
    background-color: var(--background);
    color: var(--text);
    width: 100vw;
    min-height: 100vh;
    height: auto;
    margin: 0;
    font-size: 13px;
    min-width: 0;

    scroll-behavior: smooth;
    scroll-padding: 6rem;
}

/* BODY STYLING */

body {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    gap: 4rem;

    background-color: var(--background);

    align-items: center;
    justify-content: space-between;

    min-height: 100%;
}

/* MAIN, SECTION STYLING */

main {
    max-width: var(--layoutMaxWidth);

    background-color: var(--backgroundDark);

    border-radius: 0 0 var(--borderRadius) var(--borderRadius);

    padding: 8rem 2rem 2rem;

    min-height: 100%;
}

main.landing {
    padding-top: 4rem;
}

main.login,
main.signup {
    max-width: 500px;
    margin-top: 0;

    background-color: transparent;
}

main,
section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    justify-items: stretch;
    text-align: start;

    gap: 2rem;
    width: 100%;
}

/* DIV STYLING */

div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    gap: 1rem;
    text-align: left;

    width: 100%;
}

.center {
    text-align: center;
}

@media (width >=600px) {

    html,
    body {
        font-size: 14px;
    }

    main {
        padding: 12rem 4rem 4rem;
    }

    section {
        gap: 2rem;
    }
}

/* HEADER STYLING */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.8rem;
}

h6 {
    font-size: 0.6rem;
}

.wordmark {
    font-family: 'Lobster', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* font-style: italic; */
    color: var(--main);
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
    font-weight: normal;
    margin-bottom: 0;
}

/* TEXT STYLING */
.gentle {
    color: var(--textLight);
    font-weight: normal;
}

/* TEXT STYLING */
.subtitle {
    font-style: italic;
    color: var(--main);
    padding: 0;
}

/* FEATHER ICON STYLING */

.icon {
    max-height: 1.25rem;
    width: auto;
}

.icon.special {
    color: orange;
}

.icon.gentle {
    color: var(--textLighter);
}

/* BUTTON STYLING */

button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;

    outline: none;
    padding: 0.8rem 1.25rem 0.8rem 1rem;
    font: inherit;
    font-size: 0.9rem;
    color: inherit;
    border: none;
    border-radius: var(--borderRadius);

    gap: 0.5rem;

    cursor: pointer;
    font-weight: 600;

    transition: 300ms;

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

button:hover {
    filter: brightness(95%);
}

button:active {
    filter: brightness(90%);
}

button.success {
    background-color: var(--success);
    color: var(--background);
}

button.warn {
    background-color: var(--alert);
    color: var(--alertBackground);
}

/* BOLD & ITALIC STYLING */

b {
    font-weight: 700;
    color: var(--main);
}

.osl {
    color: var(--osl);
}

.oswl {
    color: var(--oswl);
}

.kmlb {
    color: var(--kmlb);
}

i {
    font-style: italic;
}

/* IMAGE STYLING */
img {
    width: 200px;
}

/* PARAGRAPH STYLING */

p {
    line-height: 1.3rem;
    padding: 1rem 0;
}

/* UNORDERED LIST/ LIST ITEM STYLING */

ol {
    list-style: decimal;
}

ul, ol {
    margin: 0 0 1rem 0;
}

ul li {
    border-left: 1px solid var(--text);
}

li {
    line-height: 1.3rem;
    padding-left: 0.5rem;
    margin: 0.5rem 0 0 0.5rem;
}

span {
    line-height: 1.3rem;
}

/* LINK STYLING */

a:not(.navLink) {
    color: var(--main);
    transition: 300ms;
}

.iconLink {
    color: var(--main);
    text-decoration: underline;
    cursor: pointer;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.iconLink .feather {
    height: 1rem;
    width: auto;
}

/* a:hover:not(.navLink),
.iconLink:hover {
    filter: brightness(105%);
}

a:active:not(.navLink),
.iconLink:active {
    filter: brightness(95%);
} */

a:visited,
.iconLink:visited {
    color: var(--main)
}

/* HR STYLING */

hr {
    border: none;
    border-top: 1px solid var(--shadow);
    border-radius: 100px;
    width: 100%;

    margin: 2rem 0;
}