@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Special+Elite&family=Caveat:wght@400..700&display=swap');

/* General Styles *********************************************************************************/

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

html {
    font-size: 18px;
    scroll-behavior: smooth;
}

.heading {
    font-family: "Special Elite", "Courier", serif;
}

.section {
    width: 100vw;
    min-width: 360px;
    height: 100vh;
    background-color: hsl(0, 0%, 0%);
}

.container {
    width: 95%;
    height: 100%;
    margin: 0px auto;
}

.link-button {
    display: inline-block;
    padding: 16px;
    color: hsl(0, 0%, 0%);
    font-family: "Special Elite", "Courier", serif;
    text-decoration: none;
    text-align: center;
    border: 1px solid hsl(0, 0%, 0%);
}

@media (min-width: 600px)
{

    html {
        font-size: 19px;
    }

}

@media (min-width: 800px)
{
    
    html {
        font-size: 20px;
    }

    .container {
        width: 85%;
    }

}

@media (min-width: 1000px)
{

    html {
        font-size: 22px;
    }

}

@media (min-width: 1200px)
{

    .container {
        width: 80%;
    }

}

/* Header Toggle **********************************************************************************/

.header-toggle {
    display: block;
    position: fixed;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    background-color: hsl(0, 0%, 20%);
    border: none;
    box-shadow: 4px 4px 8px hsl(0, 0%, 0%);
    z-index: 3;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.25s;
}

.header-toggle:hover,
.header-toggle:focus {
    background-color: hsl(0, 0%, 30%);
}

.header-toggle-bar {
    display: block;
    position: relative;
    left: 12px;
    width: 24px;
    height: 4px;
    background-color: hsl(0, 0%, 90%);
    transition-property: width, left;
    transition-duration: 0.25s;
}

.header-toggle-bar::before {
    content: "";
    position: absolute;
    left: 0px;
    top: -10px;
    width: 24px;
    height: 4px;
    background-color: hsl(0, 0%, 90%);
    transition-property: width, left, top, transform;
    transition-duration: 0.25s;
}

.header-toggle-bar::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 10px;
    width: 24px;
    height: 4px;
    background-color: hsl(0, 0%, 90%);
    transition-property: width, left, top, transform;
    transition-duration: 0.25s;
}

.header-toggle-shown .header-toggle-bar {
    left: 24px;
    width: 0px;
}

.header-toggle-shown .header-toggle-bar::before {
    left: -12px;
    top: 0px;
    transform: rotate(45deg);
}

.header-toggle-shown .header-toggle-bar::after {
    left: -12px;
    top: 0px;
    transform: rotate(-45deg);
}

@media (min-width: 1000px)
{

    .header-toggle {
        top: 32px;
        right: 32px;
    }

}

/* Header *****************************************************************************************/

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    right: -100vw;
    width: 100vw;
    height: 100vh;
    transform: scaleX(0);
    background-color: hsla(0, 0%, 10%, 90%);
    box-shadow: 4px 4px 8px hsl(0, 0%, 0%);
    z-index: 2;
    transition-property: right, transform;
    transition-duration: 0.5s;
}

.header-shown {
    right: 0vw;
    transform: scaleX(1);
}

.header-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.header-link {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.header-link:hover,
.header-link:focus
{
    text-decoration: underline;
}

.header-link,
.header-link span {
    font-family: "Special Elite", "Courier", serif;
    font-size: 1.75rem;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    color: hsl(0, 0%, 90%);
}

.header-link img,
.header-link svg {
    width: 24px;
}

.header-separator {
    width: 100%;
    height: 4px;
    margin: 16px 0px;
    background-color: hsl(0, 0%, 90%);
}

@media (min-width: 1000px)
{

    .header {
        right: -75vw;
        width: 75vw;
    }

    .header-shown {
        right: 0vw;
    }

}

@media (min-width: 1400px)
{

    .header {
        right: -50vw;
        width: 50vw;
    }

    .header-shown {
        right: 0vw;
    }

}

/* Featured Testimonial Sections ******************************************************************/

.featured-testimonial {
    height: auto;
    margin: 0px auto;
    padding: 32px 8px;
    background-color: hsl(270, 9%, 17%);
}

.featured-testimonial-text {
    padding-bottom: 32px;
    font-family: "Caveat", "Courier", sans-serif;
    font-size: 1.4rem;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 0%);
    color: hsl(90, 9%, 83%);
}

.featured-testimonial-text::before {
    content: "\"";
}

.featured-testimonial-text::after {
    content: "\"";
}

.featured-testimonial-author {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.featured-testimonial-author-name {
    line-height: 1.25rem;
    font-family: "Caveat", "Courier", sans-serif;
    font-size: 1.4rem;
    text-shadow: 1px 1px 4px hsl(0, 0%, 0%);
    color: hsl(90, 9%, 83%);
}

.featured-testimonial-author-name small {
    display: inline-block;
    line-height: 1rem;
    font-size: 0.8rem;
}

@media (min-width: 1400px)
{

    .featured-testimonial-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "text author";
    }

    .featured-testimonial-text {
        grid-area: text;
        text-align: left;
    }

    .featured-testimonial-author {
        grid-area: author;
    }

}

/* Home Section ***********************************************************************************/

@keyframes move-background
{
    0% {
        background-position-y: bottom, top 12%, bottom, 100%;
    }

    100% {
        background-position-y: bottom, top 12%, bottom, 0%;
    }
}

.home {
    height: 150vh;
    min-height: 1300px;
    background-color: hsl(0, 0%, 10%);
    background-image:
        linear-gradient(
            to bottom,
            transparent,
            transparent 450px,
            hsl(0, 0%, 0%) 600px
        ),
        url("../images/full-black-headshot-no-bg.png"),
        linear-gradient(
            to bottom,
            hsla(0, 0%, 10%, 0.925) 300px,
            hsl(0, 0%, 0%) 600px
        ),
        url("../images/background-canvas.png");
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-position-y: bottom, top 12%, bottom, 100%;
    background-position-x: left, right -130px, left, left;
    background-size: auto, auto, auto, contain;
    animation-name: move-background;
    animation-duration: 45s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.home-container {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 120px 270px 120px 90px calc(100% - 600px);
    grid-template-areas:
        "name name"
        "title ."
        ". ."
        "schedule schedule"
        "about about";
}

.home-name {
    grid-area: name;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.home-name .heading {
    color: hsl(0, 0%, 90%);
    line-height: 2.25rem;
    font-size: 2.2rem;
    font-variant: small-caps;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    white-space: pre-line;
}

.home-title {
    grid-area: title;
    align-self: center;
}

.home-title .heading {
    padding-bottom: 4px;
    margin-bottom: 4px;
    color: hsl(0, 0%, 90%);
    font-size: 1.6rem;
    font-variant: small-caps;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    border-bottom: 1px solid hsl(0, 0%, 90%); 
}

.home-title .text {
    color: hsl(0, 0%, 90%);
    font-size: 0.85rem;
    font-style: italic;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
}

.home-schedule {
    grid-area: schedule;
}

.home-schedule .link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90%;
    font-size: 1.2rem;
    color: hsl(0, 0%, 90%);
    border-color: hsl(0, 0%, 90%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    transition-property: background-color, text-shadow;
    transition-duration: 0.2s;
}

.home-schedule .link-button:hover,
.home-schedule .link-button:focus {
    background-color: hsla(0, 0%, 90%, 50%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 10%);
}

.home-about {
    grid-area: about;
    align-self: center;
}

.home-about .heading {
    padding-bottom: 4px;
    margin-bottom: 16px;
    color: hsl(0, 0%, 90%);
    font-size: 1.6rem;
    font-variant: small-caps;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    border-bottom: 1px solid hsl(0, 0%, 90%); 
}

.home-about .text {
    padding: 0px 8px;
    color: hsl(0, 0%, 90%);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.2rem;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
}

@media (min-width: 600px)
{

    .home {
        min-height: 1200px;
        background-size: auto, auto, auto, cover;
    }

    .home-container {
        grid-template-columns: 55% 45%;
        grid-template-rows: 1fr auto 1fr 50%;
        grid-template-areas:
            "name ."
            "title ."
            "schedule ."
            "about about";
    }

    .home-name {
        align-items: flex-end;
    }

    .home-name .heading {
        padding-bottom: 4px;
        white-space: unset;
        /* border-bottom: 1px solid hsl(0, 0%, 90%);  */
    }

    .home-title {

    }

    .home-title .heading {
        padding-top: 12px;
        padding-bottom: unset;
        margin-bottom: unset;
        border: none;
    }

    .home-title .text {
        padding-bottom: 32px;
    }

    .home-schedule .link-button {
        width: auto;
        height: auto;
    }

}

@media (min-width: 700px)
{

    .home {
        background-position-x: left, right -80px, left, left;
    }

}

@media (min-width: 800px)
{
    
    .home {
        background-size: auto, auto, auto, cover;
    }

}

@media (min-width: 1000px)
{

    .home {
        min-height: 200vh;
        background-image:
            linear-gradient(
                to bottom,
                transparent,
                hsl(0, 0%, 0%)
            ),
            url("../images/full-black-headshot-no-bg.png"),
            linear-gradient(
                to bottom,
                hsla(0, 0%, 10%, 0.925),
                hsl(0, 0%, 0%)
            ),
            url("../images/background-canvas.png");
        background-attachment: fixed, fixed, fixed, fixed;
        background-size: cover, contain, cover, cover;
        background-position-x: left, right -180px, left, left; 
    }

    .home-container {
        grid-template-columns: 55% 45%;
        grid-template-rows: 45vh 15vh 40vh auto;
        grid-template-areas:
            "name ."
            "title ."
            "schedule ."
            "about .";
    }

    .home-about {
        align-self: center;
        padding: unset;
    }

}

@media (min-width: 1200px)
{

    .home {
        height: 200vh;
        min-height: 1400px;
        background-size: cover, 100vh, cover, cover;
        background-position-x: left, left 100%, left, left;
    }

}

/* Books Section **********************************************************************************/

.books {
    height: auto;
    padding-bottom: 32px;
}

.books-text {    
    padding: 0px 8px;
    color: hsl(0, 0%, 90%);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.2rem;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
}

.books .heading {
    color: hsl(0, 0%, 90%);
    line-height: 2.25rem;
    font-size: 2.2rem;
    font-variant: small-caps;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    white-space: pre-line;
}

.my-books-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    width: 100%;
    padding: 32px 0px;
}

.my-book {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 85%;
    max-width: 300px;
}

.my-book-image {
    max-width: 240px;
    margin-bottom: 16px;
}

.my-book-cover-link {
    /* max-width: 240px; */
}

.my-book-image-clickable {
    
    box-shadow: 4px 4px 16px hsl(0, 0%, 45%);
}

.my-book-title {
    line-height: 1.85rem !important;
    font-size: 1.6rem !important;
}

.my-book-subtitle {    
    padding: 0px 8px;
    color: hsl(0, 0%, 90%);
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.2rem;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
}

.my-book-author {    
    padding: 0px 8px;
    padding-top: 16px;
    color: hsl(0, 0%, 90%);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.2rem;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
}

.my-book .link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 680px;
    height: 90%;
    margin: 16px auto;
    font-size: 1rem;
    color: hsl(0, 0%, 90%);
    border-color: hsl(0, 0%, 90%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    transition-property: background-color, text-shadow;
    transition-duration: 0.2s;
}

.my-book .link-button-disabled {
    color: hsl(0, 0%, 50%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 5%);
    background-color: transparent;
    cursor: not-allowed;
}

.my-book .link-button-disabled:hover,
.my-book .link-button-disabled:focus {
    background-color: transparent !important;
    text-shadow: 1px 1px 4px hsl(0, 0%, 5%) !important;
}

.books-schedule .link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 680px;
    height: 90%;
    margin: 0px auto;
    font-size: 1.2rem;
    color: hsl(0, 0%, 90%);
    border-color: hsl(0, 0%, 90%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    transition-property: background-color, text-shadow;
    transition-duration: 0.2s;
}

.my-book .link-button:hover,
.my-book .link-button:focus,
.books-schedule .link-button:hover,
.books-schedule .link-button:focus {
    background-color: hsla(0, 0%, 90%, 50%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 10%);
}

/* Coaching Section *******************************************************************************/

.coaching {
    height: auto;
    padding-bottom: 32px;
}

.coaching .heading {
    color: hsl(0, 0%, 90%);
    line-height: 2.25rem;
    font-size: 2.2rem;
    font-variant: small-caps;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    white-space: pre-line;
}

.coaching-subcontainer {
    padding: 32px 0px;
}

.coaching-text {    
    padding: 0px 8px;
    padding-bottom: 24px;
    color: hsl(0, 0%, 90%);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.2rem;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
}

.coaching-text-variable:after {
    content: "";
}

.coaching-list {
    padding: 0px 32px;
    text-align: left;
}

.coaching-list li
{
    padding-bottom: 8px;
}

.coaching-schedule .link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 680px;
    height: 90%;
    margin: 0px auto;
    font-size: 1.2rem;
    color: hsl(0, 0%, 90%);
    border-color: hsl(0, 0%, 90%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    transition-property: background-color, text-shadow;
    transition-duration: 0.2s;
}

.coaching-schedule .link-button:hover,
.coaching-schedule .link-button:focus {
    background-color: hsla(0, 0%, 90%, 50%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 10%);
}

.coaching-books-pane {
    display: flex;
    flex-direction: column;
}

.coaching-books-slideshow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    width: 100%;
    padding: 32px 0px;
    overflow-x: scroll;
}

@media (min-width: 1200px)
{

    .coaching {
        min-height: 800px;
    }

    .coaching-container {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas:
            "heading books"
            "info books"
            "schedule books";
        gap: 32px;
        height: 100vh;
        max-height: 100vh;
        width: 90%;
    }

    .coaching-heading {
        grid-area: heading;
        text-align: left !important;
    }

    .coaching-info-pane {
        grid-area: info;
    }

    .coaching-books-pane {
        grid-area: books;
        align-self: stretch;
        justify-content: center;
    }

    .coaching-schedule {
        grid-area: schedule;
    }

    .coaching-text {
        text-align: left;
    }

    .coaching-text-variable:after {
        content: "";
    }

}

@media (min-width: 1400px)
{

    .coaching-container {
        width: 80%;
    }

}

/* Testimonials Section ***************************************************************************/

.testimonials {
    width: 100%;
    height: auto;
    padding-bottom: 32px;
}

.testimonials-container {
    width: 100%;
}

.testimonials .heading {
    color: hsl(0, 0%, 90%);
    line-height: 2.25rem;
    font-size: 2.2rem;
    font-variant: small-caps;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    white-space: pre-line;
}

.accolades-testimonials-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    padding-top: 32px;
}

.accolade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 85%;
    padding: 16px 32px;
}

.accolade-double {
    width: 100% !important;
    padding-bottom: 32px;
}

.accolade-badge {
    max-width: 120px;
    padding-bottom: 16px;
}

.accolade-title {
    line-height: 1.85rem !important;
    font-size: 1.4rem !important;
}

.accolade-subtitle {
    color: hsl(0, 0%, 90%);
    font-size: 0.9rem;
    line-height: 1.2rem;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
}

.testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.testimonial
{
    background-color: black;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    width: 100%;
}

.testimonial:nth-child(odd)
{
    background-color: hsl(270, 9%, 17%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 0%);
}

.testimonial-body {
    padding: 0px 8px;
    padding-bottom: 24px;
    color: hsl(0, 0%, 90%);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4rem;
    text-align: center;
}

.testimonial-body::before,
.testimonial-body::after {
    content: "\"";
}

.testimonial-author {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 80%;
}

.testimonial-author-name {
    line-height: 1.25rem;
    font-family: "Caveat", "Courier", sans-serif;
    font-size: 1.4rem;
    color: hsl(90, 9%, 83%);
}

.testimonial-author-name small {
    display: inline-block;
    padding-top: 8px;
    font-size: 0.8rem;
}

.testimonials-schedule .link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    max-width: 680px;
    height: 90%;
    margin: 0px auto;
    margin-top: 32px;
    font-size: 1.2rem;
    color: hsl(0, 0%, 90%);
    border-color: hsl(0, 0%, 90%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    transition-property: background-color, text-shadow;
    transition-duration: 0.2s;
}

.testimonials-schedule .link-button:hover,
.testimonials-schedule .link-button:focus {
    background-color: hsla(0, 0%, 90%, 50%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 10%);
}

@media (min-width: 800px)
{

    .accolade {
        width: 45%;
    }

    .accolade-double {
        width: 100% !important;
    }

    .testimonials-schedule .link-button {
        width: 85%;
    }

}

@media (min-width: 1000px)
{

    .testimonial {
        width: 50%;
        padding: 48px 64px;
        background-color: black !important;
        text-shadow: 1px 1px 4px hsl(0, 0%, 45%) !important;
    }

    .testimonial:nth-child(2n)
    {
        background-color: hsl(270, 9%, 17%) !important;
        text-shadow: 1px 1px 4px hsl(0, 0%, 0%) !important;
    }

    .testimonial-long {
        width: 100% !important;
        padding: 64px 128px;
    }

}

@media (min-width: 1200px)
{

    .accolade {
        width: 22.5%;
    }

    .testimonial {
        padding: 64px 128px;
    }

}

/* Contact Section ********************************************************************************/

.contact {
    height: auto;
    background-image: linear-gradient(
        to bottom,
        hsl(0, 0%, 0%),
        hsl(0, 0%, 10%)
    );
}

.contact .heading {
    color: hsl(0, 0%, 90%);
    line-height: 2.25rem;
    font-size: 2.2rem;
    font-variant: small-caps;
    text-align: center;
    text-shadow: 1px 1px 4px hsl(0, 0%, 45%);
    white-space: pre-line;
}

.contact-button-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "schedule" "linkedin" "substack";
    gap: 16px;
    width: 100%;
    padding: 32px 0px;
}

.contact-pane {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    text-decoration: none;
    transition-property: background-color, text-shadow;
    transition-duration: 0.2s;
}

.contact-pane img,
.contact-pane svg {
    width: 25%;
}

.contact-pane:hover,
.contact-pane:focus {
    background-color: hsla(0, 0%, 90%, 50%);
    text-shadow: 1px 1px 4px hsl(0, 0%, 10%);
}

.contact-button-heading {
    font-size: 1.5rem !important;
    white-space: unset !important;
}

.contact-schedule {
    grid-area: schedule;    
}

.contact-linkedin {
    grid-area: linkedin;    
}

.contact-substack {
    grid-area: substack;        
}

@media (min-width: 600px)
{

    .contact-button-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "schedule schedule" "linkedin substack";
    }

    .contact-pane img,
    .contact-pane svg {
        width: 50%;
        max-width: 128px;
    }

}

@media (min-width: 1200px)
{

    .contact-button-container {
        grid-template-columns: 0.75fr 1.5fr 0.75fr;
        grid-template-areas: "linkedin schedule substack";
    }

    .contact-pane img {
        width: 40%;
    }

    .contact-schedule svg {
        width: 60%;
        max-width: 224px;
    }

}

/* Footer *****************************************************************************************/

footer {
    padding: 32px 0px;
    background-color: hsl(0, 0%, 10%);
}

footer p, 
footer a {
    color: hsl(0, 0%, 90%);
    font-size: 0.75rem;
    text-align: center;
}