@charset "UTF-8";
/* CSS Document */
@font-face {
font-family: 'MonaSans-Regular';
src: url('MonaSans-Regular.woff2') format('woff2'),
url('MonaSans-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MonaSans-Bold';
src: url('MonaSans-Bold.woff2') format('woff2'),
url('MonaSans-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
hyphens: auto;
}
body{
color: #fff;
background-color: #000;
font-family: 'MonaSans-Bold', "sans-serif";
font-size: 22px;
line-height: 30px;
font-weight: normal;
font-style: normal;
background-image: url("../images/jelly-fish.webp");
background-size: cover;
background-attachment: fixed;
background-position: center top;
background-repeat: no-repeat;
text-transform: lowercase;
}

strong, b, em{
color:#000;
font-weight: normal;
font-style: normal;
background: linear-gradient(120deg,rgba(51, 255, 255, 1) 0%, rgba(204, 102, 255, 1) 100%);
-webkit-text-fill-color: transparent;
background-clip: text;	
}
h1{
font-size: 6em;
line-height: 1em;
margin: 1em 0 0 0; 
}
.home h1{
display: none;
}
h2{
font-size: 2.2em;
line-height: 1.2em;
margin: 1em 0 -.4em 0;
}
h3{
font-size: 1.6em;
line-height: 1.2em;
margin: 1em 0 0 0; 
}
h4{
font-size: 1.4em;
line-height: 1.2em;
margin: 1em 0 0 0;
}
p{
margin: 1em 0 2em 0;
}
.centered{
text-align: center;
}
p a, a:visited{
background: linear-gradient(120deg,rgba(51, 255, 255, 1) 0%, rgba(204, 102, 255, 1) 100%);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-clip: text;	
text-decoration: underline dotted 1px #fff;
}
p a:hover, a:focus, a:active{
background: #fff;
color: #000;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-clip: text;	
text-decoration: underline solid 1px #fff;
}

blockquote{
font-family: 'Brockmann-SemiBold';
font-weight: normal;
font-style: normal;
font-size: 4em;
line-height: 1.1em;
margin: 1em 0; 
color: #ffee00;
}
td{
display: table-cell;
vertical-align: top;
min-width: 3.2em;
}
ul{
list-style-position: inside;
}
img{
width: 100%;
height: auto;
}
.rounded{
border-radius: 100%;
}
hr{
border: none;
display: block;
height: 1px;
background-color: #33ffff;
margin: 2em 0;
}
a.btn-xl, a.btn-xl:visited{
text-decoration: none;
display: inline-block;
padding: .6em 1em;
font-size: 1.2em;
line-height: 1em;
color: #000;
background: linear-gradient(120deg,rgba(51, 255, 255, 1) 0%, rgba(204, 102, 255, 1) 100%);
border: solid 2px #000;
border-radius: 2em;
text-align: center;
margin: 1em 1em 0 0;
text-transform: uppercase;
}
a.btn-xl:hover, a.btn-xl:focus, a.btn-xl:active{
color: #33ffff;
background: #000;
border: solid 2px #33ffff;
text-decoration: none;
}
/* Social media Links */
.social-media{
display: inline-block;
width: 2.4em;
height: 2.4em;
text-decoration: none;
background: transparent;
margin: 1em 1em 1em 0;
}
.social-media:hover{
background: transparent; 
}
.social-media:focus{
background: transparent; 
}
.social-media:active{
background: transparent; 
}
.fb, .fb:visited{
background-image: url("../images/fb-icon.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 2.2em;
}
.fb:hover, .fb:focus, .fb:active{
background-image: url("../images/fb-icon.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 2.4em;
filter:grayscale(100%) brightness(200%);
}
.insta, .insta:visited{
background-image: url("../images/insta-icon.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 2.2em;
}
.insta:hover, .insta:focus, .insta:active{
background-image: url("../images/insta-icon.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 2.4em;
filter:grayscale(100%) brightness(200%);
}
/* Layout */
.main-flex{
max-width: 100vw;
margin: 2em auto 6em 0;
padding: 0 1em;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.title{
display: flex;
width: 100vw;
align-items: flex-end;
height: 100vh;
padding: 1em;
}
.full{
flex-basis: 100%;
}
.twothirds{
flex-basis: 66%;
}
.half{
flex-basis: 48%;
}
.logo{
width: 6em;
height: 14em;
position: fixed;
top: 0;
right: 2em;
z-index: 6666;
background-color: transparent;
mix-blend-mode: difference;
}
.logo a, a:visited{
text-decoration: none;
display: block;
width: 100%;
height: 100%; 
background-image: url("../images/logo-theater5.svg");
background-repeat: no-repeat;
background-size:cover;
background-color: transparent;
}
.logo a:hover, a:focus, a:active{
background-color: transparent;
filter: invert(100%);
}
footer{
margin: 6em 0 0 0;
padding: 2em;
}
footer a, a:visited {
color: #e84e0f;
text-decoration: underline dotted 1px #fff;
margin: 0 1em;
filter: none;
}
footer a:hover, a:focus, a:active{
background-color: #fff;
text-decoration: underline solid 1px #fff; 
color: #000;
filter: none; 
}

@media only screen and (max-width: 820px){
body{
font-size: 14px;
line-height: 20px;
}
h1{
font-size: 2.6em;
line-height: 1em;
margin: 1em 0 0 0; 
}
.home h1{
display: none;
}
h2{
font-size: 2em;
line-height: 1.2em;
margin: 1em 0 -.4em 0;
}
h3{
font-size: 1.4em;
line-height: 1.2em;
margin: 1em 0 0 0; 
}
h4{
font-size: 1.2em;
line-height: 1.2em;
margin: 1em 0 0 0;
}
 .title{
display: flex;
padding: 0 1em;
width: 100vw;
align-items: center;
height: 100vh;
}
.logo{
top: 0;
right: 1em;
width: 6em!important;
height: 12em!important;
}
.logo a, a:visited{
text-decoration: none;
display: block;
width: 6em;
height: 12em; 
background-image: url("../images/logo-theater5.svg");
background-repeat: no-repeat;
background-size: 100%;
background-color: transparent;
}
.logo a:hover, a:focus, a:active{
background-color: transparent;
}
a.btn-xl, a.btn-xl:visited{
display: block;
width: 100%;
}
.main-flex{
max-width: 100vw;
margin: 6em 0 1em 0;
padding: 0 1em;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.full,
 .twothirds,
 .half{
flex-basis: 100%;
}
footer{
margin: 6em 0 0 0;
padding: 1em;
} 
}