:root {
    /* --theme-color-1: #AEC6CF; */
    --theme-color-1: hsl(170, 58%, 54%);
    --theme-color-1-transparent: hsl(170, 58%, 54%,0.5);
    --theme-color-2: rgb(255, 255, 255);
    --theme-color-3: #333;
    --theme-color-4: #ff0000;
    --dynamic-a-tag: #00ff00
}

/* Rubik-Regular.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Rubik-Italic.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* Rubik-Black.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* Rubik-BlackItalic.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* Rubik-Bold.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Rubik-BoldItalic.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* Rubik-Light.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Rubik-LightItalic.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Rubik-Medium.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Rubik-MediumItalic.ttf */
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik/Rubik-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

* {
    margin: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

body,
html {
    font-family: sans-serif;
    overflow-x: hidden;
}

h1 {
    font-size: 25px;
}

h2 {
    font-size: 21px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

nav ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold
}

del {
    text-decoration: line-through
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input,
select {
    vertical-align: middle
}

body {
    background-color: var(--theme-color-2);
    /* transition: all 1s; */
}

html {
    background-color: var(--theme-color-1);
}

.arrow {
    display: inline;
    /* font-size:0; */
}

.ascii-art-container {
    display: flex;
    /* justify-content: center; */
    /* align-items: left; */
    /* align-items: center; */
    /* justify-content: space-around; */
    /* background-color: var(--theme-color-1); */
    padding-bottom: 40px;
    border-radius: 10px;
    /* border: 1px var(--theme-color-3) solid; */
    gap: 10px;
}

.ascii-art {
    /* background-color: red; */
    /* width:300px; */
    line-height: 1.25;
    /* background-color:red; */
    display: inline;
    /* text-align:center; */
    font-family: monospace;
    /* white-space: pre-wrap; */
    /* color:var(--theme-color-2); */
    min-width: 200px;
    margin: auto;

}

.ascii-art-container div {
    /* margin-left:10px; */
}

.under-construction {
    cursor: progress;

}

header {
    /* transition: all 0.5s linear; */
    transition-property: padding-right,transform;
    transition-duration: 0.5s;
    background: var(--theme-color-1);
    padding-top: 20px;
    padding: 20px 30px;
    /* max-width: 940px; */
    min-width: 700px;
    margin: auto;
    color: var(--theme-color-2);
}

.header-content {
    width: 940px;
    margin: auto;
}

main a:visited {
    color: blue;
}

#logo {
    display: inline;
    /* width:100%; */
}

.subtitle {
    display: inline-block;
    font-size: 100%;
    width: 1000px;
    pointer-events: none;
}

nav {
    margin-left: -35px;
    display: block;
    /* border-bottom: 1px var(--theme-color-2) solid; */
    /* width: 1010px; */
    width: 100%;
}

nav ul {
    margin-left: 35px;
}

nav ul li a {
    background: transparent;
    padding: 2px 10px;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    color: var(--theme-color-2);
    /* border-radius: 0px 0px 2px 2px; */
    /* border-radius:2px; */
    transition: all 0.1s linear;
    border-top: 1px var(--theme-color-2) solid;
    border-left: 1px var(--theme-color-2) solid;
    border-right: 1px var(--theme-color-2) solid;
    border-bottom: 1px var(--theme-color-2) transparent;

}

nav ul li a:hover {
    background: var(--theme-color-2);
    color: var(--theme-color-1);
    border-top: 1px var(--theme-color-2) solid;
    border-left: 1px var(--theme-color-2) solid;
    border-right: 1px var(--theme-color-2) solid;
    border-bottom: 1px var(--theme-color-2) solid;
}

.this-page {
    background: var(--theme-color-1);
    border-bottom: 2px var(--theme-color-1) solid;
    color: var(--theme-color-2);
    /* margin-bottom:1px; */
    /* position:relative; */
    /* z-index: 10; */
}
/* .this-page:hover {
    background: var(--theme-color-2);
    color: var(--theme-color-1);
    border-top: 1px var(--theme-color-2) solid;
    border-left: 1px var(--theme-color-1) solid;
    border-right: 1px var(--theme-color-1) solid;
    border-bottom: 10px var(--theme-color-1) solid;
} */

nav ul li {
    display: inline-block;
    /* margin: 10px; */
    margin-left: 0px;
    margin-right: 20px;
    margin-bottom: 1px;
}

nav ul {
    margin-top: 10px;
    list-style: none;
}


.white-line {
    /* width:100%; */
    border-bottom: 1px var(--theme-color-2) solid;
    margin-left: -500px;
    /* z-index: -1px; */
    margin-top: 1px;
    width: 300%;
}

.white-line-vert {
    background-color: black;
    /* width:100%; */
    /* border-right: 1px var(--theme-color-2) solid; */
    /* border-left: 1px var(--theme-color-2) solid; */
    /* z-index: -1; */
    /* margin-top: 1px; */
    /* width: 1000px; */
    position: relative;
    /* float: right; */
    /* height:1000px; */
    top: 0px;
    /* width:100%; */
    height:100%;
    width:1000px;
    position:absolute;
    top:0px;
}

.vert-container {
    width:100px;
    height:100px;
    float:right;
    /* text-align: right; */
    position:relative;
}

.nopad {
    padding: 0px;
}

#pageContent {
    max-width: 1000px;
    margin: auto;
    border: none;
    font-family: rubik, sans-serif;
    font-weight: 300;
}

#pageContent * {
    /* background:var(--theme-color-4); */
}

main {
    padding-top: 30px;
    /* white-space: nowrap; */
    /* overflow-x: scroll; */
}

.cont {
    width: 60%;
    float: left;
    min-height: 700px;
    /* margin:auto;  */
    /* padding-left:5%; */
}

.cont-team {
    width: 40%;
    float: left;
    min-height: 700px;
}

.cont-exhibits {
    width: 100%;
    float: left;
    min-height: 700px;
}

.dark-mode {
    filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
}

/* .dark-mode .invertable {
    filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%); 
} */

#toggle-dark-mode {
    /* margin-right:20px; */
}

.cont-exhibits>article {
    /* float:left; */
    /* width:60%; */
}

article ul li {
    /* padding-top:5px; */
}

aside {
    float: right;
    width: 35%;
}

article {
    border-bottom: 2px dotted #999;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

article h2 {
    font-weight: normal;
    margin-bottom: 12px;
}

.sidebar-img {
    /* transition: all 0.4s ease-in-out; */
    margin: 20px auto;
    background: var(--theme-color-1);
    height: 180px;
    /* font-size:0px; */
    padding-bottom: 20px;
    transition: padding 0.1s linear;
}

.sidebar-img:hover {
    /* font-size:16px; */
    padding-right: 20px;
}

.sidebar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-img div {
    position: relative;
    top: -3px;
    color: black;
    color:var(--theme-color-2)

}

.contact-copy-msg {
    color: var(--theme-color-2) !important;
}

aside a,
aside a:visited {
    /* display: inline-block; */
    text-decoration: none;
    color: var(--theme-color-3);
}

.artist-profile .arrowM {
    font-family: monospace;
    display: inline;
}

.artist-profile a,
.artist-profile a:visited {
    text-decoration: underline;
    color: var(--dynamic-a-tag);
    color: #f0f;
    background-color: #fff;
    padding:1px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius:5px;
    transition:background-color 0.2s linear;
}
.artist-profile a:hover{
    background-color:#0f0;
}

.artist-img {
    position: relative;
    text-align: center;
    vertical-align: bottom;
    border-radius: 10px;
    background: var(--theme-color-1);
    height: 300px;
    /* Set the height of the parent div */
    width: 400px;
}

.artist-img img {
    transition: height 0.5s ease;
    position: relative;
    top: 3px;
    border-radius: 10px;
    /* border-radius: 20px; */
    height: 98%;
    width: 99%;
    /* height: 100%;
    width: 100%;  */
    /* border-radius:0px; */
    /* margin:10px; */
    object-fit: cover;
}

.artist-profile:hover img {
    height: 80%;
}

.artist-img p {
    text-align: left;
    margin-left:2px;
    color: var(--theme-color-2);
    padding-left: 5px;
    position: absolute;
    top: 255px;
    /* background-color:#000; */
    padding:1px;
    border-radius:5px;
}

.artist-profile>h3 {
    /* pointer-events: none; */
    position: relative;
    top: 250px;
    font-size: 30px;
    font-weight: 400;
    /* font-family: monospace; */
    z-index: 2;
    color: var(--theme-color-2);
    background-color: var(--theme-color-1);
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
    /* color:white; */
}

.team-aside {
    width: 40%;
}

.projects div img{
    width:100%;
}

.project-link
{
    border-radius: 20px;
    padding:20px;
    background-color: white;
    border:10px solid;
    border-color: var(--theme-color-1);
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, var(--theme-color-1) 100%); */
    background-color: white;
    /* background-color: lightblue; */
    /* color:blavk; */
    max-width: 800px;
    /* width:400px; */
    /* width:50vw; */
    margin:auto;
    margin-bottom:40px;
    /* margin-top:40px; */
    animation: spingrad 1s linear infinite;
    transition:background-color 1s ease;
    transition:color 1.5 ease;
    color: #000;
    font-size:14px;
}
.project-link:hover{
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 90%, var(--theme-color-1) 100%); */
    background-color:var(--theme-color-1);
    color: #fff;
}
.project-link h2 {
    font-size:24px;
    display:inline-block;
    margin-bottom:5px;
    text-decoration: underline;
    color: var(--dynamic-a-tag);
    color: #000;
    background-color: #ffffff;
    padding:1px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius:5px;
    transition:background-color 0.2s linear;
}

.projects a,
.projects a:visited {
    text-decoration: none;
}

.project-link img {
    text-align: center;
    width: 100%;
    border-radius: 20px;
    /* padding:20px; */
    /* float:center; */
    /* max-height: 500px; */
}

.iframe-container {
    border-radius: 20px;
    position: relative;
    background-color: var(--theme-color-1);
    width: 100%;
    /* min-width: 500px; */
    padding-top: 56.25%; 
    padding-top:60%;
    transform: scale(100vw);
  }
  
  /* Center and scale the iframe */
  .responsive-iframe {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    width: 150%; /* Original width */
    height: 150%; /* Original height */
    transform: scale(0.75) translate(-50%, -50%); /* Scale down and center */
    transform-origin: 0 0; /* Start scaling from the top left */
    border: none; /* Optional */
  }
  @media (max-width: 1000px) {
    .responsive-iframe {
      transform: scale(0.65) translate(-50%, -50%); /* Adjust scale for smaller screens */
    }
  }

.exhibit-img-div {
    /* width:500px;
    margin:auto;
    display: inline-block;
    object-fit: cover;
    object-position: 50%;
    width: 300px;
    height: 600px;
    width:100%; */
}

.denizen-banner{
    
}

.denizen-banner img {
    width: 20%;
    height:20%;
    /* display: inline; */
    /* transform: scale(0.4); */
    /* margin: auto; */
    border-radius: 20px;
}

.denizen-banner{
    display: flex;
    justify-content: space-around;
    vertical-align: baseline;
    flex-wrap:nowrap;
    /* padding-left:0.75vw; */
    /* margin:auto; */
    width: 100%;
    /* background:blue; */
    margin-bottom:5px;
}

.exhibit-img-div-banner{
    display: flex;
    justify-content: space-around;
    vertical-align: baseline;
    flex-wrap:nowrap;
    /* padding-left:0.75vw; */
    /* margin:auto; */
    width: 100%;
    /* background:blue; */

}

.exhibit-img-div-banner img {
    width: 100%;
    display: inline;
    transform: scale(1.4);
    margin: auto;
}


.exhibit-img-div-banner div{
    vertical-align:bottom;
    overflow: hidden;
    /* padding:10px; */
    display: inline-block;
    /* max-width:300px; */
    border-radius: 10px;
    width: 24%;
    /* background: blue; */
    margin-bottom: 20px;
    transition: all 0.4s ease-in-out;
    /* z-index:1; */
    display: inline;
    /* z-index: 5; */
    height:100%;
}

.img-enlarged {
    transform: scale(6);
    position: fixed;
    /* top: 50%; */
    /* left: 50%; */
    transform: translate(-50%, -50%) scale(6);
    /* z-index: 1000; Adjust the z-index as needed */
}

@keyframes overlay-bg {
    0% {
        background-size: 1% 1%;
        /* background-position:50%,0%; */
    }
    50% {
        /* background-size: 15% 15%; */
        /* background-position:50%; */
    }
    100% {
        background-size: 1% 1%;
        background-position:50%,0%;
    }
}

.overlay {
    background-position:center;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    --color-one: var(--theme-color-1);
    /* --color-two: hsl(0, 0%, 0%, 0); */
    --color-two: hsla(0, 0%, 0%, 0);
    background: radial-gradient(circle at center, 
        var(--color-one) 0%, 
        var(--color-one) 20%, 
        var(--color-two) 20%, 
        var(--color-two) 100%
    );
    animation: overlay-bg 60s infinite linear; /* Adjust animation duration as needed */
}


.overlay img {
    max-width: 80%;
    max-height: 80%;
    border: 2px solid white; /* Optional border */
    border-radius: 20px; /* Optional border-radius */
    background-color: rgb(237, 246, 255);
}


.exhibit-img-div-banner div.expanded{
    z-index: 10;
    /* transform: scale(2); */
    width: 100%;
    /* margin-bottom:20px; */
}
.exhibit-img-div-banner div.shrink{
    /* margin-top:15%; */
    z-index: 5;
    /* transform: scale(2); */
    width: 20%;
    /* margin-bottom:20px; */
    height:100%;
}
.exhibit-img-div-banner div.shrink img{
    height:100%;
}


.exhibit-img-div img {
    max-width: 100%;
    /* max-width:100px; */
    /* max-height:700px; */
    margin: auto;
    display: block;
    background: var(--theme-color-1);
    /* padding:30px; */
    border-radius: 10px;
    /* margin-top:50px; */
}


.exhibit-title {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 100px;
    font-size: 6vw;
    font-size: 100px;
    /* text-align: center; */
}

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

/* * {-webkit-font-smoothing: antialiased;} */
.services-titles {
    font-weight: 500;
    /* font-weight: 400; */
    display: inline;
    /* font-size:18px;
    padding-top:2px; */
}

.services {
    padding-left: 20px;
    list-style-position: outside;
    margin-top: 0.5em;
    list-style: none;
    /* width: 90%; */
    /* text-indent: -40px; */
    margin-left: 0px;
}

.services li {
    list-style-type: disc;
    /* list-style-type: none; */
    padding-left: none;
    margin-top: 4px;
}

.services li:before {
    /* content: '\2022 '; */
    color: red;
    padding-right: 0.5em;
    /* font-size:20px; */
}

#logo {
    display: block;
    /* vertical-align: middle; */
    font-size: 30px;
    /* margin-right: 75px; */
    color: var(--theme-color-2);
    /* text-align: center; */
}

#logo img {
    width: 500px;
    /* height: 54.2667px; */
    /* width:100%; */
    vertical-align: middle;
    margin-right: 10px;
}

body>section {
    max-width: 1000px;
    margin: auto;
    /* padding: 30px 0px; */
    /* margin-top:30px; */
    border-bottom: 1px solid #999;
    color: var(--theme-color-3);
    /* font-size:1vh; */
}


footer {
    background: var(--theme-color-1);
    /* max-width: 1000px; */
    margin: auto;
    clear: both;
    text-align: right;
    color: var(--theme-color-2);
    height: 100%;
    overflow-y: hidden;
}

.footer-content {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    padding-bottom: 10px;
}

footer p {
    /* padding: 20px;
    padding-bottom:5px;
    padding-top:5px; */
    padding: 0px;
    padding-bottom: 10px;
}

.footer-logo {
    /* text-align: left; */
    width:250px;
    float:left;
}

button {
    color: var(--theme-color-2);
    /* background: var(--theme-color); */
    border-radius: 100px;
    border: groove 2px black;
    margin-left: 10px;

}

button:active {
    border: inset 2px black;
}

footer a,
footer a:visited {
    color: var(--theme-color-4);
}

.negative{
    filter: invert(100%);
}
.animated-icon{
    margin-top:-100px;
    /* padding-right:5vw; */
    float:right;
    display: inline;
    /* height:20px; */
    overflow: hidden;
}

@keyframes email-pulse {
    0%{
        color:black;
    }
    25%{
        color:black;
    }
    50% {
        color:var(--theme-color-1);
    }
    75%{
        color:black;
    }
    100%{
        color:black;
    }
}
.email-animation{
    font-size:26px;
    font-weight:400;
    animation: email-pulse 2s infinite linear;
}

@keyframes move-bg {
    to {
        background-position: var(--bg-size) 0;
    }
}

.gradient-animation {
    --bg-size: 400%;
    --color-one: hsl(0, 0%, 100%);
    --color-two: hsl(0, 0%, 0%);
    background: linear-gradient(90deg,
            var(--color-one),
            var(--color-one),
            var(--color-one),
            var(--color-two),
            var(--color-two),
            var(--color-one)) 0 0 / var(--bg-size) 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg 9s infinite linear;
    padding-right: 1px;
}

.gradient-animation-bg {
    width: 100px;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hytPlayerWrap {
    position:relative!important;
    padding-bottom:56.25%;
    /* padding-top:30px; */
    height:0;
    overflow:hidden;
    display: block!important;
    }
    
.hytPlayerWrap iframe, .hytPlayerWrap object, .hytPlayerWrap embed {
    position:absolute;
    top:0;
    left:0;
    width: 100%!important;
    height:100%;
}

.tv-antenna{
    text-align: center;
    margin-bottom: -20px;
}
.tv-antenna img {
    width:70%;
}
.tv{
    background-color: black;
    border:black 10px solid;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-radius:30px;
    padding:0px;
}
.tv iframe{
    border-radius: 20px;
}

.tv-bottom{
    text-align: center;
    margin-top: -30px;
}
.tv-bottom img{
    width:100%;
}

@media screen and (max-width: 1000px) {
    body>section {
        padding: 30px 20px;
        padding-top: 0px;
    }

    .ascii-art {
        /* font-size:8px; */
        font-size: 1.4vw;
        min-width: 130px;
        white-space: nowrap
    }

    .team-aside {
        /* float: none; */
        width: 100%;
    }

    .team-aside article {
        width: 45%;
    }

    nav ul li a {
        padding: 2px 10px;
        font-size: 17px;
    
    }
    nav ul li {
        margin-right:15px;
    }

    .exhibit-title {
        font-size: 10vw;
        /* text-align: center; */
    }
    .exhibit-title-2 {
        font-size: 9vw;
    }

}

@media screen and (max-width: 600px) {
    #pageContent {
        position: relative;
        top: -30px;
    }

    .cont,
    .cont-team {
        float: none;
        width: 100%;
    }

    aside,
    .team-aside {
        float: none;
        width: 100%;
    }

    header {
        transform-origin: top left;
        transform: scale(0.8);
        /* transform:scale(100vw); */
        padding-right:100px;
    }
    nav ul li a {
        padding: 2px 10px;
        font-size: 17px;
    
    }
    nav ul li {
        margin-right:15px;
    }

    #logo img {
        /* width: 300px; */
        /* width:100%; */
        /* vertical-align: middle; */
        /* margin-right: 10px; */
    }

    .ascii-art {
        font-size: 10px;
        min-width: 130px;
    }

    .ascii-art-container {
        gap: 10px;
    }

    .exhibit-img-div-banner div {
        width: 45%;

    }

}