/* */

/* table of contents

    general layout

    typography

    components



    based on : Kevin Poweell' Youtube "5 CSS mistakes that I see way too often" 
    https://youtu.be/iHEkRIF7zxI 
*/


/* ************** 
    general layout
   ************** 
*/

/* recommended from Kevin Powell https://youtu.be/nYyFf-97Qqg
*/
*, *::before, *::after {
    box-sizing: border-box;
}

/* recommended Kevin Powell https://youtu.be/h3bTwCqX4ns */
* {
    margin: 0;
    padding: 0;
    font: inherit; /* to enforce that headings are not used for styling */
}

body {
    color: var(--color-dark-gray);
    background-origin: var(--color-white-background);
    font-family: 'Roboto Slab', serif;
    font-size: var(--fs-regular);
    line-height: 1.6;
    margin: 0 auto;
}

/* adapted from Kevin Powell https://youtu.be/KqFAs5d3Yl8 
    to ensure that layout works for mobile */
@media (min-width: 600px) {
    body {
        min-height: 100vh;
        /* display: grid; */
        /* place-items: center; */
    }
}

/* define colors that you will use througout this page */
 /* customm css properties as suggested in Kevin Powell Video https://youtu.be/CBEhJN0KcJA */
:root {
    --color-white-background: #f5f5f5;
    --color-light-gray: #c1c1c1;
    --color-dark-gray: #3a3a3a;
    --color-dark-bluegreen: #4F6E7A;
    
    --fw-normal: 400;
    --fw-bold: 700;
    --fw-black: 900;
    
    --fs-regular: 1.2rem;
    --fs-medium: 3rem;
    --fs-large: 3.5rem; 
}

/* recommended Kevin Powell https://youtu.be/h3bTwCqX4ns */
img, svg {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 70ch;
    margin: 0 auto;
}

/* note for later: add here a media query to address users that enable recuded motion 
/* recommended Kevin Powell https://youtu.be/h3bTwCqX4ns */

/* ************** 
    typography
   ************** 
*/

h1 {
    font-family: 'Catamaran', sans-serif;
    font-size: var(--fs-large);
    line-height: 0.94;
    padding: 3rem 0 1rem;
    color: var(--color-dark-gray);
}

h2, 
h3,
h4,
h5,
h6 {
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-medium);
    line-height: 0.9;
    padding: 2rem 0;
    color: var(--color-dark-bluegreen);
}

p {
    padding: 1rem 0;
    /* max-width: 75ch; */
    margin: 0 auto;

}


/* ************** 
    components
   ************** 
*/

.diagram {
    display: grid;
    grid-auto-flow: row;
    max-width: 500px;
    min-height: 200px;
    margin: 0 auto;
    border-radius: 25px;
}

.btn-box > button {
    background-color: var(--color-dark-bluegreen);
    color: var(--color-white-background);
    padding: 0.5rem 3rem;
    border-radius: 25px;
    font-family: 'Mulish', sans-serif;
    font-size: var(--fs-regular);
    font-weight: var(--fw-bold);
}

.btn-box {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 800px) {
    .middle-panel {
    gap: 2rem;
    padding-top: 2rem;
    }
}



.slidecontainer {
    display: grid;
    place-content: center;
    padding: 1rem 0 1rem;
}

/* to address TC11 - slider on first diagram overflows   */
@media (min-width: 800px) {
    .slidecontainer {
        grid-auto-flow: column;
        gap: 3rem;  
    }
}


.placeholder-background {
    background-color: beige;
}

.important {
    color: var(--color-dark-bluegreen);
    font-weight: var(--fw-black);
    font-style: italic;
}

/* ************** 
    classes
   ************** 
*/

.top-panel {
    width: 100%;
    padding: 4rem 1rem;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) ,rgba(255,255,255,0.2) )  ,
                    url(../images/blue-retractable-pen-q30.webp);
    background-size: cover;
    background-position: center center;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    
}

.text-panel {
    padding: 2rem 1rem;
}

.middle-panel {
    width: 100%;
    padding: 1rem 0.5rem;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) ,rgba(255,255,255,0.2) )  ,
                    url(../images/blue-retractable-pen-small-q30.webp);
    background-size: cover;
    background-position: center center;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px; 
}

@media (min-width: 800px) {
    .middle-panel {
        padding: 4rem 1rem;    
    }
}

.bottom-panel {
    width: 100%;
    padding: 1rem 0.5rem;    
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) ,rgba(255,255,255,0.2) )  ,
                    url(../images/blue-retractable-pen-small-q30.webp);
    background-size: cover;
    background-position: center center;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;  
}

@media (min-width: 800px) {
    .bottom-panel {
        padding: 4rem 1rem;    
    }
}