You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

455 lines
7.2 KiB
CSS

2 years ago
@font-face {
font-family: 'ApfelGrotezk-Regular';
src: url('ApfelGrotezk-Regular.woff') format('woff');
}
img { opacity: 1;
z-index: 0;
display: block;
position: fixed;
}
a span.unclickable { text-decoration: none;
}
/*----------------- CANVAS FROM P5.JS--------------------*/
#GIF {
visibility: visible;
position: absolute;
height: 50%;
top: 48%;
text-align: center;
left: 50%;
transform: translate(-50%,-50%);
}
/*----------------- CONTAINING ALL CONTENTS--------------------*/
/*----------------- WHAT IS THIS? THE MODAL BOX MAYBE--------------------*/
/*----------------- HELP POP UP WINDOW--------------------*/
a button{
background-color: transparent;
margin-bottom: 0;
border: none !important;
font-size:3vw;
margin-bottom: 0;
bottom:0%;
right: 1%;
opacity: 0.5;
}
button{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 3px 1em;
text-decoration: none;
margin-bottom: 1%;
background-color: rgba(0,0,0,.2);
border-radius: 40px;
color: white;
}
#openModal {
display:none;
font-family: 'ApfelGrotezk-Regular';
margin-top: 200%;
}
.modalDialog {
border: red 1px solid;
position: relative;
font-family: 'ApfelGrotezk-Regular';
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
font-family: 'ApfelGrotezk-Regular';
width: 100%;
color: white;
position: relative;
margin: auto;
}
canvas{
z-index: 20;
height: 100%;
}
/*----------------- CLOSE POP UP --------------------*/
*{
/* Prevent any object from being highlighted upon touch event*/
/* tap-highlight-color: transparent; */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
scroll-behavior: smooth;
}
@font-face {
font-family: "ApfelGrotezk-Regular";
src: url("../ApfelGrotezk-Regular.ttf");
}
.display-none {
display:none;
}
.display-flex {
display:flex;
}
.display-block{
display:block;
}
body{
font-size: 1.5em;
color: white;
font-family: "ApfelGrotezk-Regular";
}
.overlay{
z-index: 2;
position: fixed;
}
#code-input{
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 3vw;
opacity: 0.5;
}
#code-input:hover{
color: white;
cursor: pointer;
}
#input{
visibility: hidden;
border: 0;
outline: 0;
background: transparent;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 3vw;
}
#fname{
border: 0;
outline: 0;
background: transparent;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 3vw;
}
.close {
font-family: 'ApfelGrotezk-Regular';
color: #FFF;
font-size: 200%;
position: fixed;
right: -0.7%;
bottom: 1.5%;
width:40px;
text-decoration: none;
}
.close:hover {
color: #FFF;
}
/*----------------- CURSOR --------------------*/
html {
background: black;
}
/*----------------- AUDIO --------------------*/
#audio {
display: none;
}
#BOX4 img{
width:60px;
height: 60px;
position:absolute;
bottom:0;
left: 0;
}
#BOX4{
opacity:0;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
animation: all 2s;
}
#BOX4:hover {
opacity:1;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
animation: all 2s;
}
/*-----------------HELP/ABOUT BUTTON---------------------------------*/
#BOX3 img{
display: block;
width:40px;
height: 50px;
position: absolute;
bottom:0;
right: 0;
z-index: 9999;
}
#BOX3{
opacity:0.5;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
animation: all 2s;
}
#BOX3:hover {
opacity:1;
transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-webkit-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
animation: all 2s;
}
@media screen and (max-width: 768px) {
a button{
background-color: transparent;
margin-bottom: 0;
cursor: pointer;
border: none !important;
font-size:4vw;
margin-bottom: 0;
bottom:0%;
right: 1%;
opacity: 0.5;
}
button{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 3px 1em;
text-decoration: none;
margin-bottom: 1%;
background-color: rgba(0,0,0,.2);
border-radius: 40px;
color: white;
}
#code-input{
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 4vw;
opacity: 0.5;
}
#code-input:hover{
color: white;
}
#input{
visibility: hidden;
border: 0;
outline: 0;
background: transparent;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 3vw;
}
#fname{
border: 0;
outline: 0;
background: transparent;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 4vw;
}
#textcontainer{
display: none;
position: absolute;
top: 0;
left: 0;
right:0;
width: auto;
height: auto;
font-size: 4vw;
text-align: center;
color: black;
margin-top: 70px;
padding: 5%;
}
#container2{
font-family: 'ApfelGrotezk-Regular';
width:100%;
z-index: 15000;
position: relative;
color: white;
display: block;
flex-direction: column;
justify-content: center;
align-items:center;
animation: disparition 1s ease-in forwards;
animation-delay: 10s;
}
p2 {
text-align: center;
font-size: 4vw;
line-height: 90%;
padding-left:10%;
padding-right:10%;
} }
@media screen and (min-width: 768px) {
#textcontainer{
width: calc(100% - 4em);
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
font-size: 3vw;
text-align: center;
color: black;
margin-top: 70px;
}
#container2{
font-family: 'ApfelGrotezk-Regular';
width:100%;
z-index: 15000;
position: relative;
color: white;
display: block;
flex-direction: column;
justify-content: center;
align-items:center;
animation: disparition 1s ease-in forwards;
animation-delay: 10s;
}
p2 {
text-align: center;
font-size: 3vw;
line-height: 110%;
padding-left:10%;
padding-right:10%;
} }