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.

528 lines
10 KiB
CSS

@media screen{
@font-face {
font-family: 'Roboto';
src: url('fonts/Roboto-Regular.ttf');
}
@font-face {
font-family: 'Robotobold';
src: url('fonts/Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('fonts/Roboto-Medium.ttf');
}
@font-face {
font-family: 'Robotomono';
src: url('fonts/RobotoMono-Bold.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('fonts/wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('fonts/EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('fonts/EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('fonts/EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('fonts/Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'WFTF_custom-Regular';
src: url('fonts/WFTF_custom-Regular.otf');
}
* {
box-sizing: border-box;
}
:root{
font-family:'Roboto';
--title: 6vw;
--sub: 1.2vw;
--sub-r: 5.5vw;
--regular: 2vw;
--r-r: 5vw;
--description: 1vw;
--right: 1vw;
--icon: 1.7vw
}
body{
background-image: url('grid.png');
background-size: 8vw;
margin: 0 4vw;
padding: 0;
max-width: 100%;
height: 100%;
background-size: 8vw;
overflow-x: hidden;
z-index: 100;
/* text-shadow: 10px 10px 5px rgba(0,0,0,0.05) */
}
button{
font-family:'Robotomono';
color: black;
background-color: white;
font-size: var(--description);
border-radius: 40px;
display: fixed;
margin: 0 1vw;
margin-bottom: 2vw;
min-width: 6vw;
}
button:hover{
font-family:'Robotomono';
color: black;
background-color: #D3D3D3;
}
button:focus{
font-family:'Robotomono';
color: black;
background-color:#c6c6c6;
}
.row{
margin-top: -3vw;
}
.header{
position: fixed;
line-height: 4vw;
overflow-y: hidden;
}
#title{
font-family:'Roboto';
font-size: var(--title);
}
.column {
float: left;
position: fixed
}
.left {
width: 60%;
margin-top: 20%;
}
#showMessage{
padding-right: 2vw;
font-family:'EBGaramondregular';
font-size: var(--regular);
line-height: 2.5vw;
}
.right {
right: 2vw;
margin-top: 22.5vw;
width: 35%;
background-color: white;
height: 100vh;
position: fixed;
background-color: rgba(0,0,0,0)
}
.right p, li, b{
font-size: var(--right);
line-height: 1.5vw;
padding: 0 5vw 0 1vw;
font-family:'Robotomedium';
}
.right h3{
font-size: var(--sub);
padding: 0 5vw 0 1vw;
}
.right p,b,h3,ul{
margin: .7vw 1vw;
}
#button{
text-align: center;
}
#innest{
position: relative;
overflow-y: scroll;
}
#intro{
visibility: hidden;
position: absolute;
margin-top: 2vw;
overflow-y: hidden;
line-height: 1.5vw;}
#colophon{
visibility: hidden;
position: absolute;
margin-top: 2vw;
}
#print{
visibility: hidden;
position: absolute;
margin-top: 2vw;
}
#innest{
position: relative;
overflow-y: scroll;
}
#license{
visibility: hidden;
position: absolute;
margin-top: 2vw;
}
#license a{
text-decoration:underline;
color: black
}
#license a:visited{
text-decoration:underline;
color: black
}
#license ul{
font-size: var(--regular);
font-family:'Robotomedium';
}
.A{
color: #ff6c2f;
}
.M{
color: red;
}
.T{
color: silver;
}
.L{
color: #00939b;
}
.P{
color: #ff14d0; ;
}
.R{
color: #0F0;
}
.U{
color: #3255a4;
}
.H{
color: #0078bf;
}
.O{
color: #00f;
}
.E{
color: green;
}
#showMessage a{
color: black;
text-decoration: none;
font-family: 'EBGaramonditalic';
}
#showMessage span{
font-family: "WFTF";
text-decoration: underline;
font-size: var(--icon);
}
#showMessage .A:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: #ff6c2f;
}
#showMessage .M:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: red;
}
#showMessage .T:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: silver;
}
#showMessage .L:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: #00939b;
}
#showMessage .P:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: #ff14d0;
}
#showMessage .R:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: #0f0;
}
#showMessage .U:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: #3255a4;
}
#showMessage .E:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: green;
}
#showMessage .H:hover{
-webkit-transition: all .5sease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5sease;
transition: all .5s ease;
/* text-decoration: underline; */
color: #0078bf;
}
#showMessage .O:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
/* text-decoration: underline; */
color: blue;
}
#future{
text-decoration: none;
font-family: 'EBGaramonditalic';
cursor: pointer;
}
#future:hover{
/* text-decoration: underline; */
filter: blur(1.5px);
-webkit-transition: all .5 ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5sease;
transition: all .5s ease;
/* animation: sexy 1s infinite; */
}
.customfont{
font-family: "WFTF_custom-Regular";
font-size: 4vw
}
#sub{
font-family: 'EBGaramonditalic';
font-size: 2.8vw;
}
#gallery{
font-family: "WFTF";
font-size: 15vw;
text-align: center;
margin: 40% 0;
height: 0;
display: absolute;
}
.mini{
font-size: 0.8vw;
line-height: 1vw;
}
.mini a{
text-decoration: none;
}
@media only screen and (max-width: 600px) {
body{
overflow-y: hidden;
margin: 0 7vw;
}
#title{
margin-top: 9vw;
font-size: 11vw;
line-height: 9vw
}
#sub{
font-size: 4.8vw;
width: 30%
}
.column{
position: relative
}
.left{
margin-top: 40vw;
width: 90%;
overflow-y: auto;
}
#innest{
position: relative;
overflow-y: none;
}
#showMessage{
font-size: var(--r-r);
line-height: 5vw
}
#showMessage span{
font-family: "WFTF";
text-decoration: underline;
font-size: 4vw;
}
#gallery{
font-family: "WFTF";
font-size: 45vw;
text-align: center;
margin: 40% 0;
height: 0;
display: absolute;
}
.right{
height: 200%;
margin: 0;
width: 100%;
position: relative;
overflow-y: none;
margin-bottom: 30vw
}
.right p, li, b{
font-size: 4vw;
line-height: 5.5vw;
padding: 0 5vw 0 1vw;
font-family:'Robotomedium';
}
.right h3{
font-size: var(--sub-r);
padding: 0 5vw 0 1vw;
line-height: 5vw
}
.right p,b,h3, ul{
margin: .7vw 1vw;
}
.mini{
font-size: 3vw
}
.customfont{
font-family: "WFTF_custom-Regular";
font-size: 6vw
}
button{
font-size: 4vw;
margin: 0;
margin-bottom: 3vw;
min-width: 20%;
}
}