@import url("nav.css") screen;
@import url("print.css") print;
/*mobil tablet laptop nagyság kell*/
/*Formázások minden oldalhoz*/
/*ne px -et mert az platform független
% 
viewport height width
cm-ert print nézethez
figma kilehet iportálni animált svg-ként
scss rövidebb*/


/*Oldal színei beállítások*/
:root {
    /*Az oldal fő szineinek beállítása*/
    --proba_szin: #EAECDF;
    --main_color: #8cb3d565;
    --background_color: #6abbde1b;
    /*Menu színek*/

    --menu_background: #7098a4a4;
    /*Eldöntendő még*/
    /* --menu_color : #AA8D39; */
    --menu_base: #553F00;
    --menu_visited: #AA8D39;
    --menu_hover: #806415;

    --standOut_red: #550100cd;
    --muted_red: #801815;
    --dark_brown: #806415;

    /*Linkek színei*/
    --link_hover: rgb(101, 96, 147);
    /*  #2E396C */
    ;
    --link_color: rgb(32, 25, 90);
    --link_visited: rgb(157, 123, 168);
}

:root {
    --font-family-main: "Times New Roman", Times, serif;
    /*Nagyobb szöveg*/
    --font-family-sans: "Arial", "Helvetica Neue", Helvetica, sans-serif;
    /*Kisebb szöveg*/
}


* {
    /*Alapok mindenre vonatkoznak ameddig felül nem írom késöbb... All Hail the basic settings*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Skip mechanizmus*/
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 1000;

}

.skip-link:focus {
    position: fixed;
    left: 10px;
    top: 10px;
}


/**********************************************************************************************************************************/
/*Oldal elemk beállításai*/
/*Logikai sorrendben van nagyjából*/

body {
    font-family: var(--font-family-main);
    padding: 2rem;
    margin: auto;
    background-color: var(--main_color);
    /*  background-image: url(../media/pictures/background.jpg);Jó a textúra, de nem elég nayg a kép
    background-blend-mode: lighten; */
    /* background-size: cover; */
    /*  background-position: center;
    background-repeat: repeat; */
    font-family: Arial, sans-serif;
}

main {
    display: grid;
    margin: auto;
    /* max-width: 1200px; Eldöntendő hogy hogy néz ki jobban*/
    background-color: var(--background_color);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.181);
    padding: 0 2rem;
}

/* Section */
/* section {
    margin-bottom: 3rem;
} */

/**********************************************************************************************************************************/
/*Szöveg formázások*/
/*MINDEN szövegre vonatkozik az egés projektben visszavonásig*/
p {
    font-size: 1.1rem;
    text-align: justify;
    line-height: 1.6;
}

p,
.small-text,
button,
input,
textarea {
    font-family: var(--font-family-sans);
    font-size: 1.1rem;
    /* már van p-nél, ez csak példa */
}


h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-family-main);
    text-align: center;
    margin-bottom: 1rem;
}

header h1 {
    font-weight: bold;
    font-size: 3em;
}



/*Header egységes formázása régi lehet majd törölni késöbb*/
/* header h1 {
    font-weight: bold;    
    font-size: 3em;
    text-align: center;
} */

/*Footer Stílusa
Minden oldalon ugyanolyannak kell lennie!!*/
footer p {
    font-size: 0.8rem;
}

footer h5 {
    font-size: 0.9rem;
    font-weight: bold
}

footer {
    text-align: center;
}

footer p {
    text-align: center;
}

/**********************************************************************************************************************************/
/*Linkek stílusa*/
a {
    text-decoration: underline;
    color: var(--link_color);
}

a:hover {
    color: var(--link_hover);
}

a:visited {
    color: var(--link_visited);
}

/**********************************************************************************************************************************/
/*Képek 
Egységes kép formázás*/
figure {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
    padding: 1rem;
    max-width: 100%;
    /* box-sizing: border-box; */
}

figure img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    display: block;
}

/*VIdeó*/
figure video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 2rem auto;
    /* középre igazítás, ahogy a képeknél */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}


/*Táblázat színek kicsit máshogy néz ki a monitor beállításaimmal*/
.table thead {
    background-color: #104050d7;
    color: white;
}

.table {
    background-color: #6c919f66;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #6c919f66;
}

/*Aside fix!!*/
#sizeChangerAside {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

#sizeChanger {
    background-color: var(--standOut_red);
    color: white;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#sizeChanger:hover {
    background-color: #7a0200;
}