html {
    font-size: 62.5%;
    /*10px*/
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    /* object-fit: cover; */
   
}
a {
    text-decoration: none;
    
}
@font-face {
    font-family: 'openSansBold';
    src: url(../fonturi/OpenSans-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'openN';
    src: url(../fonturi/OpenSans-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'robotoBlack';
    src: url(../fonturi/RobotoR.ttf) format('truetype');
}

@font-face {
    font-family: libre;
    src: url(../fonturi/LibreBaskerville-Bold.ttf);
}

@font-face {
    font-family: FontAwesome;
    src: url(../fonturi/fontawesome.css);
}

@font-face {
    font-family: titluHeader;
    src: url(../fonturi/futuraPT/FuturaPTExtraBold.otf);
}
@font-face {
    font-family: bebas;
    src: url(../fonturi/BenasNeueBold.otf);
}
body,
#pagina {
    margin: 0;
    min-height: 100vh;
    max-width: 100vw;
    color: rgb(91, 94, 94);
}

div#sidebarMenu,
label.sidebarIconToggle {
    left: -9999em;
}


    div#sidebarMenu {
        font-family: robotoBlack;
    }
#pagina {
    font-family: robotoBlack;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
}

/* header */
header {
    /* position: sticky;
    top: 0; */
    background-color: #fff;
    grid-column: 2/6;
    grid-row: 1/2;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    /* z-index: 999; */
    /* backface-visibility: hidden; */
}

#div1Header {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self: start;
}


#div2Header {
    grid-column: 2/3;
    grid-row: 1/2;
    justify-self: center;
    align-self: center;
}

header h1#siglaSite {
    font-size: 3vw;
    /*5rem*/
    text-transform: uppercase;
    font-family: libre;
    
    font-weight: 800;
    letter-spacing: 1rem;
    animation: deplasareSigla 1s ease-out;
    text-align: center;
}
header h1#siglaSite a{
    color: hsl(41, 86%, 58%);
    text-decoration: none;
}

@keyframes deplasareSigla {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

nav {
    grid-row: 2/3;
    grid-column: 1/3;
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
}
nav ul li, nav ul li a {

    display: inline-block;
    margin-right: 1rem;
}

nav ul li,
nav ul li a {
  width: auto;
  text-align: center;
}

nav ul li, nav ul li a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight:600;
    color: rgba(91,91,94);
    font-size: 1.2rem;
    /* padding-left: 1rem;  */
    position:relative;
}

/* nav ul li:first-child, nav ul li:last-child{
    margin-right: 2rem;
} */



.drop {
    position: absolute;
    /* left: -9999em; */
    display: none;
background-color: #fff;
padding: 0 .5rem 2rem .5rem;
  }



  nav ul li ul,
  nav ul li ul li,
  nav ul li ul li a {
    display: block;
    z-index: 999;
  }
  
  .drop li {
    padding-top: .5rem;
  }
  .drop li,
  .drop li a {
    width: auto;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal !important;
  }
  
  ul li:hover ul {
    display: block;
  }
 
/* sf header */
aside#colstg {
    grid-column: 2/3;
    grid-row: 2/3;
}

main {
    font-weight: 500;
    grid-column: 3/6;
    grid-row: 2/3;
}

main p, main article {
    color: rgb(61, 61, 78);
    font-size: clamp(1rem, 1.2rem + 0.25vw, 1.6rem);
}

main h4 {
    font-size: 2rem;
    font-weight: 600;
}

footer {
    grid-area: 3 / 2 / 4 / 6;
    border-top: 5px solid hsl(157, 18%, 49%);
    margin-top: 2rem;
}

/* ========== stilizare liste ======================= */

main ul {
    margin-left: 1rem;
    list-style-position: inside;
}


ul.ulDisc {
    list-style-type: disc;
    font-size: 1rem;
}

ul.ulDisc li {
    list-style-position: inside;
}

ul.ulPatrat {
    list-style: square;
}

ul.ulCerc {
    list-style: circle;
}

ul.ulIndent {
    margin-left: 1rem;
    list-style-position: inside;
}

ul.ulPozitie {
    border-left: solid 2px red;
    list-style-position: inside;
}

ul.ulNumar,
ol.olNumar {
    list-style: decimal;
    list-style-position: inside;
    line-height: 1.7;
}

.evidentiereLista {
    margin: 1.5rem 0;
}

/*  */

/* ===================== aside elemente ===================== */


aside#colstg a,
aside#colstg .liPrimul {
    /* culoarea de contrast la background rgb(70,136,71) */
    color: rgb(30, 32, 30);
    font-weight: 400;
    /* font-size: 1rem; */
    text-decoration: none;
}

aside#colstg li.liTitlul,
aside#colstg a.liTitlul {
    color: rgb(255, 187, 51) !IMPORTANT;
    font-weight: 700;
    font-size: 1rem;
}

aside#colstg ul li a:hover,
nav a:hover,
aside#colstg a.rosu {
    color: rgb(238, 68, 17);
}

aside h1 {
    color: rgb(255, 187, 51);
    line-height: 2.75rem;
    font-size: 2.2rem;
    font-weight: 400;
}

aside#colstg h2 {
    font-size: 2rem;
}


aside ul {
    list-style: none;
    list-style-position: inside;
}

/* aside ul li {
    padding-left: 1rem;
} */

/* aside li ul {
    padding-left: 1rem;
} */

aside ul.ulDinastii {

    color: rgb(70, 136, 71);
    list-style-type: disc;
}
aside#colstg a:link, aside#colstg a:visited {
    color: rgb(30, 32, 30);
}
aside#colstg ul li a {
    font-size: 1.6rem;
    font-size: clamp(1.2rem, 1.25rem + 0.25vw, 1.6rem);
    line-height: 2rem;
}


/* ------------------- */
aside h2,
main h2,
main h3,
aside#colstg ul li a.primul,
aside#colstg ul li .primul {
    color: rgb(238, 68, 17);
    line-height: 1.8rem;
    letter-spacing: 0.375px;
    font-weight: 700;
}

aside h2.h2-distanta_sus {
    padding-top: 2rem;
}

aside h2.h2-distanta_sus a#bibliografie,
aside h2.h2-distanta_sus a#institutii {
    color: #ee4411;
    font-size: 2rem;
    font-weight: 700;
}

/* card prezentare datele din baza de date */
.cardPrezentare {
    font-size: 1.6rem;
    display: grid;
    grid-template-columns: 40rem 1fr;
    grid-template-rows: repeat(auto-fit, minmax(auto, 1fr));
    grid-gap: 1rem;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    margin-bottom: 2rem;

}

.cardPrezentare p {
    line-height: 1.7rem;
}

.cardPrezentare .cardPrezentare-itemA {
    /*pentru nume*/
    grid-row: 1/2;
    grid-column: 1/3;
    margin-top: 1rem;
    padding: 1.5rem;
}

.cardPrezentare .cardPrezentare-itemB {
    /*perioada domniei*/
    grid-column: 1/2;
    grid-row: 2/3;
    box-shadow: 0px 0px 2px rgb(197, 196, 196);
    padding: .5rem;
    padding-left: 2rem;
}

.cardPrezentare .cardPrezentare-itemD {
    /*pentru poza*/
    grid-row: 2/3;
    grid-column: 2/3;
    place-self: start center;
}

.cardPrezentare .cardPrezentare-itemD img {
    padding: 1rem;
}

.cardPrezentare img {
    width: 15rem;
}

.cardPrezentare ul{
    list-style-type: disc;
    list-style-position: inside;
}

.cardPrezentare h1 {
    color: black;
    font-size: 1.6rem;
    font-weight: 800;
    opacity: .6;
}

/* ================================================*/
/* cardPrezentareSimplu */
.cardPrezentareSimplu {
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 17px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    padding: .5rem;
    margin: 1rem 0;
    font-size: 1.8rem;
    line-height: 1.7;
}

.cardPrezentareSimplu h1, .cardPrezentareSimplu ul li {
    font-size: 1.8rem;
    padding-left: 1rem;
}
.cardPrezentareSimplu h1 {
    margin-top: 1rem;
    color:#777;
    margin-bottom: 0;
    padding-bottom: 0;
    font-weight: 600;
}
/*  */

main h1 {
    color: rgb(255, 187, 51);
    font-size: 1.8rem;
}

main h2 {
    font-size: 1.7rem;
}

main h3,
article h3,
.numeConducator {
    font-size: 1.6rem;
    font-weight: 800;
}

.numeConducator1 {
    font-size: 2rem; /*folosit la republica*/
    color:#ee4411;
    line-height: 1.7;
}

article{
    font-size: 1.8rem;
    line-height: 1.7;
    text-align: justify;
}
article h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(91,91,94);
    margin-top: 1rem;
}

 article#anarhiaCaracterizare,
p>a#anarhiaCaracterizare,
article#article-bibliografie,
ol li.anarhieMilitara a {
    font-size: 1.6rem;
}

article a {
    color: rgba(91,91,94);
}

ol li.anarhieMilitara::marker {
    content: '👉 ';
    font-size: 1.6rem;
    list-style-position: inside;
}

ol li.anarhieMilitara {
    padding-top: 2rem;
    margin-left: 4rem;
}

article#test3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
}

article#test3 p {
    grid-column: 1/3;
    grid-row: 1/2;
}

article#test3 div#div1Test3 {
    grid-column: 1/2;
    grid-row: 2/3;
}

article#test3 div#div1Test3 select {
    padding: 1rem 0;
    border: none;
    background-color: white;
}

article#test3 div#div1Test3 select::after {
    content: '\f0d7';
    font-family: FontAwesome;
    color: #fff;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 15px;
}

article#test3 div#div2Test3 {
    grid-column: 2/3;
    grid-row: 2/3;
}

article#test3 ul#ulTest3 li{
    list-style-type: upper-latin;
}

article#test3 select {
    width: 6rem;
}

article#article-bibliografie ul li {
    padding-top: 1rem;
    padding-left: 1rem;
    list-style-position: inside;
}

.p-distanta__jos {
    padding-bottom: 2rem;
}

/* citat footer*/
blockquote {
    padding: 6rem 8rem 4rem;
    position: relative;
}

blockquote p {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
}

blockquote:before {
    content: "\201C";
    padding-top: 3rem;
    padding-left: 4rem;
    font-family: Georgia, serif;
    display: inline-block;
    font-size: 19rem;
    font-weight: bold;
    color: rgba(153, 153, 153, .5);
    /*Positioning*/
    position: absolute;
    text-align: center;
    top: 0;

}

blockquote::after {
    content: "";
}

blockquote span {
    display: block;
    color: #333333;
    font-style: normal;
    font-weight: bold;
    margin-top: 1rem;
}

/* formulare */
legend {
    padding: 0 1rem;
}

/* cauta */
form#cauta {
    margin-top: 1rem;
}

form#cauta>p {
    font-weight: 600;
}

form#cauta input[type='text'] {
    border: 2px solid grey;
    padding: 1rem;
    width: 60%;
    border-radius: 5px;
    font-size: 1.6rem;
    color: rgb(238, 68, 22);
}

form#cauta input[type='text']:focus {
    box-shadow: 0 10px 20px rgba(0,0,0,.3);
    color:rgba(91,91,94);
    background-color: white;
    border: 2.5px solid rgb(157, 154, 154);
}

form#cauta input[type='submit'], .btn {
    border: 2px solid #777;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
    background-color: rgb(238, 68, 22);
    color: rgb(249, 246, 246);
    font-size: 1.6rem;
    transition: all .2s;
}

form#cauta input[type='submit'] {
    width: 60%;
}

form#cauta input[type='submit']:hover, .btn:hover {
    box-shadow: 0px 10px 20px rgba(0,0,0,.3);
    background-color: rgba(238, 68, 22, .9);
    transform: translateY(-3px);

}

form#cauta input[type='submit']:active, .btn:active{
    box-shadow: 0px 5px 10px rgba(0,0,0,.3);
    transform: translateY(-1px);
}

#test2 label{
    display: block;
}
/* formular test 1 */
label{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
}

form#formular-inregistrare label, form#formLogin label{
    display:block;
    margin-top: 2rem;
}

form#formLogin {
    width:fit-content;
}
/*  */

textarea {
    background-color: #ee4411;
}
/* pagina prezentare - prezinta din search */
div.prezentarePersonalitate {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.7;
}


#prezentarePersonalitate__h2 {
    font-size: 1.8rem;
    margin-top: 2rem;
}
details {
    width: 100%;
}
summary {
    margin-bottom: 1.6rem;
    list-style-position: inside;
}

summary::marker {
    content: "👉 ";
}

summary:hover {
    cursor: pointer;
}

summary a {
    font-size: 1.6rem;
}

.marimeSummary {
    width:100%;
    background-color: bisque;
}

p.emoji-i::before{
content:"📖";
}
details embed {
   min-height: 70vh;
    width:100%;
}

textarea {
    display: block;
    margin-top: 1rem;
    width: 60rem;
    font-size: 1.6rem;
    background-color: #ee4411;
    color: white;
    border: 4px solid rgb(255, 187, 51);
}

select {
    display: block;
    width: 60rem;
    font-size: 1.6rem;
    appearance: none;
    background: yellow;
    color: black;
    cursor: pointer;
    border: 2px dashed orange;
    border-radius: 4px;
}

small {
    font-size: 1rem;
}

.raspunsCorect::after{
    content: url('../img/');
    display: inline-block;
    width: 25px;
    height: 25px;
}

.raspunsGresit::after{
    content: url('../img/');
    display: inline-block;
    width: 25px;
    height: 25px;
}

.activ {
    background-color: rgb(255, 187, 51);
    color:rgb(238, 68, 17);
}

a#anarhiaCaracterizare {
    color: #333333;
}

/*  */
/* responsive */
@media screen and (max-width: 500px) {
    #pagina {
        display: grid;
        /* grid-gap: 1rem; */
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        font-size: 12vw;

    }
    header {
        grid-row: 1/2;
        grid-column: 1/2;
        display: flex;
        flex-direction: column;
    }
    nav {
        display: none;
    }
   #div1Header img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 50%;
        height: auto;       
    }

    div#sidebarMenu,
    label.sidebarIconToggle {
        left: auto;
        z-index: 1000;
    }
    aside {
        display:none;
    }

    main {
        /* display:none; */
        grid-column: 1/2;
        grid-row: 2/3;

    }

    footer {
        grid-row: 3/4;
        grid-column: 1/2;
    }

    footer blockquote p {
        font-size: 5vw;
    }

    .cardPrezentare {      
        display: flex;
        flex-direction: column;
    
    }
   

    article {
        font-size:2vw;
    }

    blockquote::before {
        padding-left: 1rem;
    }
}
@media (min-width:501px) and (max-width: 768px) {
    #pagina {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        font-size: 12vw;

    }
    header {
        grid-row: 1/2;
        grid-column: 1/2;
        display: flex;
        flex-direction: column;
    }
    nav {
        display: none;
    }
    div#sidebarMenu,
    label.sidebarIconToggle {
        left: auto;
        z-index: 1000;
    }
   
    #div1Header img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 50%;
        height: auto;       
    }

    main {
        grid-column: 1/2;
        grid-row: 2/3;

    }
    aside {
        display:none;
    }

    footer {
        grid-row: 3/4;
        grid-column: 1/2;
    }

    .cardPrezentare {
        font-size: 1.6rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(auto-fit, minmax(auto, 1fr));
        grid-gap: 1rem;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
        margin-bottom: 2rem;
    
    }

    .cardPrezentare .cardPrezentare-itemA {
        /*pentru nume*/
        grid-row: 1/2;
        grid-column: 1/2;
        margin-top: 1rem;
        padding: 1.5rem;
    }
    .cardPrezentare .cardPrezentare-itemB {
        /*perioada domniei*/
        grid-column: 1/2;
        grid-row: 2/3;
        box-shadow: 0px 0px 2px rgb(197, 196, 196);
        padding: .5rem;
        padding-left: 2rem;
    }
    .cardPrezentare .cardPrezentare-itemD {
        /*pentru poza*/
       display: none;
    }

}

form#test2 input[type="number"] {
    width:5rem;
}
/* @media (min-width:769px) and (max-width: 1200px) {
   #div1Header {
   background: red ;
}
}
@media (min-width:1201px) {
  
        #div1Header {
        background: red ;
     }
} */
/* landscape */
@media (max-height:500px) {

}


aside#colstg a, a#anarhiaCaracterizare {
    position: relative;
    transition: all .35s ease;}

nav a::after, aside#colstg a::after, a#anarhiaCaracterizare::after{
    content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 4px;
  bottom: -4px;
  left: 0;
  background-color: hsl(41, 86%, 58%);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

nav a:hover::after, aside#colstg a:hover::after, a#anarhiaCaracterizare:hover::after{
    transform: scaleX(1);
  transform-origin: bottom left;
}

a#anarhiaCaracterizare:active {
    color: #ee4411;
}