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.

377 lines
7.5 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.5fvw;
--regular: 2vw;
--description: 1vw;
--right: 1vw;
--icon: 1.7vw
}
body{
background-image: url('grid.png');
background-size: 8vw;
margin: 0 10vw;
padding: 0;
max-width: 100%;
min-height: 100vh;
background-size: 8vw;
overflow-y: hidden;
/* overflow-x: hidden; */
z-index: 100;
}
button{
font-family:'Robotomono';
color: black;
background-color: white;
font-size: var(--description);
border-radius: 40px;
/* margin-left: 20vw; */
display: inline-block;
margin: 0 1vw;
/* min-width: 10vw; */
}
.header{
position: relative;
/* height: 1vw; */
/* margin: 0 6vw; */
/* width: 100vw; */
line-height: 4vw
}
#title{
font-family:'Roboto';
font-size: var(--title);
/* padding:-1vw; */
}
.column {
float: left;
}
.left {
width: 65%;
background-color: white;
font-family:'Robotomono';
background-color: rgba(0,0,0,0)}
#showMessage{
margin-top:3vw;
padding-right: 2vw;
font-family:'EBGaramondregular';
font-size: var(--regular);
line-height: 3vw;
}
.right {
width: 35%;
background-color: white;
border-left: 2px solid black;
height: 300vw;
text-align: right;
background-color: rgba(0,0,0,0)
}
.right p{
font-size: var(--right);
line-height: 1.5vw;
padding: 0 10vw 0 2vw
}
#button{
text-align: center;
}
#intro{
visibility: hidden;
position: absolute;
overflow-y: scroll;
margin: 2vw;
line-height: 1.5vw}
#colophon{
visibility: hidden;
position: absolute;
overflow-y: scroll;
margin: 2vw;}
#print{
visibility: hidden;
position: absolute;
overflow-y: scroll;
margin: 2vw;}
.A{
color: orange;
}
.M{
color: red;
}
.T{
color: silver;
}
.L{
color: aqua;
}
.P{
color: #ff14d0; ;
}
.R{
color: #0F0;
}
.U{
color: grey;
}
.H{
color: yellow;
}
.O{
color: blue;
}
.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: orange;
}
#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: aqua;
}
#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: pink;
}
#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: grey
}
#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: yellow;
}
#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';
}
#future:hover{
text-decoration: underline;
filter: blur(1px);
-webkit-transition: all .5sease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5sease;
transition: all .5s ease;
animation: sexy 1s infinite;
}
@keyframes sexy{
0%{font-family: 'Roboto';}
70%{font-family: 'Brut';}
100%{font-family: 'EBGaramonditalicsemi';}
}
#gallery{
font-family: "WFTF";
font-size: 15vw;
/* text-align: center; */
margin: 40% 25%
}
.customfont{
font-family: "WFTF_custom-Regular";
font-size: 4vw
}
#sub{
font-family: 'EBGaramonditalic';
font-size: 2.8vw;
}