/* all */

body{
    font-family: 'Times New Roman', Times, serif, sans-serif;
    font-size: 1.2rem;
    color: #F0E6D2;
    background-color: #111315;
}

h1{
    font-variant: small-caps;
    color: #af9768;
    text-align: center;
}

h3{
    text-align: center;
    color: #af9768;
}

hr{
    border: 1pt solid #F0E6D2;
    width: 80%;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

q{font-style: italic;}

q.begin-q::after { font-size: 0; }
q.mid-q::after { font-size: 0; }
q.mid-q::before { font-size: 0; }
q.end-q::before { font-size: 0; }

cite{font-style: normal;}

.transcript{padding: 3rem;}

.card{background-color: #111315;}

#curr-page{font-style: italic;}

p.card-text{margin-bottom: 0.25rem;}

.row{margin: 0;}

/* nav */

.navbar{
    background-image: linear-gradient(to bottom, rgba(17, 19, 21, 1), rgba(17, 19, 21, 0.9));
    align-content: center;
}

.navbar-collapse
{
    text-align: center;
    display: inline-block;
}

a, .nav-link{
    color: #F0E6D2;
    text-decoration: none;
    font-variant: small-caps;
}

a:hover{
    transition-duration: 0.3s;
    cursor: pointer;
    color: #af9768;
}

.navbar-toggler{
    background-color: #bdc3c8;
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav{
    margin: auto;
    width: 100%;
    justify-content: space-evenly;
    font-size: 1.5rem;
    margin: 0 3%;
    border: solid gray;
    background-color: #313538;
}

.kipozicional a {
    position: absolute;
    left: -9999px;
}

.kipozicional a:focus {
    position: static;
}

/* view-changer */

#change-view a{
    background-color: #F0E6D2;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    padding: 0.2rem;
}

#change-view img{
    width: 2.5rem;
    height: 2.5rem;
}

a#normal-view{display: none;}
a#bigger-view{display: inline-block;}

/* footer */

footer>a, #footer>a{
    float: right;
}

footer, #footer{
    background-color: #313538;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: 5%;
    height: 20rem;
    width: 100%;
}

footer>img, #footer>img{
    width: 6rem;
    margin: auto;
    margin-bottom: 1em;
    margin-top: 2em;
}

.icons>a>img{
    width: 2.3rem;
    padding: 5pt;
    margin: 0 1.8rem;
    background-color: #af9768;
    border-radius: 10pt;
}

footer>.row, #footer>.row{
    justify-content: center;
}

/* index.html */

#main-bg{
    width: 100%;
    margin-top: 100px;
}

.main-button{
    font-variant: small-caps;
}

.main-read, #chara-main{
    margin: auto;
}

.main-read{
    text-align: center;
}

.main-read>div>p{
    text-align: justify;
}

.chara-main>div>div>div>div>div>div>h2{
    margin-left: 0;
    margin-right: 0;
}

.regions-main>a>div{
    height: 10rem;
}

.regions-main>a>div>img{
    object-fit: cover;
    overflow: hidden;
    
}

.regions-main>a>.card:hover{
    opacity: 0.6;
    transition-duration: 0.4s;
    cursor: pointer;
}

.regions-main>a>div>div>h1{
    padding: 2rem;
    margin: auto;
    text-align:center;
    text-shadow: 0 8px 20px #5b6268, 2px 2px 5px #111315, 0 0px 5px #111315, 0 0 2px #111315;
    color: #F0E6D2;
}


/* carousel */

.carousel-item img {
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    height: 60vh;
}
.carousel-item>div>div>div>img{
    margin: auto;
}
.carousel-item>div>div>div{
    float: left;
    text-align: left;
    margin: auto;
}

/* buttons */

.button{
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
    border-radius: 5pt;
    background-color: #5b6268;
    border: none;
    text-align: center;
    display: inline-block;
    transition-duration: 0.4s;
    cursor: pointer;
}

.button:hover{
    background-color: #313538;
    color: #F0E6D2;
}

.vid-button{
    width: 100%;
    padding: 5px 0;
}

/* gallery */

.src-img{
    margin-bottom: 1rem;
    width: 90%;
}

/* video */

.vidi{
    text-align: center;
}

/**/

.selection-title{
    margin-top: 4em;
    text-align: center;
    font-variant: small-caps;
}

/* read */

.read>main>a, h2{
    margin-left: 2em;
    margin-right: 2em;
    margin-top: 3rem;
}

.read>main>hr{
    width: 90%;
    margin-bottom: 5em;
}

.continue-reading{
    font-variant: small-caps;
    text-align: center;
    margin-top: 3em;
}

.btn-primary.continue-reading {
    color: #F0E6D2;
    background-color: #313538;
    border-color: #313538;
    margin: auto;
    display: flex;
    justify-content: center;
    border-radius: 0 0 0.5rem 0.5rem;
    margin-top: 2rem;
}

.btn-primary.continue-reading:hover{
    background-color: #5b6268;
    border-color: #5b6268;
}

.card-body.card-read{
    border-radius: 0.5rem;
}

.card-img-top{
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
}

/* map */

#map-a{
    display: flex;    
    justify-content: center;
}
#map-a>img{
    border-radius: 10pt;
}

/* figure */

figure.chara-fig {
	margin-top: 6em;
	margin-bottom: 0;
	border:2px solid #F0E6D2;
	padding: 1em;
	border-radius:20px;
    display: inline-block;
	break-inside: avoid;
    text-align: center;
    background-color: #313538;
    color: #F0E6D2;
    transition-duration: 0.3s;
    cursor: pointer;
}

figure.chara-fig:hover{
    background-color: #F0E6D2;
    color: #313538;
}

figure.chara-fig>img{
    width: 100%;
}

figure{
    text-align: center;
}

/* story */

.story-bg{
    background-repeat: no-repeat; 
    background-size: contain;
}

.end{
    text-align: center;
    font-variant: small-caps;
    font-size: larger;
    margin-top: 5rem;
}

/* region backgrounds */

#cyan{
    background-image: url(../media/cyan.png);
}

#divia{
    background-image: url(../media/Divia.png);
}

#latem{
    background-image: url(../media/Latem.png);
}

/* regions */

.region-description{
    margin-top: 35%;
}

.region-description>div>div>div>h1{
    color: #F0E6D2;
}

/* scroll img */

.scroll-for-more-img{
    width: 20%; 
    margin: auto; 
    display: block; 
    margin-top: 43%;
}

/* article */

.story-box{
    background-color: #111315;
    padding: 2rem; 
    padding-top: 1rem;
    align-self: center;
    margin: auto;
    border-radius: 2rem;
}

.story-box>hr:first-of-type{
    width: 100%;
}

article details>summary{
    color: #af9768;
}

/* chapter */

.change-chapter>div{
    display: flex;
    justify-content: center;
}

/* sources */

.src{
    margin: 0 2rem;
}

.src>li>a{
    text-decoration: underline dotted #af9768;
}

.src>li>a:visited{
    color: #af9768;
}

.help{
    margin-left: 1%;
    border-radius: 2pt;
    background-color: #313538;
    color: #313538;
    transition-duration: 0.3s;
    cursor: pointer;
}

.help:hover{
    background-color: transparent;
    color: #af9768;
}

/* form */

form{
    justify-content: center;
}

form label, form p{
    font-size: 1.5rem;
}

form .button:first-of-type{
    background-color: #af9768;
}

form .button:last-of-type{
    background-color: #bdc3c8;
}

form .button{    
    color: #111315;
}

form .button:hover{
    background-color: #313538;
}

form textarea{
    width: 100%;
    border-radius: 2rem;
    background-color: #bdc3c8;
    padding: 1rem;
    color: #111315;
}

form .text-input{
    width: 100%;
    border-radius: 1rem;
    background-color: #bdc3c8;
    padding: 0.5rem;
    color: #111315;
}

.ml-1rem{
    margin-left: 1rem;
}

.file{
    margin-bottom: 2rem;
    margin-top: 0.5rem;
}

.label-p{
    margin-bottom: 0.3rem;
}

label.radio{
    color: #af9768;
}

input.radio{
    background-color: #bdc3c8;
}

.row.form-center{
    justify-content: center;
}

.form-buttons{
    display: flex;
    justify-content: space-around;
}

form label>span{
    font-size: 1.2rem;
    font-style: italic;
    color: #af9768;
}

.mg-before{margin-top: 2rem;}

/* chara pages */

.voice{
    border: none;
}

audio{
    width: 10rem;
}

aside{
    justify-content: center;
}

table{
    width: 20rem;
    border: solid #F0E6D2;
    border-collapse:collapse;
    margin: 2rem;
    caption-side: top;
}

th, td{
    padding: 1rem;
    border: solid #F0E6D2;
}

th{
    color: #af9768;
}

#table-pic>img{
    width: 15rem;
    margin: auto;
    display: flex;
    justify-content: center;
}
#table-pic{
    border-bottom: none;
}

.chara-pg h2{
    margin-left: 0;
    color: #af9768;
}

caption
{
    color: #F0E6D2;
}

@media print{
    body{
        margin:0;
        color: #000;
    }

    hr{border: 1pt solid #000;}

    h1, h3, a, .nav-link, .regions-main>a>div>div>h1, .btn-primary.continue-reading, figure.chara-fig, .region-description>div>div>div>h1, .help, 
    form .button, form textarea, form .text-input, label.radio, form label>span, th, .chara-pg h2, caption{
        color: #000;
    }

    .regions-main>a>div>div>h1{
        background-color: #fff;
        text-shadow: none;
    }

    .regions-main>a{
        height: 5cm;
    }

    header, #header, footer, #footer, video, #main-bg, .button, .scroll-for-more-img, .voice, #table-pic, #map-a, li .src-img{display: none;}

    input.button{display: inline-block; margin: 0; padding: 0;}

    .mg-before{margin: 0;}

    main{
        width:100%;
        padding:0;
    }

    a::after{content: " ( " attr(href) " ) ";}

    .charas a::after{content: none;}

    .region-description{margin-top: 0;}

    .print-break {page-break-before:always}
    aside{page-break-after: always;}

    img{max-height: 5cm; width: auto; overflow: hidden;}

    .chara-main>div>div>div>div>div>div, 
    .read>main>section>div>div>div{width: 50%;}

    .selection-title, h1, h2, h3{margin: 0;}

    figure.chara-fig img{
        width: auto;
    }

    figure.chara-fig, .end {
        margin-top: 0;
    }

    .charas>div{
        width: 25%;
        margin: 0;
    }

    table, th, td{border: solid thin #000;}

    .src>li>a{
        text-decoration: none;
    }
}