/* LAST UPDATED: 6-25-2021 */

/* using SVG for external link icon, for any target="_blank" anchors - modified from https://codepen.io/fathy_ar/pen/WNvZjgK */
a[target="_blank"]::after {
    content: '';
    -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1536 1536' xmlns='http://www.w3.org/2000/svg'><path d='M1408 928v320c0 159-129 288-288 288H288c-159 0-288-129-288-288V416c0-159 129-288 288-288h704c18 0 32 14 32 32v64c0 18-14 32-32 32H288c-88 0-160 72-160 160v832c0 88 72 160 160 160h832c88 0 160-72 160-160V928c0-18 14-32 32-32h64c18 0 32 14 32 32zm384-864v512c0 35-29 64-64 64-17 0-33-7-45-19l-176-176-652 652c-6 6-15 10-23 10s-17-4-23-10L695 983c-6-6-10-15-10-23s4-17 10-23l652-652-176-176c-12-12-19-28-19-45 0-35 29-64 64-64h512c35 0 64 29 64 64z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 1em 0.75em;
    -webkit-mask-position: center;
    mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1536 1536' xmlns='http://www.w3.org/2000/svg'><path d='M1408 928v320c0 159-129 288-288 288H288c-159 0-288-129-288-288V416c0-159 129-288 288-288h704c18 0 32 14 32 32v64c0 18-14 32-32 32H288c-88 0-160 72-160 160v832c0 88 72 160 160 160h832c88 0 160-72 160-160V928c0-18 14-32 32-32h64c18 0 32 14 32 32zm384-864v512c0 35-29 64-64 64-17 0-33-7-45-19l-176-176-652 652c-6 6-15 10-23 10s-17-4-23-10L695 983c-6-6-10-15-10-23s4-17 10-23l652-652-176-176c-12-12-19-28-19-45 0-35 29-64 64-64h512c35 0 64 29 64 64z'/></svg>");
    mask-repeat: no-repeat;
    mask-size: 1em 0.75em;
    mask-position: center;
    display: inline-block;
    background-color: currentcolor;
    position: relative;
    top: 0em;
    width: 1em;
    height: 1em;
    left: 0.1em; /* added this so icon is not totally against the link on display */
}
/* adding this so that the actual anchor and external link icon are never separated on different lines - revisit if this class is good for the mobile UX - horizontal scrollbars might show up for long links */
a.nowrap{
    white-space: nowrap;
}

/* *********** Styling for top image section of the scratchpads and directory *********** */

.bg-img {
    background: url(./abstract-background-abstract-oil-painting-abstract-painting-1629236.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-img-dev {
    background: url(./abstract-architectural-art-artistic-532563.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-img h1, .bg-img ul, .bg-img p {
    text-shadow: 2px 2px 15px #000;;
}

.bg-img-dev h1, .bg-img ul, .bg-img p {
    text-shadow: 2px 2px 15px #000;;
}

/* *********** STYLES USED FOR THE PATTERY LIBRARY COMPONENTS SCRATCHPAD PAGES *********** */

hr {
    border: 5px solid #008cd2;
    border-radius: 5px;
    margin: 30px 0;
}

hr.light {
    border: 1px solid #E9E9EA;
    border-radius: 5px;
    margin: 30px 0;
}

.horizontallyCentered {
    display: flex;
    justify-content: center;
}

/* *********** Removed to help with pattern library debugging *********** */

/*
.badge-small {
    font-size:10px;
    letter-spacing: .5px;
}
footer {
    border-top:1px solid #ccc;
}
footer p {
    margin-bottom:0;
}
.table-of-contents a {
    color:#fff;
}
span.highlight {
    background: #f1c40f;
}
.optionalText {
    font-style:italic;
    color:#767676;
    font-size:12px;
    padding-left: 2px;
}
form .required-asterisk {
    padding-left: 1px;
}
p.small {
    line-height: .5rem;
}*/