:root {
    --green: #002e2c;
    --white: #ffffff;
    --yellow: #f6d763;
    --orange: #ec9a29;
    --pink: #e94280;
}

/*GENERAL*/
html {
    background-color: var(--green);
    color: var(--green);
    font-family: 'Space Grotesk', sans-serif;
}

body {
    margin: 0;
}

h1 {
    margin-top: 1em;
    font-weight: 700;
}

h1.huge {
    font-size: 5em;
    margin-top: 0em;
    margin-bottom: 1.5em;
}

h1.huge a {
    border-bottom: none;
    font-weight: inherit;
    font-size: inherit;
}
h1.huge a:hover {
    color: var(--green);
    border-bottom: none;
}

h2 {
    font-size: 2em;
    font-weight: 700;
}

h3 {
    margin-top: 2em;
    font-weight: 700;
}
p {
    font-size: 1.1em;
    font-weight: 400;
}
em {font-size: 1em; }

ul, ol { padding-left: 1em; }
li { font-size: 1.1em; }
/*avoid font-size getting bigger when layering lists*/
ol li ul li,
ul li ul li,
ul li ol li,
ol li ol li { font-size: 1em; }

pre, code, .hljs {
    background-color: var(--yellow);
    background-color: #f3f3f3;
    color: var(--green);
}

.underline {
    text-decoration: underline;
}

table {
    font-size: 0.8em;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

/*links*/
a {
    font-size: inherit;
    color: var(--green);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px var(--green) solid;
    font-size: inherit;
    transition: color 0.1s;
}

a:hover {
    color: var(--pink);
    border-bottom: 2px var(--pink) solid;
}

.no-design,
.no-design:hover {
    text-decoration: none;
    border: none !important;
}

/*button*/
button {
    background-color: inherit;
    border: 2px solid var(--green);
    border-radius: 10px;
    padding: 0.5em;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

button:hover,
button:active { background-color: var(--green); }

button.pink:hover,
button.pink:active { color:  var(--pink); }
button.yellow:hover,
button.yellow:active { color:  var(--yellow); }
button.orange:hover,
button.orange:active { color:  var(--orange); }

/*artwork button*/
button#artwork {
    background-color: var(--yellow);
    color: black;
    border: none;
}
button#artwork:hover,
button#artwork:active {
    background-color: var(--pink);
}

a button#artwork {
    color: var(--pink);
    text-decoration: none;
    border-bottom: 2px solid var(--pink);
}
a button#artwork:hover,
a button#artwork:active {
    color: var(--yellow);
}

.caption {
    font-size: 0.9em;
    opacity: 0.8;
    z-index: 2;
    margin-bottom: 2em;
    margin-top: 0em;
}

/*LOADING COVER*/
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

/*CONTAINERS*/
.meta-container {
    position: relative;
    margin: 0em;
    display: flex;
    flex: column wrap;
    justify-content: center;
    padding: 0em;
}

.meta-container.row {
    flex: row wrap;
}

main {
    min-height: 75vh;
}

main.yw,
.container.yw,
.meta-container.yw {
    background-color: var(--yellow);
    color: var(--green);
}
main.yw a,
.container.yw a,
.meta-container.yw a {
    color: var(--green);
    border-bottom: 2px solid var(--green);
}
main.yw a:hover,
.container.yw a:hover,
.meta-container.yw a:hover {
    color: var(--pink);
    border-bottom: 2px solid var(--pink);
}

main.or,
.container.or,
.meta-container.or {
    background-color: var(--orange);
    color: var(--green);
}
main.pk,
.container.pk,
.meta-container.pk {
    background-color: var(--pink);
}
main.pk a:hover,
.container.pk a:hover,
.meta-container.pk a:hover {
    color: var(--yellow);
    border-bottom: 2px solid var(--yellow);
}

.black-anyway { color: var(--green); }
.black-anyway a { 
    color: var(--green);
    border-bottom: 2px solid var(--green);
}
.pk.black-anyway a:hover,
.pk.black-anyway a:active {
    color: var(--white);
    border-bottom: 2px solid var(--white);
}

main.gr,
.container.gr,
.meta-container.gr {
    color: var(--white);
    background-color: var(--green);
}

main.wh,
.container.wh,
.meta-container.wh {
    color: var(--green);
    background-color: var(--white);
}

.container.container-round {
    border-radius: 50px;
    padding: 1.5em 2em;
    max-width: 50vw;
    margin: 0.5em;
}

.container.container-straight {
    padding: 1.5em 2em;
    margin: 0em;
}

.container.align-left { text-align: left; }
.container.align-center { text-align: center; }

.container.width50 { width: 50%; }
.container.width100 { width: 100%; }

/*about*/
.empty { height: 5em; }

#rss {
    color: var(--pink);
    padding: 1em;
}

/*HOME*/
#home,
#home img {
    width: 4em;
    margin: 1.75em 0.4em;
    border-bottom: none;
    cursor: pointer;
}
#home img:hover,
#home:hover {
    animation: shortwiggle 2s infinite;
    border-bottom: none;
}

@keyframes longwiggle {
    0% { transform: rotate(0deg); }
   25% { transform: rotate(5deg); }
   75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes shortwiggle {
    0% { transform: rotate(0deg); }
   10% { transform: rotate(5deg); }
   20% { transform: rotate(-5deg); }
   30% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/*Invisible arrow*/
#invisible {
    visibility: hidden;
}

/*INDIVIDUAL ARTWORKS*/
/*like article paragraphs*/
.paragraph {
    padding: 0em 10em;
    text-align: justify;
    text-justify: inter-word;
    padding: 2em 10em;
    margin: 2em auto;
    border-radius: 50px;
    max-width: 45em;
}
.paragraph.paragraph-pink {
    background-color: var(--pink);
}
.paragraph h2 {
    text-align: left;
}

.bio {
    text-align: justify;
    text-justify: inter-word;
}
.artwork-images img {
    width: 100%;
    margin-bottom: 1em;
}

.copyable-patch-image {
    position: relative;
}
.copyable-patch-image button {
    position: absolute;
    bottom: 1.3em;
    left: 1em;
}

/*MODAL*/
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    display: none;
    z-index: 10;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--black);
    padding: 1em 1.5em;
    width: 80%;
    border-radius: 1em;
}

.modal-content > iframe {
    width: 100%;
    height: 40em;
}

.close-button {
    float: right;
    width: 2.2em;
    line-height: 2.2em;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25em;
    background-color: var(--soft-white);
}

.close-button:hover,
.close-button:active {
    background-color: var(--black);
    color: var(--soft-white);
    box-shadow: 1px 1px var(--orange);
}

/*WAVES*/
/*wave1*/
.custom-shape-divider-top {
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top svg {
    position: relative;
    display: block;
    width: calc(114% + 1.3px);
    height: 30px;
}

/*wave2*/
.custom-shape-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(116% + 1.3px);
    height: 30px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom.yellow .shape-fill,
.custom-shape-divider-top.yellow .shape-fill { fill: var(--yellow); }
.custom-shape-divider-bottom.pink .shape-fill,
.custom-shape-divider-top.pink .shape-fill { fill: var(--pink); }
.custom-shape-divider-bottom.green .shape-fill,
.custom-shape-divider-top.green .shape-fill { fill: var(--green); }
.custom-shape-divider-bottom.orange .shape-fill,
.custom-shape-divider-top.orange .shape-fill { fill: var(--orange); }

.custom-shape-divider-top.width100 { width: 100%; }
.custom-shape-divider-top.width50 { width: 50%; }
.custom-shape-divider-top.left0 { left: 0; }
.custom-shape-divider-top.left50 { left: 50%; }
.custom-shape-divider-top.reverse { transform: scale(-1, 1); }

.non-media-wave { display: block; }
.media-wave { display: block; }