/*
Main NasonProductions.com site override css file.
*/

:root {
}

/* WARNING: colors will have to be mostly managed by Bootstrap for light and dark.
Media queries for preferred-color-theme only work for the OS setting.
Need to explore using SASS if global light/dark changes are required
    (to things like --bs-body-color, etc.)
*/


/* Google font loaded in the master np-app-layout.blade.php template. */
body {
    font-family: "Poppins", sans-serif;
}
body p {
    font-size: 1.24rem;
}

/* Individual Main Page banners. (Like Music, Video, Writing and Creative Journey. */
h1.page-title {
    background-color: #DDDDDD;
    color: darkslategray;
    font-weight: bold;
    font-size: 4rem;
    padding-left: 2rem;
    padding-top: 1.2rem;
    padding-bottom: 1.3rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 7px gray;
    /*
    border: solid;
    border-color: blank;
    border-width: 0.2rem;
    border-radius: 4rem;
     */
}

h2 {
    font-size: 2.6rem;
    margin-top: 1.6rem;
    margin-bottom: 1.3rem;
    /*
    margin-top: 1rem;

     */
}

/* Links with a right or left arrow next to them need a little work to get it centered. */
.next-previous-arrow {
    position: relative;
    top: 2px;
    /*
    margin-right: 7px;
    margin-left: 7px;
     */

}

.footer-text-small, .footer-text-small > p {
    font-size: 0.8rem;
}


/* DO NOT set the color here (it won't change with the js theme toggler properly). Bootstrap will manage the theme color variables (I guess). */
p, ul, ol {
    /*color: #ffffff;*/
    font-size: 1.1rem;
    font-weight: 200;
}


a {
    text-decoration: none;
}
a:hover {
    background-color: transparent;
}
/* Down-n-dirty hover affect for any img tag inside of an <a> */
a > img:hover, a > tr:hover {
    /*opacity: 0.6;  This works well, but gives the subtle impression of not being active since it gets dimmer. */
    border: black solid 0;      /* Adding a border may cause images--like the np logo in the header--to move around. */
    filter: brightness(150%);   /* Makes the element brighter (100% = normal) */
}


/* Rounded corner styling for the full media players. */
/* NOTE: this basically only works on skin: 104_b.tsv'*/
#pb-player {
    /*border-radius: 20px;    /* Adjust the value for desired roundness */
    /*overflow: hidden;       /* Hides the sharp corners of the actual video element */
    /*width: 344px;           /* Set a static width that works good for one theme on one page layout. (Could be a problem globally). */
}


.side-bar-links-big {
    text-decoration: none;
    list-style-type: circle;
    font-size: 1.6rem;
}

.side-bar-links-small {
    text-decoration: none;
    font-size: 1.2rem;
}


.emphasized-quote {
    /* TODO: add the pseudo before and after quotes. */
    font-family: "Times New Roman", Times, serif;
    font-size: 1.8rem;
    font-style: italic;
    color: #00a0ff;
}


/*******************************************************************************************************/
/* The big block quote styling. */
blockquote.big-quote {
    /*height: 300px;*/
    /*background-color: lightskyblue; 8?
    /*color: green;                     /* The actual quote text itself. */
    /*font-family: Georgia, serif; */
    font-family: "Times New Roman", Times, serif;
    font-size: 1.5rem;
    font-weight: lighter;

    font-style: italic;
    position: relative;                 /* Needed to get the quotes to follow as absolute positions. */

    opacity: .8;
    padding-top: 1.6rem;
    padding-left: 5rem;
    padding-bottom: 1.6rem;
    padding-right: 4.8rem;

}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
/* This is the big quote before the text. */
blockquote.big-quote:before {
    /*background-color: #00FF00;*/
    /*color: gray;*/
    /*color: greenyellow;*/

    /*opacity: .6;*/
    font-family: Georgia, serif;
    position: absolute;
    font-size: 10rem;
    line-height: 9rem;
    top: 0;
    left: -0.5rem;
    content: "\201C";
}
/* This is the big quote at the end. */
blockquote.big-quote:after {
    /*background-color: #00FF00;*/
    /*color: red;*/

    font-family: Georgia, serif;
    position: absolute;
    font-size: 10rem;
    line-height: 0;
    bottom: -0.7rem;
    right: 1rem;
    content: "\201D";
}
/* The citation portion of the blockquote. */
blockquote.big-quote cite {
    /*color: #999999;*/
    font-size: 1.2rem;
    /*font-style: normal;*/
    text-align: center;
    display: block;
    margin-top: 0.5rem;
    margin-right: 1rem;
}
blockquote.big-quote cite:before {
    /* The dash (or whatever you want) in front of the citation. */
    content: "\2013";

}





/* This does not work with the js light/dark switcher. So, this media query will overrule above settings when the OS is set to dark mode. */
/* I think this is coming directly from the user settings in the OS. So regardless of the state of the bs js switcher; this is always true if the OS says it is. */
@media (prefers-color-scheme: dark) {
    p, ul, ol {
        /*color: var(--text-color-dark);*/
        /*
        color: white;

         */
    }

}