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; }
}