212 lines
3.5 KiB
CSS
212 lines
3.5 KiB
CSS
|
|
canvas {
|
|
display:block;
|
|
position: fixed;
|
|
margin:0;
|
|
padding:0;
|
|
background-color: rgba(130, 130, 238, 0.299);
|
|
z-index: -1;
|
|
top:0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body{
|
|
margin:0;
|
|
padding:0;
|
|
height:100%;
|
|
|
|
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
|
|
-moz-animation: fadein 1s; /* Firefox < 16 */
|
|
-ms-animation: fadein 1s; /* Internet Explorer */
|
|
-o-animation: fadein 1s; /* Opera < 12.1 */
|
|
animation: fadein 1s;
|
|
}
|
|
|
|
article {
|
|
-webkit-column-count: 2;
|
|
-moz-column-count: 2;
|
|
column-count: 2;
|
|
-webkit-column-width: 300px;
|
|
-moz-column-width: 300px;
|
|
column-width: 300px;
|
|
position: absolute;
|
|
}
|
|
|
|
.blank{
|
|
height:100vh;
|
|
width:max-content
|
|
}
|
|
|
|
.about{
|
|
width:30vw;
|
|
height:100vh;
|
|
background-color:#3f32ca;
|
|
font-family: 'Germania One', cursive;
|
|
color:white;
|
|
|
|
overflow: hidden;
|
|
position:fixed;
|
|
|
|
}
|
|
|
|
.name-wrapper{
|
|
margin:40;
|
|
}
|
|
|
|
.name{
|
|
font-size: calc(1vw * 5);
|
|
font-family: 'Black Ops One', cursive;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.links{
|
|
font-size: calc(1vw * 3);
|
|
margin:0;
|
|
|
|
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
|
|
-moz-animation: fadein 3s; /* Firefox < 16 */
|
|
-ms-animation: fadein 3s; /* Internet Explorer */
|
|
-o-animation: fadein 3s; /* Opera < 12.1 */
|
|
animation: fadein 3s;
|
|
}
|
|
|
|
.content-box{
|
|
max-width:60vw;
|
|
margin:auto;
|
|
background-color: rgb(233, 233, 255);
|
|
padding:10px;
|
|
border-radius:10px;
|
|
text-align:center;
|
|
}
|
|
|
|
.content-box-wrapper{
|
|
max-width:40vw;
|
|
margin:auto;
|
|
}
|
|
|
|
p{
|
|
font-size: calc(1vw * 1);
|
|
font-family: 'Denk One', sans-serif;
|
|
}
|
|
|
|
h1{
|
|
|
|
font-size: calc(1vw * 2);
|
|
font-family: 'Black Ops One', cursive;
|
|
}
|
|
|
|
.content{
|
|
width:100%;
|
|
}
|
|
|
|
.empty{
|
|
width:30vw;
|
|
}
|
|
|
|
.three-height{
|
|
height:15vh;
|
|
}
|
|
|
|
.full-height{
|
|
height:100vh;
|
|
background:none;
|
|
}
|
|
|
|
.pgp{
|
|
position:absolute;
|
|
bottom:0;
|
|
text-align:center;
|
|
}
|
|
|
|
.subtitle{
|
|
font-size: calc(1vw * 2);
|
|
color:#6b63ca;
|
|
margin:0;
|
|
}
|
|
|
|
a:hover, a:visited, a:link, a:active, a:any-link{
|
|
text-decoration: none !important;
|
|
color:#5348ca;
|
|
margin:40;
|
|
}
|
|
|
|
/* Set font size for small screen */
|
|
@media only screen and (max-width: 600px) {
|
|
.name{
|
|
font-size: calc(1vw * 15);
|
|
}
|
|
.about{
|
|
width:100%;
|
|
overflow: none;
|
|
position:unset;
|
|
}
|
|
.null{
|
|
display:none !important;
|
|
height:0px;
|
|
}
|
|
.subtitle{
|
|
font-size: calc(1vw * 8);
|
|
}
|
|
.pgp{
|
|
display:none;
|
|
}
|
|
.links{
|
|
font-size: calc(1vw * 10);
|
|
}
|
|
.empty{
|
|
display:none !important;
|
|
width:0px;
|
|
}
|
|
.content{
|
|
width:100vw;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
.content-box{
|
|
width:calc(100vw - 20);
|
|
max-width:unset;
|
|
border-radius:0px;
|
|
margin:0;
|
|
}
|
|
.content-box-wrapper{
|
|
max-width:unset;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
h1{
|
|
font-size: calc(1vw * 7);
|
|
}
|
|
p{
|
|
font-size: calc(1vw * 4);
|
|
}
|
|
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Firefox < 16 */
|
|
@-moz-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Safari, Chrome and Opera > 12.1 */
|
|
@-webkit-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Internet Explorer */
|
|
@-ms-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|