/*
Szín    	    Hex kód     Mire jó
Sárga	        #ffd700	    kiemelések, figyelemfelhívás
Piros	        #ff4500	    hibák, fontos gombok
Fekete	        #000000	    erős szöveg
Sötétszürke	    #333333	    alap szöveg, jól olvasható
Világosszürke	#f0f0f0	    háttér, panel, menü



*/
body {
    margin: 0;
    font-family: Arial, sans-serif;

    /*display: grid;
    grid-template-rows: 60px 1fr;
    height: 100vh;*/
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    height: 60px;
    background: #000;
    color: #fff;

    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 10px;

    z-index: 1000;
}


#logo {
    padding-right: 120px;
}

/*
header button {
    background: #331d93;
    color: yellow;
    font-family: cursive;
    font-weight: bold;
    font-size: 20px;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 10px;
}
*/

header button {
    width: 120px;
    padding: 4px 16px;
    margin-bottom: 10px;
    background: linear-gradient(145deg, #002b80, #001a4d);
    /* sötétkék kapszula */
    font-family: cursive;
    color: #ffd700;
    /* sárga felirat */
    border: 1px solid #003399;
    border-radius: 20px;
    /* kapszula forma */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    /* finom folthatás */
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.15), inset -2px -2px 4px rgba(0, 0, 0, 0.4),
        2px 2px 6px rgba(0, 0, 0, 0.3);
}

header button:hover {
    /* kifényesedés */
    background: linear-gradient(145deg, #0039b3, #002266);
    color: #ffffff;
    /* hover alatt fehér felirat */
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.3), inset -1px -1px 3px rgba(0, 0, 0, 0.3), 3px 3px 8px rgba(0, 0, 0, 0.4);
}

header button:active {
    /* lenyomás hatás */
    transform: scale(0.97);
    background: linear-gradient(145deg, #001f66, #001033);
}

.layout {

    margin-left: 10px;
    /* bal menü helye */
    padding-top: 70px;
    /* header helye */
    padding-bottom: 60px;
    /* hogy ne takarja ki a footer */
    min-height: calc(100vh - 130px);
    /* 100vh - header(60px) - footer(40px) - extra tér (30px) */
    width: calc(100% - 240px);
    box-sizing: border-box;
}

/*
#sideMenu {}
*/
aside#sideMenu {
    position: fixed;
    top: 70px;
    /* header alatt */
    bottom: 60px;
    /* footer fölött */
    left: 0;

    width: 220px;
    /* tetszőleges szélesség */
    overflow-y: auto;
    /* görgethető menü */
    padding: 10px;

    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: red;

    border-right: 2px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;

    z-index: 900;
    /* header alatt, tartalom fölött */
}

main {
    margin-left: 240px;
    /* menü szélessége + 20px tér */
    padding: 20px;
    width: calc(100% - 150px);
    box-sizing: border-box;
}


main#content {
    /*background-color: lightyellow;*/
    background: linear-gradient(to bottom right, #0202feef, #73aabc);
    color: #cef542d1;

    height: calc(100vh - 130px);     /* 60px header + 40px footer */
    overflow-y: auto;     /* görgethető tartalom */
    padding: 20px;
    box-sizing: border-box;
}


h1 {
    font-family: cursive;
    color: #ffd700;
}

p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16pt;
}


aside {
    background: #331d93;
    padding: 1rem;
    border-right: 1px solid #ccc;
}

aside button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
}

.balmenu-btn {
    width: 70%;
    background: yellow;
    color: #331d93;
    font-family: cursive;
    font-weight: bold;
    border: 3px solid #bbb;
    border-radius: 20px;
    padding: 3px;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
}

.balmenu-btn:hover {
    background: #d0d0d0;
}

.balmenu-btn:active {
    background: #c0c0c0;
}

main {
    padding: 2rem;
}

/*
footer {
    background: #333;
    color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
*/

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    height: 40px;
    background: #000;
    color: #f0f0f0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    z-index: 1000;
}