/*====== document specific ======*/
/*CUSTOM PROPERTIES DEFINED. Here I use the assets - colours, fonts, icons and backgrounds*/ 
:root {
/*====== colours =======*/
    --color-dark: #912100;
    --color-medium: #7D8C0B;
    --color-light: #D9CDA9;
/*====== images ======*/
    --main-bg: url("images/background.jpg");
    --nav-bg-green: url("images/greenFrame.png");
    --nav-bg-yellow: url("images/yelllowFrame.png");
    --nav-bg-blue: url("images/blueFrame.png");
    --nav-bg-active: url("images/activeState.png");
    --logo-header: url("images/skLogo.svg");
    --books-book1: url("images/book1.png");
    --books-book2: url("images/book2.png");
    --books-book3: url("images/book3.png");
    --books-book4: url("images/book4.png");
    --books-book5: url("images/book5.png");
/*====== icons ======*/
    --icon-facebook: url("images/facebook.png");
    --icon-instagram: url("images/instagram.png");
    --icon-youtube: url("images/youtube.png");
    --icon-blog: url("images/blogger.png");
    --icon-linkedin: url("images/linkedin.png");
    --icon-twitter: url("images/twitter.png");
    --icon-podbean: url("images/podbean.png");
/*====== fonts ======*/
    --font-body: 'Gruppo', cursive;
    --font-title: 'Contrail One', cursive;
    --font-nav: 'Cabin Sketch', cursive;
    --font-hover: 'Open Sans', sans-serif;
}
* {
    box-sizing: border-box;
    margin: 0 auto;
    min-width: 0;
    min-height: 0;
    font-size: 10px;
}
body {
    background-image: var(--main-bg);
    background-size: cover;
    font-family: var(--font-body);
}
img {
    width: 100%;
    height: 100%;
}
p, li {
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 0;
}
a {
    text-decoration: none;
}


h1 {
    font-family: var(--font-nav);
    font-size: 4rem;
    font-weight: 200;
    text-align: right;
    color: var(--color-medium);
    margin: 1.5rem 1rem 2rem 0;
}
.nav {
    font-family: var(--font-nav);
    font-weight: 100;
    text-transform: uppercase;
}

.nav:hover {
    font-family: var(--font-hover);
    text-transform: uppercase;
}

.title {
    font-family: var(--font-nav);
    font-weight: 300;
    font-style: normal;
    font-size: 1.5rem;
}
.copyright {
    color: var(--color-light);
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}
/*====== index.php specific ======*/
.wrapper {
    max-height: 97vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    grid-auto-rows: minmax(30rem, 97vh);
    grid-gap: 3rem;
}
.main > img {
    object-fit: contain;
}
.homeNav {
    display: grid;
    grid-template-columns: repeat(3, minmax(auto, 1fr));
    grid-gap: 3rem;
}
.homeGreen, 
.homeMe {
    grid-area: 1/1/-1/2;
}
.homeYellow, 
.homeBooks {
    grid-area: 1/2/-1/3;
}
.homeBlue, 
.homeMedia {
    grid-area: 1/3/-1/4;
}
.me, 
.books, 
.media {
    display: contents;
}
[class*="Me"], 
[class*="Books"], 
[class*="Media"], 
.categoryName {
    margin: 0;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    font-size: 6rem;
    place-self: center;
    color: var(--color-dark);
    mix-blend-mode: color-burn;
}
/*====== me.php specific ======*/
.logo {
    position: relative;
    height: 7rem;
    width: 100%;
    min-width: 30rem;
}
.signatures {
    position: fixed;
    height: 5rem;
    top: 1rem;
    left: 1rem;
    content: var(--logo-header);
    z-index: 10;
}
.container {
    max-height: calc(97vh - 7rem);
    max-width: 95vw;
    display: grid;
    grid-template-columns: 1fr 9fr;
}
.categoryNav {
    min-width: 6ch;
    max-height: calc(95vh - 10rem);
    display: grid;
    grid-template-columns: minmax(4rem, 10rem);
    grid-auto-rows: minmax(max-content, 1fr);
}
.category {
    position: relative;
    min-height: 20ch;
}
.categoryName {
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.backImage,
.active {
    width: 100%;
    height: 100%;
}

.category:nth-of-type(3n+1) > .backImage {
    content: var(--nav-bg-green);
}

.category:nth-of-type(3n+2) > .backImage {
    content: var(--nav-bg-yellow);
}
.category:nth-of-type(3n+3) > .backImage {
    content: var(--nav-bg-blue);
}

.active {
    content: var(--nav-bg-active);
    
}
.content {
    margin-left: 1rem;
    max-height: calc(95vh - 10rem);
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(min-content, 1fr);
    grid-gap: 2rem;
}
.section {
    max-width: 100%;
    margin-left: 1rem;
    
}
.categoryNav, .content {
    overflow-y: auto;
    overflow-x: hidden;
}
.categoryNav::-webkit-scrollbar, 
.content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
} /*chrome/safari*/
.sectionBody, 
.categoryNav, 
.content {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.sectionHead {
    min-width: 20rem;
    position: sticky;
    left: 0;
}

.sectionHead>q {
    font-family: var(--font-title);
    color: var(--color-dark);
    font-size: 1.5rem;
}

.sectionHead>h3 {
    font-family: var(--font-nav);
    color: var(--color-light);
    font-size: 2rem;
    margin-top: 1rem;
}

.sectionBody {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.5rem 0;
}
.sectionBody > article {
    max-height: 17rem;
    color: var(--color-medium);
    columns: 18rem;
    column-rule: 1px dotted var(--color-light);
    column-gap: 2rem;
}
.sectionBody > article > p, 
.sectionHead > article > ul > li {
    padding-bottom: 1.5rem;
}
.sectionBody > article > ul > li {
    margin-bottom: 1.5rem;
}

/*====== media.php specific ======*/

.mediaIcons>a,
.bookIcons>a{
    color: var(--color-medium);
    font-size: 1.5rem;
}
.icon {
    max-width: 9vw;
    margin: 0;
}
.instagram{
    content: var(--icon-instagram);
}

.facebook {
    content: var(--icon-facebook);
}

.blogger {
    content: var(--icon-blog);
}

.linkedin {
    content: var(--icon-linkedin);
}

.youtube {
    content: var(--icon-youtube);
}

.twitter {
    content: var(--icon-twitter);
}

.podbean {
    content: var(--icon-podbean);
}

/*====== books.php specific ======*/

.front {
    max-height: 60vmin;
    margin: 0;
}

.book1 {
    content: var(--books-book1);
}

.book2 {
    content: var(--books-book2);
}

.book3 {
    content: var(--books-book3);
}

.book4 {
    content: var(--books-book4);
}

.book5 {
    content: var(--books-book5);
}