/* Mobile first design */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

    
/* global styles */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 15px;
}


/* reusuable styles */

:root {
    /* colours */
    /* primary */
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);

    /* neutral */
    --grey-500: hsl(234, 12%, 34%);
    --grey-400: hsl(212, 6%, 44%);
    --white: hsl(0, 0%, 100%);
    --off-white: hsl(0, 0%, 98%);

    /* typography */
    --text-preset-1: 600 36px/1.4 'Poppins', sans-serif;
    --mobile-text-preset-1: 600 24px/1.4 'Poppins', sans-serif;
    --text-preset-2: 200 36px/1.4 'Poppins', sans-serif;
    --mobile-text-preset-2: 200 24px/1.4 'Poppins', sans-serif;
    --text-preset-3: 600 20px/1.35 'Poppins', sans-serif;
    --text-preset-4: 400 15px/1.4 'Poppins', sans-serif;
    --text-preset-5: 400 13px/1.6 'Poppins', sans-serif;
    
    /* Spacing */
    --spacing-600: 56px;
    --spacing-550: 46px;
    --spacing-500: 40px;
    --spacing-400: 32px;
    --spacing-300: 24px;
    --spacing-200: 16px;
    --spacing-100: 8px;
    --default-letter-spacing: 0; 
    --special-letter-spacing: 0.25px;

}
/* Special letter spacing applied */
.heading, .thinHeading {
    letter-spacing: var(--special-letter-spacing);
}

.cardName, .cardDescription {
    letter-spacing: var(--default-letter-spacing);
}

/* mobile positioning */
body {
    background-color: var(--off-white);

    min-height: 100vh;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    max-width: 100%;
    min-height: 100vh;
    margin: var(--spacing-600) var(--spacing-400) var(--spacing-400) var(--spacing-400);
}

/* Header */
.headerContainer {
    margin-bottom: 4rem;
    text-align: center;
}

.heading {
    font: var(--mobile-text-preset-1);
    color: var(--grey-500);

    margin-bottom: var(--spacing-200); /* margin added between heading and description */
}

.thinHeader {
    font: var(--mobile-text-preset-2);
    display: block;
}

/* paragraph */
.description {
    font: var(--text-preset-4);
    color: var(--grey-500);
}

/* card - styles */

.cardWrapper {
    display: grid;
    justify-content: center;
}
.cardContainer {
    background-color: var(--white);
    max-width: 314px;
    max-height: 250px;
    
    border-radius: var(--spacing-100);
    padding: var(--spacing-400); /* all around inside 32px */
    margin-bottom: var(--spacing-400); /* create space between cards */
    box-shadow: 0 15px 30px -11px rgba(131,166,210,0.5); /* added box shadow */
}

.cardTextContainer {
    margin-bottom: var(--spacing-400);
}

.cardName {
    font: var(--text-preset-3);
    color: var(--grey-500);
    margin-bottom: 0.4rem;
}

.cardDescription {
    font: var(--text-preset-5);
    color: var(--grey-400);
}

/* card Image */
.cardImage {
    float: right;
}


/* border-top colours */

.cardSupervisor {
    border-top: 4px solid var(--cyan);
}

.cardBuilder {
    border-top: 4px solid var(--red);
}

.cardKarma {
    border-top: 4px solid var(--orange);
}

.cardCalculator {
    border-top: 4px solid var(--blue);
}

/* attribution */

.attribution {
    display: none;
}

/* tablet */
@media (min-width: 768px){



/* main | margin top bottom */

.main {
    min-width: 100%;
    margin: 5.33rem 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body {
    margin: 0;
}

/* Heading styles */

.headerContainer {
    
    max-width: 540px;

    margin: 0 7.6rem 7.6rem 4.933rem;
}

.heading {
    font: var(--text-preset-1);
}

.thinHeader {
    font: var(--text-preset-2);
}


/* Card - Grid Styles */
.cardWrapper {
    display: grid;

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3,1fr);
    gap: var(--spacing-400);

}

/* remove margin-bottom .cardContainer since we now have gap ^*/

.cardContainer {
    margin-bottom: 0;
}

.cardCenterTop {
    grid-row: 1;
    grid-column: 1/ 3;
    
}

.cardCenterBottom {
    grid-row: 3 / 4;
    grid-column: 1 / 3;

}

.cardLeft {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    justify-self: end;
}

.cardRight {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    justify-self: start;
}

.gridCenter {
    justify-self: center;
}


}

/* Desktop */

@media (min-width: 1440px) {

.cardWrapper {
    /* changing layout | 3 Columns & 2 Rows */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

    gap: var(--spacing-400);
}

.cardContainer {
    margin-bottom: 0;

    /* increase width & height */

    max-width: 350px;
    max-height: 250px;
}

.cardSupervisor {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    align-self: center;
}

.cardBuilder {
    grid-column: 2 / 3;
    grid-row: 1;
}

.cardKarma {
    grid-column: 2 / 3;
    grid-row: 2;
}

.cardCalculator {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    align-self: center;
}


/* Attribution */
.attribution {
    display: block;
    font: var(--text-preset-1);
    font-size: 11px; text-align: center;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 15px;

}
.attribution a {
    color: hsl(228, 45%, 44%); 
}

.attribution a:hover {
    cursor: pointer;
    color: hsl(228, 45%, 60%);
    text-shadow: 0 0 4px hsla(228, 45%, 60%, 0.4);
}
}