:root{
    --top-ticker-colour: #1A1A1A;
    --bottom-ticker-colour: #FF8D50;
    --font-colour: #1A1A1A;
    --ticker-height: 10vh;
    --single-art-ticker-height: 8vh;
    --background-colour: #DFBB9E;
}

@font-face {
    font-family: 'Romana BT';
    src: url('fonts/Romana-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Romana BT';
    src: url('fonts/Romana-Bold.otf') format('opentype');
    font-weight: bold;
    font-style:normal;
}

/* MAIN STYLING */
html{height: 100%;}
html, body{
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: none;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25' height='25' viewBox='0 0 30 30' %3E%3Cpath style='stroke:none;fill:%231a1a1a;' d='M 9 3 C 8.449219 3 8 3.449219 8 4 L 8 21 C 8 21.550781 8.449219 22 9 22 C 9.3125 22 9.609375 21.851562 9.796875 21.601562 L 12.921875 18.117188 L 16.382812 26.117188 C 16.703125 26.855469 17.566406 27.1875 18.296875 26.855469 C 19.019531 26.527344 19.339844 25.679688 19.015625 24.953125 L 15.4375 17.039062 L 21 17 C 21.550781 17 22 16.550781 22 16 C 22 15.699219 21.863281 15.414062 21.628906 15.222656 L 9.78125 3.378906 C 9.59375 3.140625 9.304688 3 9 3 Z M 9 3'/%3E%3C/svg%3E") 10 10, auto;
}
body {
    font-size: 18px;
    font-family: "Romana BT", serif;
    background-color: var(--background-colour);
}
html::-webkit-scrollbar { display: none;}
body>*::-webkit-scrollbar { display: none;}
body { margin: 0;}
body>* { margin: 0; scrollbar-width: none;}
*,
*:before,
*:after {
    box-sizing: inherit;
}
h1{text-transform: uppercase;}
h3{text-align: center; font-style: italic;  font-weight: 500; padding: 0 10%;}
a {
    color: inherit;
    text-decoration: none;
}
.content ol, .content ul:not(.author) {
    list-style-type: none;
    font-size: 0.8em;
    font-style: italic;
    border-top: 2px solid var(--font-colour);
    padding: 20px;
    margin-top: 10vh;
}
.content li { margin: 15px 0;}
a:hover{cursor: url("data:image/svg+xml;utf8,%3Csvg fill='%23FF8D50' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25' height='25' viewBox='0 0 30 30' %3E%3Cpath d='M 11 2 C 9.895 2 9 2.895 9 4 L 9 12 L 9 13 L 9 19.5 C 6.448 18.201 5.289 18 4 18 C 2.503911 18 1.0097445 18.577311 1.0019531 20.486328 L 5.5 22.5 L 8.65625 25.65625 C 10.15625 27.15625 12.192453 28 14.314453 28 L 21 28 C 23.209 28 25 26.209 25 24 L 25 14 A 2 2 0 0 0 23 12 A 2 2 0 0 0 21.193359 13.148438 C 21.066812 13.062233 21 13 21 13 A 2 2 0 0 0 19 11 A 2 2 0 0 0 17 13 L 17 12 C 17 10.895 16.105 10 15 10 C 13.895 10 13 10.895 13 12 L 13 4 C 13 2.895 12.105 2 11 2 z M 1.0019531 20.486328 L 1 20.486328 L 1 20.5 C 1 20.494991 1.0019328 20.491319 1.0019531 20.486328 z'/%3E%3C/svg%3E") 10 10, pointer;}
.content a{ text-shadow: 0 0 17px var(--font-colour); font-style: italic;}
.content a:hover{animation: pulsate 2s linear infinite;}
/* .content ul {
    list-style: none;
    text-align: right;
    font-size: 0.8em;
    font-style: italic;
} */
/* MAIN FRAMEWORK */
.light-circle{display: none;}
.gradient{
    position: fixed;
    display: flex;
    width: 100vw;
    height: var(--ticker-height);
    padding: 15px;
    z-index: 2;
}
.gradient.special-issue{height: var(--single-art-ticker-height);}
.gradient * { margin: 0;}
.gradient.top{
    top: 0; 
    justify-content: flex-end;
    background: linear-gradient(180deg, var(--top-ticker-colour) 40%, transparent);
}
.gradient.top.home{
    justify-content: flex-start;
    flex-direction: column;
    align-items: end;
    gap: 15px;
}

.issue-button{text-shadow: 0 0 20px #ff0000;}
.issue-button:hover{ animation: none !important;}
.issue-button h1{
    transition: all 0.7s;
    font-family: 'Main Font';
    line-height: 0.7;
    text-shadow: 0 0 17px;
}
.issue-button h1:hover{text-shadow: none;}
.special-issue-button{padding: 20px;border-radius: 50%; transition: all 0.3s;}
.special-issue-button p {text-align: center;}
.special-issue-button h1{font-family: 'Special Font'; text-transform: none;}
.gradient.bottom{bottom: 0; 
    background: linear-gradient(0deg, var(--bottom-ticker-colour) 40%, transparent);
    align-items: flex-end;
    justify-content: space-between;
}
.gradient.bottom.home{height: calc(var(--ticker-height) * 2);}
.logo h1 {
    font-weight: initial;
    font-size: 2.7em;
    text-shadow: 0 0 6px var(--font-colour);
}
.logo a{ transition: all 0.7s;}
.logo a:hover{color: var(--background-colour); }
.logo p {margin-left: 10px;}

.menu { 
    text-align: right;
    list-style: none;
    color: var(--background-colour);
    font-size: 1.2em;
}
.menu li {text-shadow: 0 0 15px var(--bottom-ticker-colour);}
.menu li a:hover {
    color: var(--font-colour);
    text-shadow: 0 0 17px var(--font-colour);
}
.menu li a { transition: all 0.7s;}
.menu .active {color: var(--font-colour); pointer-events: none;}
.main-container {
    display: flex;
    justify-content: center;
    position: relative;
}

.content {
    width: 60vw;
    padding: calc(var(--ticker-height) * 2) 0;
    line-height: 1.4;
}

.content figure {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    position: relative;
    flex-direction: column;
    margin: 4%;
    filter: grayscale(100%);
    transition: filter 0.7s;
}
.block.block-type-video figure{
    padding: 62.5% 0 0 0;
    position: relative;
}

.block.block-type-video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.content figure:hover{ filter: none;}
.content img, .content video, .content iframe {
    max-width: 100%;
    max-height: 55vh;
    /* z-index: -1;
    position: relative; */
    padding: 15px;
    border: 3px solid var(--bottom-ticker-colour);
    box-shadow: 0 0 15px var(--bottom-ticker-colour);
}
figcaption{
    text-align: right;
    font-style: italic;
    font-size: 0.8em;
}

/* SPECIAL ISSUES */
#p5-sketch {
    position: fixed;
    top: 0;
    filter: blur(3px);
}
.content .grid {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
}
.content.special-issue {width: 70vw;}
.content .grid:first-of-type {margin-top: var(--single-art-ticker-height);}
.column {flex-grow: 1;}
.column.span_12 { width: 100%;}
.column.span_6 { width: calc(100% / 2);}
.column.span_3 { width: calc(100% / 4);}
.column.span_4 { width: calc(100% / 3);}
.column.span_8 { width: calc((100% / 3) * 2);}
.column p {margin: 15px; min-height: 15px;}
.block.block-type-text {font-size: 1.5rem;}
.content.content.issue-article.special-bkg .block.block-type-text {text-shadow: 0 0 15px var(--font-colour), 0 0 15px var(--font-colour);}

.content.issue-article h1 {font-family: 'Main Font', sans-serif; margin: 0; font-size: 2.2rem;}
.content.issue-article h2 {
    font-family: 'Main Font', sans-serif;
    text-transform: uppercase;
    font-size: 1.5rem;
}
.content.issue-article h3{margin-bottom: 0; font-style: oblique; font-size: 1.5rem;}
.content.issue-article h4{ margin: 0; text-align: right; font-style: italic;}
.content figure img, .content figure video { 
    max-height: fit-content;
}
.content figure.portrait img, .content figure.portrait video{max-width: 50%; margin-left: 25%;}
.content figure.landscape img, .content figure.landscape video{max-width: 80%; margin-left: 10%;}
.content.issue-article.special-bkg a {
    text-shadow: 0 0 17px var(--background-colour);
    text-shadow: 6px 6px 3px var(--background-colour), -6px -6px 3px var(--background-colour);
    color: var(--font-colour);
    transition: text-shadow 0.5s;
}

.content.issue-article.special-bkg a:hover {
    animation: none;
    text-shadow: 0px 0px 3px var(--background-colour), -0px -0px 3px var(--background-colour);
}
.content.project-page figure video{max-height: 50vh;}

@keyframes pulsate {
    0%   { text-shadow: 0 0 0 var(--font-colour); }
    50%  { text-shadow: 0 0 17px var(--font-colour); }
    100% { text-shadow: 0 0 0 var(--font-colour); }
}
@-webkit-keyframes pulsate {
    0%   { text-shadow: 0 0 0 var(--font-colour); }
    50%  { text-shadow: 0 0 17px var(--font-colour); }
    100% { text-shadow: 0 0 0 var(--font-colour); }
}

/* mobiles */
@media screen and (max-width: 805px) {
    .content{width: 85vw;}
    .gradient.top{justify-content: center;}
    .gradient.bottom.home {height: calc(var(--ticker-height) * 3);}
    .content .grid{flex-wrap: wrap;}
    .content.special-issue{width: 84vw;}
    .content.special-issue figure img{height: auto;}
    .content figure.landscape img, .content figure.landscape video {max-width: 100%; margin-left: 0%;}
    .content figure.portrait img, .content figure.portrait video {max-width: 70%; margin-left: 15%;}
    .column.span_12, .column.span_6, .column.span_3, .column.span_4, .column.span_8 { width:100%;}
    .block.block-type-text {font-size: 1.2rem;}
    .content figure img, .content figure video{height: auto;}
    .logo h1{line-height: 0.8;}
    .logo p {
        margin-left: 0px;
        font-size: 0.7em;
    }
}