:root{--margin-xxs:.25rem;--margin-xs:.5rem;--margin-s:.75rem;--margin-m:1rem;--margin-l:1.25rem;--margin-xl:1.75rem;--margin-xxl:2.5rem;--colour-main:#161616;--colour-header:#fff;--colour-text:#999;--colour-text-link:#fff;--colour-detail:#424242;--colour-depth:#000;--colour-link:#9c83ff;--colour-gold:#dbb42c;--colour-gold-shine:#ffe169;--gradient-1:#fff759;--gradient-2:#e151ff;--gradient-3:#9c83ff;--gradient-4:#714dff}@font-face{font-family:montserrat;font-style:normal;font-weight:400;src:local('Montserrat'),local('Montserrat-Regular'),url(/fonts/Montserrat-Regular.woff2)format('woff2'),url(/fonts/Montserrat-Regular.woff)format('woff')}body{min-height:100%;display:flex;flex-direction:column;justify-content:center;flex-grow:1;color:var(--colour-text);background-image:url(/noise.png);background-color:var(--colour-main);font-family:montserrat,sans-serif;main { width: 80%; margin-left: auto; margin-right: auto; } h1 { color: var(--colour-header); } footer { border-top: 1px solid var(--colour-detail); margin-top: var(--margin-m); } a { color: var(--colour-text-link); text-decoration: none; } .button { background-color: var(--colour-depth); font-family: "Monserrat", sans-serif; text-transform: uppercase; width: min-content; >* { --button-color: var(--colour-main); display: inline-block; width: 8rem; padding: var(--margin-xs) var(--margin-s); background-color: var(--button-color); background-image: url("/noise.png"); box-shadow: inset 0 1px var(--colour-detail), inset 0 0 1px var(--colour-detail), inset 0 -1px var(--colour-depth), 0 0 0 1px color-mix(in srgb, var(--colour-depth), transparent 70%), 0 2px 2px color-mix(in srgb, var(--colour-depth), transparent 60%), 0 4px 4px color-mix(in srgb, var(--colour-depth), transparent 45%), 0 6px 6px color-mix(in srgb, var(--colour-depth), transparent 30%); text-align: center; white-space: nowrap; transition-property: transform, background-color, box-shadow; transition-duration: var(--animation-duration); transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1); span { color: var(--colour-gold); } } >*.active { pointer-events: none; cursor: default; } >*:focus, >*.active { transform: scale(0.99); box-shadow: inset 0 0 3px #000; filter: brightness(90%); } &:has(>*:focus), &:has(>*.active) { transition-property: box-shadow; transition-duration: var(--animation-duration); transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1); box-shadow: 0 1px var(--colour-detail); } &:hover >*>* { background-image: repeating-linear-gradient(350deg, var(--colour-gold) 0%, var(--colour-gold-shine) 43%, var(--colour-gold) 61%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } }}header{position:-webkit-sticky;position:sticky;top:-51px;margin-bottom:4rem;z-index:10;.newsbar a { padding: var(--margin-m); display: block; text-align: center; color: var(--colour-main); background-color: var(--colour-link); } .navigation { position: -webkit-sticky; position: sticky; font-family: "Montserrat", sans-serif; --animation-duration: .1s; ul { padding: 0; margin: 0; width: 100%; list-style: none; } &>* { background-image: url("/noise.png"); background-color: var(--colour-main); padding: var(--margin-s); border-bottom: 1px solid var(--colour-detail); } @keyframes spin { 100% { transform: rotateY(360deg); } } .search { display: flex; justify-content: center; min-width: 1em; height: 1em; line-height: 1; } .search-icon { cursor: pointer; width: 1em; height: 1em; margin: 0; vertical-align: bottom; } .search[data-running] .search-icon { animation: spin 1.5s linear infinite; } .search-input { border-width: 0; padding: 0; margin: 0; width: 0; outline: none; background: white; transition: width 0.5s; } .search-input:focus { margin-left: 0.5em; width: 10em; } .navbar ul { display: flex; justify-content: center; align-items: center; li:nth-of-type(1) { margin-right: auto; border-radius: 4px; a { border-radius: 3px; } } li:nth-of-type(2) { border-radius: 4px 0 0 4px; a { border-radius: 3px 0 0 3px; } } li:nth-of-type(6) { border-radius: 0 4px 4px 0; a { border-radius: 0 3px 3px 0; } } li:last-child { margin-left: auto; border-radius: 4px; a { width: auto; border-radius: 3px; } } } .sidebar { position: absolute; display: none; width: calc(100% - 1.5rem); justify-content: space-between; ul { width: fit-content; li { border-radius: 4px; a { border-radius: 3px; } } } &>* { flex: 1; display: flex; justify-content: center; } &>*:first-child > * { margin-right: auto; } &>*:last-child > * { margin-left: auto; } #sections { height: 34.4px; #sectionsList { display: none; position: fixed; left: 0; position: absolute; top: 0; display: none; margin-top: calc(34.4px + (2 * var(--margin-s))); width: 100vw; background-image: url("/noise.png"); background-color: var(--colour-main); padding: var(--margin-s); border-bottom: 1px solid var(--colour-detail); } &>.button a { width: auto; } li { border-radius: 4px; margin-bottom: var(--margin-s); } a { border-radius: 3px; text-align: left; } } #search { border-radius: 4px; a { width: auto; border-radius: 3px; } } } }}.search-result-list{background-color:var(--colour-main);width:33%;margin-left:auto;margin-right:0}@media(max-width:1000px){.sidebar{display:flex!important}.navbar{display:none}.item{width:calc(33% - 2 * var(--margin-s))!important}}@media(max-width:600px){.item{width:calc(50% - 2 * var(--margin-s))!important}}#hero{text-align:center;img { display: block; margin-left: auto; margin-right: auto; } span { display: inline-block; font-family: "Montserrat", sans-serif; color: var(--colour-header); font-size: 8rem; .emphasis { background-image: linear-gradient( 50deg, var(--gradient-1), var(--gradient-2) 40.28%, var(--gradient-3) 60.97%, var(--gradient-4) 80.64%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } }}#events .slider{width:100%;text-align:center;overflow-y:hidden;.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { width: 10px; height: 10px; } &::-webkit-scrollbar-thumb { background: black; border-radius: 10px; } &::-webkit-scrollbar-track { background: transparent; } &>.event-card { scroll-snap-align: start; flex-shrink: 0; height: 300px; } }}@media(max-width:800px){.event-card{width:100%}}@media(min-width:800px) and (max-width:1500px){.event-card{width:50%}}@media(min-width:1200px){.event-card{width:33%}}#info{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--margin-m);.about { flex: 65%; .flex-container { display: flex; gap: var(--margin-xs); --container-height: 15rem; height: var(--container-height); figure { height: var(--container-height); width: fit-content; flex: 1 1 0; img { height: inherit; } } div { flex: 3 1 auto; padding-bottom: var(--container-height) !important; } } } .reviews { flex: 30%; }}@media(max-width:800px){.about,.reviews{flex:100%}}.item-list{display:flex;flex-wrap:wrap;max-width:1500px;.item-card { width: calc(25% - 2 * var(--margin-s)); margin: var(--margin-s); position: relative; overflow: hidden; img { max-width:100%; max-height:100%; } .item-card-info { position: absolute; bottom: 0; width: calc(100% - 2 * var(--margin-xs)); padding: var(--margin-xs); padding-top: 200%; color: var(--colour-text-emphasis); .item-card-title { margin: 0; .item-card-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } } .item-card-subtitle { display: flex; align-items: center; justify-content: space-between; color: var(--colour-text-link); margin: -.5em 0; .item-card-favorite { visibility: hidden; color: var(--colour-text-link); font-size: 2em; border: none; background: none; position: relative; } } .item-card-tags { display: flex; padding: var(--margin-xxs) 0 0 0; margin: 0; list-style: none; gap: var(--margin-xxs); li { background-color: var(--colour-text-link); color: var(--colour-main); padding: 0 var(--margin-xxs); border-radius: var(--margin-xxs); } } } }}@media(any-pointer:coarse){}@media(any-pointer:fine){.item-list .item-card-info{display:none}.item-list .item-card:hover .item-card-info{display:block}}.single-item-display{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--margin-m);.single-item-display-gallery { flex: 40%; .flex-container { display: flex; gap: var(--margin-xs); --container-height: 15rem; height: var(--container-height); figure { height: var(--container-height); width: fit-content; flex: 1 1 0; img { height: inherit; } } div { flex: 3 1 auto; padding-bottom: var(--container-height) !important; } } } .single-item-display-info { flex: 40%; .relics { padding: 0; width: 100%; list-style: none; display: flex; align-items: center; li { padding: var(--margin-xxs); margin-right: var(--margin-m); text-transform: uppercase; } } }}@media(max-width:800px){.about,.reviews{flex:100%}}#myImg{border-radius:5px;cursor:pointer;transition:.3s}#myImg:hover{opacity:.7}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.9)}.modal-content{margin:auto;display:block;width:80%;max-width:700px}.modal-content,#caption{animation-name:zoom;animation-duration:.6s}@keyframes zoom{from{transform:scale(.1)}to{transform:scale(1)}}.close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.close:hover,.close:focus{color:#bbb;text-decoration:none;cursor:pointer}@media only screen and (max-width:700px){.modal-content{width:100%}}