/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Jun 24, 2023, 11:00:10 PM
    Author     : zaki2
*/

:root {
    --text-color: #000;
    --accent-color: #5c789c;
    --background-color: #d5e1ec;
    --header-footer-background-color: #1b1b19;
}
/* --- General Settings --- */

    * {
        box-sizing: border-box;
        font-family: "Noto Sans", Arial, sans-serif;
        color: var(--text-color);
        /* border: 1px solid red !important; */
        margin: 0;
        padding: 0;
        /* font-size: 20px; */
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background-color);
        height: 100vh;
    }

    header, main, footer {
        display: flex;
        flex: 1 1 0;
        /* justify-content: center; */
        width: calc(100vw - 20px);
        min-width: 80px;
        max-width: calc(1080px - 20px);
    }

    header, footer {
        background-color: var(--header-footer-background-color);
        /* border-radius: 10px; */
        padding: 10px;
        flex: 0 1 0;
    }

    main {
        display: flex;
        /* flex-direction: column; */
        gap: 10px;
        padding: 10px;
        background-color: #fff;
    }

    ul, ol {
        padding-left: 15px;
    }

    h1 {
        font-size: 30px;
        color: var(--accent-color);
    }


/* Header styling */

    header {
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
        align-items: center;
    }

    .header-text {
        color: #fff;
    }

    img {
        width: 100%;
    }

    nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    nav ul {
        padding-left: 0px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
        flex: 1 1 100px;
    }

    nav ul li {
        background-color: #303030;
        display: block;
        text-align: center;
    }

    nav ul li:hover, nav ul li a:hover {
        background-color: var(--background-color);
        color: var(--header-footer-background-color);
    }

    nav ul li a {
        display: block;
        text-decoration: none;
        padding: 5px 0;
        width: 100%;
    }

/* Main styling */

    main {
        margin: 10px 0;
    }

    .main {
        width: 70%;
    }

    .sidebar {
        width: 30%;
        display: flex;
        flex-direction: column;
    }

    @media screen and (max-device-width: 600px) {
        main {
            flex-direction: column;
            gap: 30px;
        }
        .main, .sidebar {
            width: 100%;
        }

        .sidebar-divider {
            height: 5px;
            width: 100%;
            background-color: var(--accent-color);
        }
    }

    .prayer-widget {
        width: 100%;
        height: 358px;
        border: 1px solid #ddd;
    }

    a {
        color: #16738f;
    }

    
/* Footer styling */

    footer {
        justify-content: center;
        position: relative;
        bottom: 10px;
        margin-top: 10px;
    }

    .footer-text {
        color: #fff;
    }