/*
Student Name: Kelly Ferrigan
Course: CIS233DA
Section: 10385
Instructor: Amy Clubb
Date: 8/5/2023
*/
/* imported fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,700;1,400;1,700&family=Gantari:ital,wght@0,400;0,700;1,400;1,700&family=Spline+Sans+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* browser reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* variables */
:root {
    /* color scheme */
    --main-dark-color: #1c130d;
    --main-med-dark-color: #553926;
    --main-med-color: #bb8663;
    --main-med-light-color: #ddb892;
    --main-light-color: #ede0d4;
    --accent-dark-color: #0d1321;
    --accent-med-dark-color: #2e455d;
    --accent-med-color: #597491;
    --accent-med-light-color: #99abc2;
    --accent-light-color: #e6eaf0;

    /* fonts */
    --heading-font: 'Cormorant', Garamond, Georgia, serif;
    --body-font: 'Gantari', Helvetica, 'Calibri', Arial, sans-serif;
    --code-font: 'Spline Sans Mono', Courier, 'Menlo', monospace;
}
/* body styles */
body {
    display: flex;
    flex-direction: column;
    /* sets font */
    font-family: var(--body-font);
    /* sets font color */
    color: var(--main-dark-color);
    /* spaces out lines for accessibility */
    line-height: 1.5;
}

/* Skip Navigation styles - start */
#skip-nav {
    /* sets skip nav button to top left */
    position: absolute;
    top: 0;
    left: .5rem;
    /* adds whitespace within the button */
    padding: .5rem 1rem;
    /* colors the button and text */
    background-color: var(--main-light-color);
    color: var(--main-dark-color);
    /* bolds the font for readability */
    font-weight: bold;
    /* removes the underline */
    text-decoration: none;
    /* rounds bottom corners only */
    border-radius: 0 0 .5rem .5rem;
    /* hides skip nav when not in focus */
    transform-origin: top;
    transform: rotateX(90deg);
    transition-duration: 200ms;
    transition-property: all;
    z-index: 3;
}
#skip-nav:focus {
    /* shows skip nav when in focus */
    background-image: linear-gradient(to bottom, var(--accent-light-color), var(--accent-med-light-color));
    color: var(--main-dark-color);
    transform: rotateX(0);
    outline: none;
}
/* Skip navigation styles - end */

/* header styles */
header {
    z-index: 1;
}
.return-home {
    background-color: var(--accent-dark-color);
}
.return-home a {
    color: var(--accent-light-color);
    text-decoration: none;
    font-style: italic;
    margin-left: .5em;
    margin-right: .5em;
}
footer a:focus, footer a:hover, .return-home a:focus, .return-home a:hover {
    text-decoration: underline;
}
.page-title {
    /* sets flex container in row direction */
    display: flex;
    flex-flow: row nowrap;
    /* centers header content horizontally */
    justify-content: center;
    /* adds whitespace above and below the text */
    align-items: center;
    /* adds space between image and header */
    column-gap: 2em;
    padding: .7rem;
    font-size: 95%;
}
.logo {
    /* hide logo when screen is small */
    display: none;
}
/* logo styles */
@media screen and (min-width: 1080px){
    header {
        /* fix to top of viewport */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}
@media screen and (min-width: 521px) {
    .logo {
        display: block;
        /* logo size */
        height: 4rem;
        /* center logo vertically */
        margin-top: -1.1rem;
    }
    header {
        font-size: 1.1em;
    }
}
/* navigation styles */
/* source: https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp */
/* topmost navigation div */
.topnav {
        background-image: linear-gradient(to bottom, var(--accent-med-dark-color), var(--accent-med-color));
        display: flex;
        justify-content: center;
        border-top: solid 1px var(--accent-med-dark-color);
  }

/* aligns icon with word in nav bar */
.topnav .nav-icon, .topnav .dropbtn {
    display: flex;
    align-items: center;
}
/* nav link styles */
.topnav a {
    display: block;
    color: var(--accent-light-color);
    padding: 14px 16px;
    text-decoration: none;
    font-size: 19px;
}
/* active nav links */
.nav-active, .dropbtn.nav-active {
    /* sets background */
    background-color: var(--accent-dark-color);
}
/* hamburger icon */
.topnav .icon {
    /* hide hamburger on large display */
    display: none;
    visibility: hidden;
}
/* dropdown div styles */
.dropdown {
    float: left;
    overflow: hidden;
}
/* dropdown button (top-level) nav styles */
.dropdown .dropbtn {
    font-size: 19px;    
    border: none;
    outline: none;
    color: var(--accent-light-color);
    padding: 16px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
/* sub-menu dropdown content div */
.dropdown-content {
    display: none;
    visibility: hidden;
    position: absolute;
    /* change background color */
    background-color: var(--accent-med-dark-color);
    min-width: 186px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/* links in sub-menu dropdown */
.dropdown-content a {
    float: none;
    color: var(--accent-light-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    visibility: visible;
    text-align: left;
}
/* hover on link styles */
.topnav a:hover, .topnav a:focus, .dropdown:hover .dropbtn, .dropdown:focus-within .dropbtn {
    /* changes colors */
    background-image: linear-gradient(to bottom right, var(--accent-light-color), var(--accent-med-color));
    color: var(--accent-dark-color);
    font-weight: bold;
}
.topnav a:focus, .dropdown:focus-within {
    outline: dashed 2px var(--main-light-color);
}
/* sub-menu styles on div above hover */
.dropdown:hover > .dropdown-content, .dropdown:focus-within .dropdown-content {
    display: block;
    visibility: visible;
    margin-left: auto;
    margin-right: auto;
    /* animation */
    animation: growDown 200ms ease-in;
}

/* needed for sublist animation */
@keyframes growDown {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
/* smaller screen styles */
@media screen and (max-width: 620px) {
    /* all top-level links except the first child link */
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
        visibility: hidden;
    }
    /* first child link */
    .topnav a:first-child {
        /* forces icon to the right */
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    /* aligns icon with word in nav bar */
    .topnav .nav-icon {     
        display: flex;
        align-items: center;
    }
    /* display hamburger icon */
    .topnav a.icon {
        display: block;
        visibility: visible;
        float: right;
    }
    /* mobile top-level nav styles */
    .topnav.responsive {
        display: block;
        position: relative;
        flex-direction: column;
    }
    /* mobile top-level hamburger style */
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    /* links within hamburger */
    .topnav.responsive a {
        float: none;
        display: block;
        visibility: visible;
        text-align: left;
    }
    
    /* top link of sub-menu under hamburger */
    .topnav.responsive .dropdown .dropbtn {
        display: flex;
        align-items: center;
        visibility: visible;
        width: 100%;
        text-align: left;
    }
    /* sub-menu div below hamburger */
    .topnav.responsive .dropdown {
        float: none;
    }
    /* sub-menu content below hamburger */
    .topnav.responsive .dropdown-content {
        position: relative;
    }
}
  /* end of nav styles */
  /* end of header styles */

/* main styles */
main {
    /* background color */
    background-image: linear-gradient(to bottom left, var(--main-med-color), var(--main-med-light-color));
    /* sets height */
    min-height: 100vh;
    max-height: 100%;
}
/* end of main styles */

/* footer styles */
footer {
    padding: .5em;
    text-align: center;
    border-top: solid 2px var(--dark-teal);
    background-color: var(--light-cream);
    font-style: italic;
}
footer p {
    color: var(--dark-teal);
    font-size: 1rem;
    font-style: italic;
    margin-left: auto;
    margin-right: auto;
}
footer ul {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
footer a {    
    text-decoration: none;
    color: var(--dark-teal);
    font-size: 1rem;
    font-style: italic;
    text-align: center;
    padding: 3px 10px;
}
/* larger screen styles */
@media screen and (min-width: 585px) {
    footer {
        /* fixed to bottom of viewport */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* increase font size */
        font-size: 1.2em;
        padding: .5em;
    }
}
/* github link in footer styles */
.footer-link {
    /* sets whitespace */
    padding: .5em;
    /* set font color */
    color: var(--accent-light-color);
}
/* github link hover and focus styles */
.footer-link:hover, .footer-link:focus {
    /* sets colors */
    background-color: var(--accent-light-color);
    color: var(--accent-dark-color);
    /* round corners */
    border-radius: 8px;
    /* bold text */
    font-weight: bold;
    /* removes underline */ 
    text-decoration: none;
}
/* github link on focus */
.footer-link:focus {
    outline: dashed 2px var(--accent-light-color);
}
.page-title, footer {
    /* sets background color */
    background-color: var(--accent-dark-color);
    /* sets text color */
    color: var(--accent-light-color);
    z-index: 1;
}
/* end of footer styles */
/* heading styles */
h1, h2, h3, h4, h5, h6 {
    /* sets the font for the headings */
    font-family: var(--heading-font);
}
/* end of heading styles */
/* code style */
code {
    /* sets the font for the code */
    font-family: var(--code-font);
    /* make font smaller */
    font-size: 16px;
    /* font color */
    color: var(--main-med-dark-color);
    /* bold font */
    font-weight: bold;
}
/* all paragraph styles */
p {
    /* css best practice for readability */
    max-width: 75ch;
}
/* centers text */
.text-center {
    text-align: center;
}
/* bolds text */
.bold-text {
    font-weight: bold;
}
/* italicizes text */
.italic-text {
    font-style: italic;
}
/* card styles */
.card {
    /* border and shadow */
    border: solid 2px var(--main-med-dark-color);
    border-radius: 10px;
    box-shadow: 2px 2px 5px var(--main-dark-color);
    /* colors */
    background-color: var(--main-light-color);
}
/* paragraph on card styles */
.card > p {
    /* adds whitespace */
    margin-top: 1em;
}
/* first paragraph on card styles */
.card > p:first-of-type {
    /* removes whitespace */
    margin-top: .5em;
}

/* index page styles */
/* main section on home page */
.main-home {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 768px) {
    .main-home {
        height: 100vh;
    }
}
@media screen and (min-width: 1080px) {
    .main-home {
        padding-top: 7.5rem;
    }
    .main-about {
        padding-top: 6rem;
        padding-bottom: 3rem;
    }
    .main-cheatsheets {
        margin-top: 6rem;
        margin-bottom: 3rem;
    }
}
/* card on index.html styles */
.index-card {    
    /* whitespace around */
    margin: 3.5rem auto 1rem auto;
    /* whitespace inside */
    padding: 1rem 2rem 1.5rem 2rem;
    max-width: 75ch;
}
/* cheatsheet and component lists on index page */
.cheat-comp {
    list-style: none;
    display: flex;    
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 3rem;
    row-gap: 1rem;
    margin-top: .5rem;
}
.about-link, .cheat-comp > li > a {
    color: var(--main-med-dark-color);
}
.about-link:hover, .cheat-comp > li > a:hover, .about-link:focus, .cheat-comp > li > a:focus {
    /* set colors */
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    /* whitespace around text */
    padding: .2em;
    /* round corners */
    border-radius: 5px;
}
/* in-text page links on focus */
.about-link:focus, .cheat-comp > li > a:focus {
    /* set outline style */
    outline: dashed 3px var(--main-dark-color);
}
/* end of index page styles */

/* about page styles */
/* main section on about page */
.main-about {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width: 1080px) {
    .main-about {
        /* set as grid with 2 columns */
        display: grid;
        grid-template-columns: .4fr 1fr;
    }
    .profile {
        /* places content in grid */
        grid-column: 1;
    }
}
/* profile section styles */
.profile {
    /* center content */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem;
    /* format background */
    background-color: var(--main-med-light-color);
}
/* profile image styles */
.photo {
    /* border to stand out against background */
    border: solid 3px var(--main-med-dark-color);
    /* rounds corners */
    border-radius: 10px;
    margin-top: 1rem;
}
.summary, .name, .profile-links {
    margin-top: .3rem;
}
/* name and location */
.name {
    margin-bottom: .5rem;
    /* makes font larger */
    font-size: 1.5em;
}
/* links group in the profile section */
.profile-links {
    /* increase font size */
    font-size: 1.1em;
    /* space out */
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    gap: .75rem;
    /* bolds font */
    font-weight: bold;
}
/* each profile link */
.profile-links > a {
    /* removes underline */
    text-decoration: none;
    /* format as button */
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    border-radius: 5px;
    padding: .25rem .5rem;
    box-shadow: 2px 2px 5px var(--main-dark-color);
}
/* each profile link on hover and focus */
.profile-links > a:hover, .profile-links > a:focus {
    /* swaps color on hover */
    background-image: linear-gradient(to bottom right, var(--main-light-color), var(--main-med-color));
    color: var(--main-med-dark-color);
    /* adds border to stand out against background */
    border: solid 1px var(--main-med-dark-color);
}
/* each profile link on focus */
.profile-links > a:focus {
    /* outline style */
    outline: dashed 3px var(--main-dark-color);
}
/* end of profile section styles */
@media screen and (min-width: 1080px) {
    /* right section styles */
    .right-section {
        /* place in grid */
        grid-column: 2;
        /* keeps content from edges */
        padding: 2rem 1rem 0 1rem;
    }
    .about.card {
        display: grid;
        grid-template-columns: 3rem auto;
    }
    .profile {
        padding-top: 2rem;
    }
    .summary {
        margin: 1rem 1rem 0 1rem;
    }
    /* h2 headings */
    .about.card > h2 {
        /* places content in grid */
        grid-column: 1;
        grid-row: 1 / 2;
        /* turns h2 sideways and places it to the left */
        text-transform: uppercase;
        font-size: 2.5rem;
        width: max-content;
        text-align: center;
        writing-mode: vertical-rl;
        transform-origin: top left;
        transform: rotateZ(180deg) translateX(-3rem) translateY(-100%);
        /* keeps behind header and footer */
        z-index: 0;
        /* adjusts h2 to be on top of card */
        margin-left: .75rem;
        margin-bottom: -.1rem;
        margin-top: -.1rem;
        /* whitespace around h2 */
        padding: 2rem 0;
        /* round edges to fit card */
        border-radius: 0 8px 8px 0;
        }
    /* common styles for skills, education, and experience */
    .skills, .education, .experience {
        /* places in main grid */
        grid-column: 2;
        /* sets as grid */
        display: grid;
        grid-template-columns: 4em 1fr;
    }
    /* ul styles */
    .skill-list, .schools, .employers {
        /* places content in grid */
        grid-column: 2;
        /* whitespace around content */
        padding: 1rem;
    }
    /* list of skills and list of schools */
    .skill-list, .schools {
        /* sets as grid */
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .languages {
        /* places in grid */
        grid-column: 1;
        grid-row: 1;
    }
    .version {
        /* places in grid */
        grid-column: 1;
        grid-row: 2;
    }
    .soft-skills {
        /* places in grid */
        grid-column: 1;
        grid-row: 3;
    }
    .software {
        /* places in grid */
        grid-column: 2;
        grid-row: 1 / 4;
        /* center content */
        margin-top: auto;
        margin-bottom: auto;
    }
    /* ul > li > ul for skills, education, experience sections */
    .sublist {
        /* left indent */
        margin-left: 2rem;
    }
    /* language and version lists */
    .languages > .sublist, .version > .sublist {
        /* makes the language and version lists their own grids with 3 columns and 2 rows */
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        /* fills grid top down and left to right */
        grid-auto-flow: column;
        /* adds whitespace between rows */
        row-gap: .25rem;
    }
    /* software list item */
    .software > ul > li {
        /* adds whitespace between items */
        padding-bottom: .5rem;
    }
    /* last software list item */
    .software > ul > li:last-of-type {
        /* removes whitespace from the bottom */
        padding-bottom: 0;
    }
    /* schools list */
    ul.schools {
        /* loads items top down */
        grid-auto-flow: column;
    }
    /* UMass Boston */
    /* ul.schools > li:last-of-type { */
        /* adds whitespace above */
        /* margin-top: 1.25rem;
    } */
    ul.schools > li > p, ul.employers > li > ul > li {
        /* adds whitespace below */
        margin-bottom: .25rem;
    }
    .employers {
        /* sets as flex container in column direction */
        display: flex;
        flex-direction: column;
        /* adds whitespace between rows */
        row-gap: 1em;
    }
    .microchip, .edupoint, .donnelley {
        /* maximum content size for accessibility */
        max-width: 75ch;
    }
    /* .edupoint {
        margin-left: 10rem;
    }
    .donnelley {
        margin-left: 20rem;
    } */
}
.right-section {
    display: flex;
    flex-direction: column;
}
/* about page card styles */
.about.card {
    /* whitespace between cards */
    margin: .5rem;
}
/* h2 headings */
div.about > h2 {
    text-align: center;
    /* colors */
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
}
/* .microchip > ul, .edupoint > ul, .donnelley > ul { */
.right-section ul {
    list-style-type: none;
}
.skill-list, .schools, .employers {
    margin: .5rem;
}
/* end of about page styles */

/* cheatsheet and component page styles */
.main-cheatsheets, .main-components {
    /* whitespace around tabs */
    padding: 2rem;
}
/* h2 above tabs */
.title {
    /* background color */
    background-color: var(--main-light-color);
    /* whitespace */
    padding: .5rem 1rem;
    margin-top: -.5rem;
    margin-bottom: .5rem;
    /* make background smaller */
    width: fit-content;
    /* center h2 */
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 10px 0 10px;
}
h2 {
    font-weight: bold;
}
@media screen and (min-width: 1080px) {
    .title {
        margin-top: 3.5rem;
    }
    .tab-menu {
        padding-left: 1rem;
        padding-right: 2rem;
    }
}
/* tab styles */
/* all tabs together */
.tab-menu > ul {
    /* lines tabs up horizontally */
    display: flex;
    flex-flow: row wrap;
}
.tab-menu li {
    list-style: none;  /* removes all bullets from the cheatsheet */
}
/* each tab styles */
.tab {
    padding: 1rem; /* adds whitespace around tab text */
    border: solid thin var(--main-dark-color);
    border-radius: .5rem .5rem 0 0;
    margin-bottom: -.08rem; /* brings tab down to attach to tab content */
    text-transform: uppercase; /* makes text all caps */
    cursor: pointer;
}
/* tab hover effect */
.tab:hover, .tab:focus {
    background-image: linear-gradient(to bottom, var(--main-med-dark-color), var(--main-dark-color));
    color: var(--main-light-color);
    border-top: solid thick var(--main-med-dark-color);
}
/* tab focus styles */
.tab:focus {
    outline: dashed 3px white;
}
/* active tab styles */
.tab[aria-selected="true"] {
    background-color: var(--main-med-light-color); /* darker background color than unselected tabs */
    border-bottom: solid 1px var(--main-med-light-color); /* hides tab content border for bottom of selected tab only so it looks connected */
    border-top: solid thick var(--main-dark-color);
}
/* selected tab style on hover */
.tab[aria-selected="true"]:hover, .tab[aria-selected="true"]:focus {
    border-top: solid thick var(--main-med-dark-color);
    border-left: solid thin var(--main-med-dark-color);
    border-right: solid thin var(--main-med-dark-color);
}
/* inactive tab styles */
.tab[aria-selected="false"] {
    background-color: var(--main-light-color); /* lighter background color than selected tab */
    border-color: var(--main-med-dark-color);
    border-bottom: solid thin var(--main-med-dark-color);
    border-top: solid thick var(--main-med-dark-color);
}
/* tab content styles */
.tab-content {
    border: thin solid var(--main-dark-color);
    border-radius: 0 .5rem .5rem .5rem;
    box-shadow: 3px 3px 5px var(--accent-dark-color);
    padding: .5rem 1.5rem 1rem 1.5rem;
    background-color: var(--main-med-light-color);
    /* set as a flex container in the row direction with wrap */
    display: flex;
    flex-flow: row wrap;
    /* center content horizontally */
    justify-content: center;
}
.tab-content .category {
    /* adds whitespace after category lists */
    margin-bottom: 1rem;
}
/* end of tab styles */

@media screen and (min-width: 1080px) {
    .main-cheatsheets {
        padding: 35rem;
    }
    /* cheatsheets card */
    .main-cheatsheets .card {
        /* set as a grid with 2 columns, 2 rows */
        display: grid;
        grid-template-columns: 4rem 1fr;
        /* whitespace */
        margin: 1rem .25rem;
    }
    .card h3 {
        /* places in grid */
        grid-column: 1;
        grid-row: 1;
        /* turns h3 sideways and places it to the left */
        font-size: 2.5rem;
        width: max-content;
        text-align: center;
        writing-mode: vertical-rl;
        transform-origin: top left;
        transform: rotateZ(180deg) translateX(-3rem) translateY(-100%);
        /* keeps behind header and footer */
        z-index: 0;
        /* adjusts h3 to be on top of card */
        margin-left: .75rem;
        margin-bottom: -.1rem;
        margin-top: -.1rem;
        /* whitespace around h3 */
        padding: 2rem 0;
        /* round edges to fit card */
        border-radius: 0 8px 8px 0;
    }
}
.card h3 {
    text-transform: uppercase;
    /* sets colors */
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
}
/* adds whitespace between cards */
.card {
    margin-bottom: 1rem;
}
/* sections within sectioning card */
.category {
    /* places text sections in grid */
    grid-column: 2;
    /* whitespace around text */
    padding: 1rem;
    /* set as flex container */
    display: flex;
    flex-direction: column;
}
/* cheatsheet paragraphs */
.html p, .layouts p, .ui p, .effect > div > p:first-of-type, .aria .category > p:first-of-type {
    /* places in grid */
    grid-column: 2;
    grid-row: 1;
    /* whitespace after */
    margin-bottom: 1rem;
    /* padding between border and text */
    padding-left: .5rem;
    padding-right: .5rem;
    /* border to set content apart */
    border-left: 5px solid var(--main-med-dark-color);
    border-bottom: 2px solid var(--main-med-dark-color);
}
@media screen and (min-width: 1080px) {
    dl.category-list {
        /* sets as grid with 2 columns */
        display: grid;
        grid-template-columns: max-content 1fr;
        /* space between list items */
        gap: 1rem 2rem;
    }
}
dt {
    margin-top: .5rem;
}
.main-cheatsheets {
    padding: 1rem 0;
}
.category-list {
    display: flex;
    flex-direction: column;
}
dd {
    /* sets max text width for accessibility */
    max-width: 75ch;
}
code > span {
    font-weight: normal;
}
/* cheatsheet button styles */
.cheat-button {
    width: max-content;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.75rem;
    background-image: linear-gradient(to bottom, var(--main-dark-color), var(--main-med-dark-color));
    font-weight: bold;
    padding: .75em; /* adds space around the text in the button */
    border: thin solid var(--main-light-color);
    border-radius: 10px; /* rounds the button edges */
    box-shadow: 2px 2px 5px var(--main-dark-color); /* adds a shadow to make it pop off the tab content area */
    text-transform: capitalize; /* makes the text initial caps */
}
/* cheat button on hover/focus */
.cheat-button:hover {
    /* color swaps on hover and focus of button */
    border: solid thin var(--main-dark-color);
    background-image: linear-gradient(to bottom, var(--main-light-color), var(--main-med-color));
}
/* cheat button link */
.cheat-button a {
    text-decoration: none; /* removes the underline */
    color: var(--main-light-color);
    padding: .75em;  /* extends clickable area to fill button */
}
/* cheat button link on hover/focus */
.cheat-button a:hover {
    color: var(--main-dark-color);
}
.cheat-button a:focus {
    outline: dashed var(--main-light-color); /* changes focus outline to dashes */
}
/* end of cheatsheet button */

/* at-rules tab styles */
/* at-rules cards */
.atRules, .graphical .category {
    /* center content vertically */
    align-items: center;
}
/* content on at-rules and graphical cheat card */
.atRules > .category, .graphical > .category {
    /* set as a flex container in row direction */
    display: flex;
    flex-direction: row;
    /* whitespace between rows and columns */
    gap: 5em;
}
/* end of at-rules styles */

/* effects-cheat styles */
.values p:last-of-type {
    /* add whitespace below last p */
    margin-bottom: 1em;
}
/* end of effects-cheat styles */

/* aria-cheat styles */
@media screen and (min-width: 1080px) {
    /* cheatsheet cards */
    .aria.card, .html.card, .layout.card, .selector.card, .ui.card, .atRules.card, .effect.card, .graphical.card {
        display: grid;
        /* adds a row for the button link */
        grid-template-rows: auto 5rem;
    }
    /* cheatsheet cards */
    .aria.card h3, .html.card h3, .layout.card h3, .selector.card h3, .ui.card h3, .atRules.card h3, .effect.card h3, .graphical.card h3 {
        /* extends h3 to row with button */
        grid-row: 1 / 3;
    }
}
.aria.card h3, .html.card h3, .layout.card h3, .selector.card h3, .ui.card h3, .atRules.card h3, .effect.card h3, .graphical.card h3 {
    text-align: center;
}
.aria .category-list dt {
    /* initial caps every word */
    text-transform: capitalize;
}
.aria .category-list p {
    /* add whitespace after paragraphs on card */
    margin-bottom: .5em;
}
/* end of aria-cheat styles */

/* pattern/component card styles */
.menu.card, .ex-tab-menu.card, .mobile-menu.card {
    display: flex;
    flex-flow: column nowrap;
}
.menu.card h3, .ex-tab-menu.card h3, .mobile-menu.card h3, .widget.card h3, .media.card h3, .cards.card h3 {
    text-align: center;
}
@media screen and (min-width: 1080px) { 
    .menu.card, .ex-tab-menu.card, .mobile-menu.card {
        display: grid;
        
    }   
    /* mobile menu tab styles */
    .mobile-menu > .category, .ex-tab-menu > .category {
        /* sets menu card content as grid with 3 columns and 3 rows */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto 1fr auto;
        max-width: 100vw;
    }
    /* card content not including h3 */
    .menu > .category, .media > .category, .cards > .category, .widget > .category {
        /* sets menu card content as grid with 2 columns and 3 rows */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto 1fr auto;
    }
    /* h3 on menu card */
    .menu.card h3, .mobile-menu.card h3, .ex-tab-menu.card h3, .media.card h3, .cards.card h3, .widget.card h3 {
        /* places h3 in grid */
        grid-row: 1 / 4;
    }
    /* first p on cards */
    .menu .category p:first-of-type, .media > .category > p:first-of-type, .cards .category p:first-of-type, .widget .category p:first-of-type, .selector .category > p:first-of-type {
        /* places in grid */
        grid-row: 1;
        grid-column: 1;
    }
    /* html code on menu card */
    .html-code {
        /* places in grid */
        grid-row: 2;
        grid-column: 1;
        /* adds border for visual separation from CSS code */
        border-right: 1px solid var(--main-med-dark-color);
        /* adds whitespace within */
        padding-right: 1rem;
    }
    /* css code on menu card */
    .css-code {
        /* places in grid */
        grid-row: 2;
        grid-column: 2;
        /* adds whitespace between text and vertical line */
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
    /* javascript code on menu card */
    .js-code {
        /* places in grid */
        grid-row: 2;
        grid-column: 3;
        /* adds vertical line for visual separation */
        border-left: 1px solid var(--main-med-dark-color);
        /* adds whitespace between text and vertical line */
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
}
/* first p on cards */
.menu .category p:first-of-type, .media > .category > p:first-of-type, .cards .category p:first-of-type, .widget .category p:first-of-type, .selector .category > p:first-of-type {
    /* whitespace after */
    margin-bottom: 1rem;
    /* padding between border and text */
    padding-left: .5rem;
    padding-right: .5rem;
    /* border to set content apart */
    border-left: 5px solid var(--main-med-dark-color);
    border-bottom: 2px solid var(--main-med-dark-color);
}
/* mobile and tab menu p styles */
.mobile-menu .category p:first-of-type, #tab-content .category p:first-of-type {
    /* places in grid */
    grid-row: 1;
    grid-column: 1 / 3;
    /* whitespace after */
    margin-bottom: 1rem;
    /* padding between border and text */
    padding-left: .5rem;
    padding-right: .5rem;
    /* border to set content apart */
    border-left: 5px solid var(--main-med-dark-color);
    border-bottom: 2px solid var(--main-med-dark-color);

}
/* html code heading */
.html-code h4, .css-code h4, .js-code h4, .example-comp h4 {
    /* increases font size for readability */
    font-size: 1.5em;
    /* whitespace below */
    margin-bottom: 1rem;
    /* change colors */
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}
/* example on menu card */
.example-comp {
    /* places in grid */
    grid-row: 3;
    grid-column: 1 / 3;
    /* add whitespace above and below */
    margin-top: 2rem;
}
/* example on mobile and tab menu cards */
.mobile-menu .example-comp, #tab-content .example-comp {
    /* places in grid */
    grid-row: 3;
    grid-column: 1 / 4;
    /* add whitespace above and below */
    margin-top: 2rem;
    margin-bottom: 1rem;
}
/* tab menu example */
#tab-content .example-comp {
    /* center, whitespace below */
    justify-self: center;
    margin-bottom: 2rem;
}
.example-comp > .audio-player, .video-player, .iframe-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
pre {
/* wraps code */
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* end of page styles */

/* example styles */
/* horizontal menu styles */
#horiz-nav {
    /* set as flex container in row direction, no wrapping */
    display: flex;
    flex-flow: row wrap;
    /* center content and spread it out evenly */
    justify-content: space-evenly;
    /* background color */
    background-color: var(--main-med-dark-color);
}
/* horizontal nav link styles */
#horiz-nav a {
    /* remove underline */
    text-decoration: none;
    /* text color */
    color: var(--main-light-color);
    /* whitespace within */
    padding: .5em 1em;
}
/* link on hover styles */
#horiz-nav a:hover, #horiz-nav a:focus {
    /* colors */
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}
#horiz-nav a:focus {
    outline: dashed var(--main-dark-color);
}
/* end of horizontal menu styles */

/* vertical menu styles */
#vert-nav {
    /* set as flex container in row direction, no wrapping */
    display: flex;
    flex-direction: column;
    /* set width */
    width: 13rem;
    /* center content and spread it out evenly */
    justify-self: center;
    /* background color */
    background-color: var(--main-med-dark-color);
}
/* vertical nav link styles */
#vert-nav a {
    /* remove underline */
    text-decoration: none;
    /* stretches link to full container width */
    width: 100%;
    /* text color */
    color: var(--main-light-color);
    /* whitespace within */
    padding: .5em 1em;
}
/* link on hover styles */
#vert-nav a:hover, #vert-nav a:focus {
    /* colors */
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}
#vert-nav a:focus {
    outline: dashed var(--main-dark-color);
}
/* end of vertical menu styles */

/* mobile menu styles */
/* source: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp */
/* Style the navigation menu */
#mobile-nav {
    overflow: hidden;
    background-color: var(--main-dark-color);
    position: relative;
    margin-left: auto;
    margin-right: auto;
  }  
@media screen and (min-width: 1080px) {
    #mobile-nav {
        width: 25%;
    }
}
  /* Hide the links inside the navigation menu (except for logo/home) */
  /* Style navigation menu links */
  #mobile-nav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  /* Style the hamburger icon */
  #mobile-nav > a.icon {
    background: var(--main-dark-color);
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  /* Add a grey background color on mouse-over */
  #mobile-nav a:hover, #mobile-nav a:focus {
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
  }
  #mobile-nav a:focus {
    outline: dashed var(--main-light-color);
  }
  /* Style the active link (or home/logo) */
  .mobile-active {
    background-color: var(--main-med-dark-color);
    color: white;
  }
 #mobile-nav #myLinks {
    display: none;
  }  
/* mobile menu styles end */

/* breadcrumb menu styles */
/* source: https://www.w3schools.com/howto/howto_css_breadcrumbs.asp */
/* Style the list */
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: var(--main-dark-color);
  }  
  /* Display list items side by side */
  ul.breadcrumb li {
    display: inline;
    font-size: 18px;
    color: var(--main-med-light-color);
  }  
  /* Add a slash symbol (/) before/behind each list item */
  ul.breadcrumb li+li:before {
    padding: 8px;
    color: var(--main-light-color);
    content: "/\00a0";
  }  
  /* Add a color to all links inside the list */
  ul.breadcrumb li a {
    color: var(--main-light-color);
    text-decoration: none;
  }  
  /* Add a color on mouse-over */
  ul.breadcrumb li a:hover, ul.breadcrumb li a:focus {
    color: var(--main-med-color);
    text-decoration: underline;
  }
  ul.breadcrumb li a:focus {
    outline: dashed var(--main-light-color);
  }
/* end of breadcrumb menu styles */

/* dropdown submenu styles */
/* entire menu styles */
.ex-dropdown-nav {
    /* background color */
    background-color: var(--main-dark-color);
    /* width */
    width: 85%;
    /* removes margins and padding */
    padding: 0;
    margin-top: 0;
    /* centers menu bar horizontally */
    margin-left: auto;
    margin-right: auto;
    /* whitespace below */
    margin-bottom: 350px;
    /* font */
    font-family: var(--body-font);
}
/* entire menu and submenu styles */
.ex-dropdown-nav ul {
    /* removes bullets */
    list-style: none;
    /* removes whitespace around */
    margin: 0;
    padding: 0;
}
/* each menu button + submenu styles */
.ex-dropdown {
    /* lines them up horizontally */
    display: inline-block;
}
/* top menu button styles */
.ex-dropdown button {
    /* removes border */
    border: none;
    /* colors */
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
    /* whitespace within */
    padding: 16px;
    /* font size */
    font-size: 16px;
}
/* top menu button on hover styles */
.ex-dropdown:hover button, .ex-dropdown:focus-within button {
    /* sets colors */
    background-color: var(--main-med-color);
    color: var(--main-dark-color);
}
.ex-dropdown:focus-within button {
    outline: dashed var(--main-light-color);
}
/* each submenu only styles */
.ex-dropdown ul {
    /* hides */
    display: none;
    /* sets background color */
    background-color: var(--main-med-dark-color);
    /* sets min width */
    min-width: 150px;
}
/* sublist styles on main menu hover */
.ex-dropdown:hover ul, .ex-dropdown:focus-within ul {
    /* displays */
    display: block;
    position: absolute;
}
.ex-dropdown ul li:focus-within {
    outline: dashed var(--main-light-color);
}
/* sublist link styles */
.ex-dropdown a {
    /* displays */
    display: block;
    /* removes bullets */
    text-decoration: none;
    /* adds whitespace within */
    padding: 16px;
    /* text color */
    color: var(--main-light-color);
    /* sets text size */
    font-size: 16px;
}
/* sublist link styles on hover */
.ex-dropdown a:hover, .ex-dropdown a:focus {
    /* background color */
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}
/* end of dropdown menu */
/* end of menu styles */

/* widget styles */
/* search widget styles */
.search-container {
    /* centers content */
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.search-container form {
    display: inline;
}
.search-container input[type=text] {
    padding: .25em;
    margin-top: .5em;
    font-size: 1.1em;
    border: none;
}
.search-container button {
    font-size: 1em;
    padding: .4em .8em;
    margin-left: -.2em;
    border: none;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    cursor: pointer;
}
.search-container button:hover, .search-container button:focus {
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}
/* end of search widget styles */

/* site login widget styles */
#site-login {
    width: 300px;
    margin: auto;
    padding: 20px;
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
}
#site-login fieldset {
    padding: 24px;
    /* centers everything but input fields */
    text-align: center;
}
#site-login legend {
    text-transform: uppercase;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}
#site-login .field-group {
    margin-bottom: 16px;
}
#site-login .field-group label {
    width: 95%;
    display: block;
    font-size: 1.2em;
}
#site-login .field-group input {
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    padding: 5px;
}
#site-login button {
    border: 2px solid var(--main-med-light-color);;
    padding: 10px;
    background-color: var(--main-med-light-color);
    border: 2px solid var(--main-med-light-color);
    font-size: .9em;
    font-weight: bold;
}
#site-login button:hover, #site-login button:focus {    
    cursor: pointer;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    border: 2px solid var(--main-med-light-color);
}
#site-login .field-group input:focus, #site-login button:focus {
    outline: dashed var(--main-light-color);
}
/* end of site login widget styles */

/* social media widget styles */
#account-creation {
    width: 300px;
    margin: auto;
    padding: 20px;
    font-family: var(--body-font);
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color)
}
#account-creation fieldset {
    padding: 24px;
}
#account-creation legend {
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
#account-creation .field-group {
    margin-top: 16px;
    margin-bottom: 16px;
}
#account-creation .field-group label {
    display: block;
    margin: 8px auto;
}
#account-creation .field-group input {
    width: 95%;
    display: block;
    height: 20px;
}
#account-creation button {
    padding: 10px;
    background-color: var(--main-light-color);
    border: none;
    margin-right: .8em;
    font-size: .9em;
}
#account-creation button:hover, #account-creation button:focus {    
    cursor: pointer;
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
}
#account-creation .field-group input:focus, #account-creation button:focus {
    outline: dashed var(--main-dark-color);
}
/* end of social media widget styles */

/* newsletter signup widget styles */
#newsletter {
    max-width: 360px;
    margin: auto;
    padding: 10px;
    background-color: var(--main-med-light-color);
}
#newsletter fieldset {
    padding: 10px;
}
#newsletter legend {
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
}
#newsletter .field-group {
    margin: 10px;
}
#newsletter input[type=email] {
    padding: 5px;
}
#newsletter button {
    padding: 10px;
    margin-left: 10px;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    border: none;
}
#newsletter button:hover, #newsletter button:focus {
    background-color: var(--main-light-color);
    color: var(--main-dark-color);
    cursor: pointer;
}
#newsletter .field-group input:focus, #newsletter button:focus {
    outline: dashed var(--main-dark-color);
}
/* end of newsletter signup widget styles */

/* ad widget styles */
.ad-widget {
    max-width: 350px;
    margin: auto;
    background-color: var(--main-med-light-color);
}
.ad-widget > a {
    text-decoration: none;
    color: var(--main-dark-color);
}
.ad-widget-content {
    display: grid;
    grid-template-rows: auto auto auto 3rem;
    align-items: center;
}
.ad-img {
    grid-row: 1;
    text-align: center;
    margin-top: 25px;
}
.ad-img img {
    padding: 15px;
    background-color: var(--main-med-color);
}
.ad-name {
    grid-row: 2;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}
.ad-desc {
    grid-row: 3;
    text-align: center;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: .75em;
}
.ad-cta {
    grid-row: 4;
    width: 100%;
    padding: .5rem 0;
    text-transform: capitalize;
    letter-spacing: .1em;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    align-self: center;
    background-color: var(--main-med-color);
}
/* end of ad widget styles */
/* end of widget styles */

/* media pattern styles */
/* media example section */
/* code block styles */
figure.code-block {
background-color: var(--main-med-light-color);
border: solid thin var(--main-med-dark-color);
border-radius: .5rem;
width: 90%;
margin: auto;
padding: 1rem;
box-shadow: 5px 5px 10px var(--main-dark-color);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.code-block pre {
font-family: var(--code-font);
background-color: var(--main-light-color);
color: var(--main-med-light-color);
padding: .5rem;
overflow: auto;
border-radius: .5rem;
}
.code-block figcaption {
font-weight: bold;
padding-bottom: .5rem;
}
.html-tag {
color: var(--main-med-dark-color);
}
/* end of code block styles */

/* image with caption styles */
.media-img {
    background-color: var(--main-med-light-color);
    border: solid thin var(--main-med-dark-color);
    box-shadow: 5px 5px 10px var(--main-dark-color);
    border-radius: .5rem;
    width: 25rem;
    margin: auto;
    padding: 1rem;
}
.filter-image {
    width: 23rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.filter-image picture {
    grid-area: 1 / 1;
    overflow: hidden;
}
.filter-image figcaption {
    grid-area: 1 / 1;  /* With the figure caption and picture element placed in the same grid area, the caption will overlay the image. */
    background-color: hsla(0 0% 0% / .5);
    color: var(--main-light-color);
    padding: .5rem;
    height: max-content;  /* to ensure the caption will only take enough space to show the text an not the whole grid area */
    text-align: center;
    transform: rotateX(-90deg);
    transition-duration: 200ms;
    transition-property: all;
    transform-origin: top;
}
figure.filter-image:hover figcaption, figure.filter-image:focus figcaption {
    transform: rotateX(0deg);
}
.filter-image img {
    width: 100%;
    filter: blur(2px);  /* blur has to come first to match example */
    filter: saturate(30%);  /* saturate doesn't seem to work if blur isn't first */
}
.filter-image img:hover, .filter-image img:focus {
    filter: saturate(100%);
    transform: scale(1.15);
}
.filter-image {
    font-size: .85em;
    margin-top: .5rem;
}
/* end of image with caption styles */

/* audio/video content styles */
.transcript {
    margin-top: 1rem;
    padding: 1rem;
    text-transform: capitalize;
    color: var(--main-dark-color);
}
.transcript:hover, .transcript:focus {
    background-color: var(--main-med-light-color);
    color: var(--main-med-dark-color);
}
/* transcript page styles */
.transcript-content {
    margin: 2rem;
}
.transcript-content p {
    margin-top: 1rem;
}
/* end of transcript page styles */
/* end of audio/video content styles */

/* pictures widget styles */
.media-picture {
    background-color: var(--main-med-light-color);
    border: solid thin var(--main-med-dark-color);
    border-radius: .5rem;
    width: 50%;
    margin: auto;
    padding: 1rem;
    box-shadow: 5px 5px 10px var(--main-dark-color);
}
figure.image-caption {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}
.image-caption picture {
    grid-area: 1 / 1;
}
.image-caption figcaption {
    grid-area: 1 / 1;  /* With the figure caption and picture element placed in the same grid area, the caption will overlay the image. */
    background-color: hsla(0 0% 0% / .5);
    color: var(--main-light-color);
    padding: .5rem;
    height: max-content;  /* to ensure the caption will only take enough space to show the text an not the whole grid area */
    text-align: center;
    transform: rotateX(-90deg);
    transition-duration: 200ms;
    transition-property: all;
    transform-origin: top;
}
.image-caption:hover figcaption, .image-caption:focus-within figcaption {
    visibility: visible;
    transform: rotateX(0deg);
}
.image-caption img {
    width: 100%;
}
.image-caption, .image-source {
    font-size: .85em;
    margin-top: .25rem;

}
/* end of pictures widget styles */

/* iframe styles */
iframe {
    margin-left: .5em;
    /* shrinks for mobile */
    max-width: 100%;
}
iframe > pre {    
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* end of iframe styles */
/* media pattern styles end */

/* card pattern styles */
/* article card styles */
/* all cards */
.card-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 1rem;
}
  /* each card */
.article-card {
    border: thin solid var(--main-dark-color);
    border-radius: 0.25rem;
    width: 300px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--main-med-light-color);
    box-shadow: 2px 2px 6px var(--main-dark-color);
}
/* card title */
.article-title {
    font-size: 1.85rem;
    color: var(--main-med-dark-color);
    height: 150px;
    width: 100%;
    margin-top: .5rem;
    padding: 1rem;
}
/* author */
.author {
    margin: 0.5rem;
    font-style: italic;
}
/* portion of article */
.snippet {
    margin: 0.5rem;
    text-align: justify;
}
/* read more button */
.read-more {
    width: 10rem;
    align-self: center;
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
    border: none;
    padding: 0.5rem;
}
/* read more button on hover */
.read-more:hover, .read-more:focus {
    background-color: var(--main-med-dark-color);
}
/* read more button on focus */
.read-more:focus {
    outline: dashed 3px var(--main-med-dark-color);
}
/* article card styles end */

/* product card styles */
.product-card {
    width: 240px;
    height: 450px;
    display: grid;
    grid-template-rows: 240px auto auto auto 3em;
    row-gap: .5em;
    background-color: var(--main-med-light-color);
    box-shadow: 3px 3px 8px var(--main-dark-color);
}
.product-img {
    grid-row: 1;
}
.product-title {
    grid-row: 2;
    font-size: 1.3em;
    text-align: center;
}
.product-price {
    grid-row: 3;
    font-size: 1.2em;
    text-align: center;
    color: var(--main-med-dark-color);
}
.product-desc {
    grid-row: 4;
    text-align: center;
    padding-left: .5em;
    padding-right: .5em;
}
button.cart {
    grid-row: 5;
    padding: .5em;
    border: none;
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
    font-size: 1.3em;
    font-weight: bold;
}
button.cart:hover, button.cart:focus {
    background-color: var(--main-med-dark-color);    
}
button.cart:focus {
    outline: dashed var(--main-dark-color);
}
/* product card styles end */

/* profile card styles */
/* each profile card */
.profile-card {
    width: 250px;
    display: grid;
    grid-template-rows: 250px 2em auto .5em 3em;
    row-gap: 1em;
    background-color: var(--main-med-light-color);
    box-shadow: 2px 2px 8px var(--main-med-dark-color);
}
.profile-img {
    grid-row: 1;
}
.profile-name {
    grid-row: 2;
    font-size: 1.3em;
    text-align: center;
}
.profile-desc {
    grid-row: 3;
    text-align: center;
    align-self: center;
    padding: .5em 1em;
    background-color: var(--main-med-color);
    color: var(--main-dark-color);
}
.profile-co {
    grid-row: 4;
    font-size: .8em;
    font-style: italic;
    text-align: center;
    align-self: center;
    padding-left: .5em;
    padding-right: .5em;    
}
button.adopt {
    grid-row: 5;
    border: none;
    font-size: 1.2em;
    background-color: var(--main-med-dark-color);
    color: var(--main-light-color);
    font-weight: bold;
}
button.adopt:hover, button.adopt:focus {
    background-color: var(--main-dark-color);
}
button.adopt:focus {
    outline: dashed var(--main-dark-color);
}
/* profile card styles end */
/* card pattern styles end */
/* end of pattern/component card styles */