/*BODY ESSENTIALS*/
*{
    box-sizing: border-box;
}
body{
    background-color: #202B27;
    color: #f2f2f2;
    font-family: Special Elite;
    margin: 0;
    padding: 0;
    letter-spacing: 0.5px;
}
h2{
    font-size:25px;
}
p{
    font-size: 18px;
    line-height: 1.5;
}
section, figure, aside{
    margin-bottom: 20px;
}
img, video{
    max-width: 100%;
    height: auto; 
    border-radius: 10px;
}
audio {
    border: 2px solid #F2F2F2 ;
    border-radius: 30px;
    padding: 2px;
}
.elsom img,
.map img,
.gifllorona img,
.muralllorona img,
.treellorona img,
.chupadraw img,
.nowchupa img,
.scooby img,
.vienecoco img,
.drawpata img,
.siguanaba img,
.dollwall img,
.donjulian img,
.firstdoll img,
.trajineras img{
    border: 2px solid  #454C44;
}
.elsom,
.duende,
.map,
.gifllorona,
.woodllorona,
.muralllorona,
.treellorona,
.cucafestival,
.vienecoco,
.chupadraw,
.nowchupa,
.scooby,
.drawpata,
.patastat,
.siguanaba,
.dollwall,
.donjulian,
.firstdoll,
.trajineras{
  display: flex;
  justify-content: center;
}
figure{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto 20px auto;
}
figcaption{
    font-size: 14px;
    color: #f2f2f2;
    margin-top: 8px;
}
figcaption a {
    color: #f2f2f2;
    text-decoration:underline;
    font-style: italic;
}
figcaption a:hover {
    color: #10130C;
    text-decoration: underline;
}

/*DROPDOWN CSS*/
.dropdown{
    list-style-type: none;
    margin: 0;
    padding:0;
}
.dropdown>li{
    position: relative;
    display: inline-block;
}
.dropdown li ul {
    display:none;
    position: absolute;
    z-index: 10;
    min-width:300px;
    padding: 0;
    margin: 0;
    list-style:none;
    border: 1px solid #79838C;
}
.dropdown li:hover > ul {
    display:list-item;
}
.dropdown li ul a {
    display: block;
    padding: 10px;
    font-size: 14px;
    background-color: #2D3029;
}
.dropdown li ul a:hover {
    background-color: #1F2933;
    color: #f2f2f2;
}
  
/*HEADER & FOOTER*/
.header{
    grid-area: header;
    font-family: creepster;
    letter-spacing: 6px;
    background-color: #141C26;
    padding: 10px;
    border-bottom: 2px solid #79838C;
    text-align: center;
    font-size: x-large;
}
.navbar{
    display: flex;
    justify-content: space-around;
    gap: 20px;
    background-color: #141C26;
}
.navbar a{
    color: #F2F2F2;
    font-size: 18px;
    letter-spacing: 2px;
    font-family: Special Elite;
    text-decoration: none;
    margin: 0;
    padding: 10px
}
.navbar a:hover{
    color: #79838C;
}
.footer{
    grid-area: footer;
    background-color: #2E3740;
    padding: 15px;
    width: 100%;
    text-align: center;
    font-size:medium;
}
.footer a{
    color: #F2F2F2;
}
footer a:hover{
    color: #79838C;
    text-decoration: underline;
}
  
/*GRID FOR HOMEPAGE*/
#homeparent{
    display: grid;
    grid-template: 
        "header"
        "intro"
        "elsom"
        "whatis"
        "duende"
        "typesoflegends"
        "lalegends"
        "map"
        "quizbutton"
        "footer";
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}
@media screen and (min-width:768px){
    #homeparent{
        display: grid;
        grid-template: 
        "header header"
        "intro intro"
        "elsom whatis"
        "typesoflegends duende"
        "lalegends lalegends"
        "map quizbutton"
        "footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:992px){
    #homeparent{
        display: grid;
        grid-template: 
        "header header header"
        "intro intro elsom"
        "duende whatis whatis"
        "typesoflegends typesoflegends lalegends"
        "map map quizbutton"
        "footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:1200px){
    #homeparent{
        display: grid;
        grid-template: 
        "header header header header"
        "elsom elsom intro intro"
        "whatis whatis whatis whatis"
        "typesoflegends typesoflegends duende duende"
        "lalegends lalegends lalegends lalegends"
        "map map map quizbutton"
        "footer footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
  
/*HOMEPAGE CSS*/
.intro{
    grid-area: intro;
    background-color: #2D3029;
    padding: 25px;
}
.whatislegend{
    grid-area: whatis;
    padding: 25px;
    border: 2px solid #091008;
}
.typesoflegends{
    grid-area: typesoflegends;
    background-color: #10130C;
    padding:25px;
}
ul{
    line-height: 2;
}
.lalegends{
    grid-area: lalegends;
    background-color: #141C26;
    border: 2px dashed #888B84;
    padding: 15px;
}
.elsom{
    grid-area: elsom;
}
.duende{
    grid-area: duende;
}
.map{
    grid-area: map;
}
.quizsec{
    grid-area: quizbutton;
    text-align: center;
    margin: auto;
    width: 100%;
}
.quizbutton{
    text-align: center;
    letter-spacing: 2px;
    margin: auto;
}
a.quizbutton {
    font-family: "Creepster";
    font-size: 40px;
    background-color: #79838C;
    padding: 12px ; 
    border-radius: 10px;
    color: #091008;
    white-space: nowrap;
}
a.quizbutton:hover {
    background-color: #2E3740;
}
  
/*GRID FOR LA LLORONA*/
#lloronaparent{
    display: grid;
    grid-template: 
    "header"
    "gifllorona"
    "story"
    "woodllorona"
    "lloronainfluence"
    "muralllorona"
    "lloronaaudio"
    "variations"
    "table"
    "treellorona"
    "footer";
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}
@media screen and (min-width:768px){
    #lloronaparent{
        grid-template: 
        "header header"
        "gifllorona story"
        "lloronainfluence muralllorona"
        "lloronainfluence lloronaaudio"
        "woodllorona variations"
        "table treellorona"
        "footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:992px){
    #lloronaparent{
        grid-template:  
        "header header header"
        "gifllorona story story"
        "lloronainfluence lloronainfluence muralllorona"
        "lloronainfluence lloronainfluence lloronaaudio"
        "woodllorona variations variations"
        "table table treellorona"
        "footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
    .woodllorona img{
        width: 80%;
        height: auto;
    }
}
@media screen and (min-width:1200px){
    #lloronaparent{
        grid-template:  
        "header header header header"
        "gifllorona woodllorona story story"
        "lloronainfluence lloronainfluence lloronainfluence muralllorona"
        "lloronainfluence lloronainfluence lloronainfluence lloronaaudio"
        "variations variations variations variations"
        "table table table treellorona"
        "footer footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
    .gifllorona{
        align-self: start; 
        justify-self: start;
    }
    .woodllorona{
        align-self: end;
        justify-self: end;
    }
    .gifllorona{
        width: 140%;
    }
}

/*LA LLORONA CSS*/
.story{
    grid-area: story;
    padding: 25px;
    border: 2px solid #091008;
}
.lloronainfluence{
    grid-area: lloronainfluence;
    background-color: #2D3029;
    padding: 25px;
}
.variations{
    grid-area: variations;
    background-color: #141C26;
    border: 2px dashed #888B84;
    padding: 15px;
}
.gifllorona{
    grid-area: gifllorona;
}
.woodllorona{
    grid-area: woodllorona;
}
.muralllorona{
    grid-area: muralllorona;
}
.treellorona{
    grid-area: treellorona;
}
.lloronaaudio{
    grid-area:lloronaaudio;
}

/*CSS FOR THE TABLE*/
table{
    grid-area: table;
    max-width: 100%;
    border: 2px solid #888B84;
    border-collapse: collapse;
    border-spacing: 2px;
    overflow: auto;
    empty-cells: hide;
    margin: 10px;
}
caption{
    caption-side: top;
    font-weight: bolder;
    font-size: larger;
    padding: 10px;
    color: #888B84;
}
thead th{
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid #888B84;
    border-left: 1px solid #888B84;
}
tbody td{
    padding: 5px;
    border: 1px solid #454C44;
}
tbody th{
    text-align: left;
    padding: 5px;
    border: 1px solid #454C44;
}
tfoot td{
    text-align: center;
    padding: 10px;
    border-top: 2px solid #888B84;
}
tbody tr:nth-child(odd){
    background-color: #10130C;
}

/*GRID FOR EL CHUPACABRA*/
#chupaparent{
    display: grid;
    grid-template: 
    "header"
    "whatischupa"
    "chupadraw"
    "firstchupa"
    "nowchupa"
    "chupalooks"
    "scooby"
    "chupalegacy"
    "footer";
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}
@media screen and (min-width:768px){
    #chupaparent{
        grid-template: 
        "header header"
        "whatischupa chupadraw"
        "nowchupa firstchupa"
        "chupalooks chupalooks"
        "scooby chupalegacy"
        "footer footer";        
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:992px){
    #chupaparent{
        grid-template:  
        "header header header"
        "whatischupa whatischupa chupadraw"
        "nowchupa firstchupa firstchupa"
        "chupalooks chupalooks scooby"
        "chupalegacy chupalegacy chupalegacy"
        "footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:1200px){
    #chupaparent{
        grid-template:  
        "header header header header"
        "whatischupa whatischupa chupadraw chupadraw"
        "nowchupa firstchupa firstchupa firstchupa"
        "chupalooks chupalooks scooby scooby"
        "chupalegacy chupalegacy chupalegacy chupalegacy"
        "footer footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}

/*EL CHUPACABRA CSS*/
.whatischupa{
    grid-area: whatischupa;
    background-color: #2D3029;
    padding: 25px;
}
.chupadraw{
    grid-area: chupadraw;
    padding: 25px;
}
.firstchupa{
    grid-area: firstchupa;
    padding: 25px;
    border: 2px solid #091008;
}
.nowchupa{
    grid-area: nowchupa;
}
.chupalooks{
    grid-area: chupalooks;
    background-color: #141C26;
    border: 2px dashed #888B84;
    padding: 15px;
}
.scooby{
    grid-area: scooby;
}
.chupalegacy{
    grid-area: chupalegacy;
    background-color: #10130C;
    padding:25px;
}

/*GRID FOR EL CUCUY*/
#cucuyparent{
    display: grid;
    grid-template:
        "header"
        "cucuyorigin"
        "vienecoco"
        "coconame"
        "lullaby"
        "cucafestival"
        "cocoaudio"
        "cocomuse"
        "footer";
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}
@media screen and (min-width:768px){
    #cucuyparent{
        grid-template: 
        "header header"
        "cucuyorigin vienecoco"
        "coconame coconame"
        "cucafestival lullaby"
        "cocoaudio lullaby"
        "cocomuse cocomuse"
        "footer footer";        
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:992px){
    #cucuyparent{
        grid-template:  
        "header header header"
        "cucuyorigin cucuyorigin vienecoco"
        "coconame coconame coconame"
        "cucafestival cucafestival lullaby"
        "cocoaudio cocoaudio lullaby"
        "cocomuse cocomuse cocomuse"
        "footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:1200px){
    #cucuyparent{
        grid-template:  
        "header header header header"
        "vienecoco vienecoco cucuyorigin cucuyorigin"
        "coconame coconame coconame coconame"
        "lullaby lullaby cucafestival cucafestival"
        "lullaby lullaby cocoaudio cocoaudio"
        "cocomuse cocomuse cocomuse cocomuse"
        "footer footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}

/*EL CUCUY CSS*/
.cucuyorigin{
    grid-area: cucuyorigin;
    padding: 25px;
    border: 2px solid #091008;
    background-color: #454C44;
    margin-bottom: auto;
    margin-top: auto;
}
.cucafestival{
    grid-area: cucafestival;
}
.coconame{
    grid-area: coconame;
    background-color: #2D3029;
    padding: 25px;
}
.lullaby{
    grid-area: lullaby;
    background-color: #10130C;
    padding:25px;
}
.vienecoco{
    grid-area: vienecoco;
    padding: 20px;
}
.vienecoco img{
    width: 90%;
}
.cocomuse{
    grid-area: cocomuse;
    background-color: #141C26;
    border: 2px dashed #888B84;
    padding: 15px;
}
.engspan{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px;
    padding: 10px;
}
.cocoaudio{
    grid-area: cocoaudio;
}

/*GRID FOR ISLA DE LAS MUNECAS*/
#dollparent{
    display: grid;
    grid-template:
    "header"
    "dollwall"
    "introisla"
    "donjulian"
    "donjulianstory"
    "islavid"
    "lanina"
    "firstdoll"
    "islaroute"
    "trajineras"
    "conc"
    "footer";
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}
@media screen and (min-width:768px){
    #dollparent{
        grid-template: 
        "header header"
        "dollwall introisla"
        "islavid islavid"
        "donjulianstory donjulianstory"
        "donjulian donjulian"
        "firstdoll lanina"
        "islaroute trajineras"
        "conc conc"
        "footer footer";       
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:992px){
    #dollparent{
        grid-template:  
        "header header header"
        "dollwall introisla introisla"
        "donjulianstory donjulianstory donjulian"
        "donjulianstory donjulianstory islavid"
        "firstdoll lanina lanina"
        "islaroute islaroute trajineras"
        "conc conc conc"
        "footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:1200px){
    #dollparent{
        grid-template:  
        "header header header header"
        "dollwall dollwall introisla introisla"
        "lanina lanina lanina firstdoll"
        "donjulian donjulian donjulianstory donjulianstory"
        "islavid islavid donjulianstory donjulianstory"
        "islaroute islaroute trajineras trajineras"
        "conc conc conc conc"
        "footer footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}

/*ISLA DE LAS MUNECAS CSS*/
.introisla{ 
    grid-area: introisla; 
    background-color: #10130C;
    padding:25px;
}
.donjulianstory{ 
    grid-area: donjulianstory;
    padding: 25px;
    border: 2px solid #091008; 
    background-color: #454C44;
}
.lanina{ 
    grid-area: lanina; 
    background-color: #141C26;
    border: 2px dashed #888B84;
    padding: 15px;
}
.islaroute{ 
    grid-area: islaroute; 
    background-color: #2D3029;
    padding: 25px;
}
.conc{ 
    grid-area: conc; 
    padding: 25px;
    border: 2px solid #091008;
}
.dollwall{ 
    grid-area: dollwall; 
}
.donjulian{ 
    grid-area: donjulian; 
}
.islavid{
    grid-area: islavid;
}
.islavid video{
    border: 2px solid  #454C44;
}
.firstdoll{ 
    grid-area: firstdoll; 
}
.trajineras{ 
    grid-area: trajineras; 
}

/*GRID FOR LA PATASOLA*/
#patasolaparent{
    display: grid;
    grid-template:
    "header"
    "drawpata"
    "pataintro"
    "patastat"
    "pataillusion"
    "patastory"
    "siguanaba"
    "patalure"
    "footer";
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}
@media screen and (min-width:768px){
    #patasolaparent{
        grid-template: 
        "header header"
        "drawpata pataintro"
        "pataillusion patastat"
        "patastory patastory"
        "siguanaba patalure"
        "footer footer";       
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:992px){
    #patasolaparent{
        grid-template:  
        "header header header"
        "drawpata pataintro pataintro"
        "pataillusion pataillusion patastat"
        "patastory patastory patastory"
        "siguanaba patalure patalure"
        "footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}
@media screen and (min-width:1200px){
    #patasolaparent{
        grid-template:  
        "header header header header"
        "drawpata drawpata pataintro pataintro"
        "pataillusion pataillusion  pataillusion patastat"
        "patastory patastory patastory patastory"
        "siguanaba patalure patalure patalure"
        "footer footer footer footer";
        gap: 20px;
        padding: 20px;
        max-width: 1300px;
        margin: auto;
    }
}

/*LA PATASOLA CSS*/
.pataintro{ 
    grid-area: pataintro;
    background-color: #10130C;
    padding:25px;
}
.pataillusion{ 
    grid-area: pataillusion; 
    background-color: #141C26;
    border: 2px dashed #888B84;
    padding: 15px;
}
.pataillusion blockquote {
    text-align: center;
    font-style: italic;
    line-height: 2;
    letter-spacing: 1px;
}
.patastory{ 
    grid-area: patastory;
    padding: 25px;
    border: 2px solid #091008;
}
.patalure{ 
    grid-area: patalure; 
    background-color: #2D3029;
    padding: 25px; 
}
.drawpata{ 
    grid-area: drawpata; 
}
.patastat{ 
    grid-area: patastat; 
}
.patastat img{
    width: 90%;
}
.siguanaba{ 
    grid-area: siguanaba; 
}

/*GRID FOR FORM*/
#formparent{
    display: grid;
    grid-template:
    "header"
    "thequiz"
    "footer";
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}
@media screen and (min-width:768px){
    #formparent{
        display: grid;
        grid-template:
        "header"
        "thequiz"
        "footer";
        gap: 20px;
        padding: 20px;
        max-width: 100%;
    }
}
@media screen and (min-width:992px){
    #formparent{
        display: grid;
        grid-template:
        "header"
        "thequiz"
        "footer";
        gap: 20px;
        padding: 20px;
        max-width: 100%;
    }
}
@media screen and (min-width:1200px){
    #formparent{
        display: grid;
        grid-template:
        "header"
        "thequiz"
        "footer";
        gap: 20px;
        padding: 20px;
        max-width: 100%;
    }
}

/*FORM CSS*/
.text{
    font-size: 18px;
    font-family: Special Elite;
    padding: 5px;
    border: 1px solid #888B84;
}
input[type="submit"],
input[type="reset"] {
    padding: 10px;
    font-size: 18px;
    background-color: #2D3029;
    color: #f2f2f2;
    border: none;
    border-radius: 5px;
    font-family: "Special Elite";
}              
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: #2E3740;
}
.thequiz{
    font-size: 18px;
}
form{
    width: 80%;
    margin: auto;
    border-radius: 10px;
}