@font-face {
    font-family: "Public Pixel";
    src: url("./fonts/public-pixel-font/PublicPixel.ttf");
}
@font-face {
    font-family: "Home Video Bold";
    src: url("./fonts/home-video-font/HomeVideoBold.ttf");
}
@font-face {
    font-family: "Home Video";
    src: url("./fonts/home-video-font/HomeVideo.ttf");
}

@keyframes fontIncrease {
    to{ font-size: 2.4vmin; }
}
@keyframes fontDecrease {
    to{ font-size: 13px;}
}

@keyframes fadein {
    from{opacity: 0}
    20%{opacity: 0}
    to{opacity: 100; animation: fontDecrease;}
}

@keyframes blink {
    from{opacity: 0}
    25.0%{opacity: 0}
    25.001%{opacity: 100}
    to{opacity: 100}
}

@keyframes page-fadeout {
    from{}
    50%{
        background-color: #060606FF;
        opacity: 100%;
    }
    to{
        opacity: 0;
        background-color: #060606FF;
    }
}

body{
    background-color: blue;
    color: white;
    font-family: "Home Video Bold", system-ui;
    overflow: hidden;
    border: none;
    font-size: 2vmin;
    animation: fadein 3s;
}


body a {
    color: mediumpurple;
    animation: fontDecrease;
}

body p{
}

body a:hover{
    animation: fontIncrease .5s forwards;
}

#projects-title{
    animation: blink 2s infinite;
}

.big-text{
    font-size: 40px;
    font-family: Home Video, system-ui;
}

.canvas{
    display: compact;
    justify-content: center;
    font-family: "Public Pixel", math;
    text-align: center;
}

.canvas h2 {
    font-size: 9vmin;
    justify-content: center;
    display: flex;
    font-family: "Home Video Bold", system-ui;
    line-height: .4;
}

.canvas h3 {
    font-size: 6.5vmin;
    justify-content: center;
    display: flex;
    font-family: "Home Video Bold", system-ui;
    animation: trans;
}

.canvas h4 {
    font-size: 35px;
    justify-content: center;
    display: flex;
    font-family: "Home Video", system-ui;
    animation: trans;
}

.canvas p {
    margin-right: max(20%,15vmin);
    margin-left: max(20%,15vmin);
}

.projs h2 {
    font-size: 45px;
    line-height: 0;
}

/*.background{*/
/*    position: absolute;*/
/*    margin: 0;*/
/*    border: none;*/
/*    !*align-content: center;*!*/
/*    !*left: min(12.5vw,50vh);*!*/
/*    left: 12.5vw;*/
/*    top: 0;*/
/*    width: 75vw;*/
/*    !*width: min(75vw,100vh);*!*/
/*    !*max-width: 100%;*!*/
/*    !*height: 100%;*!*/
/*    z-index: -200;*/
/*    animation: fadein 7s;*/
/*    image-rendering: crisp-edges;*/
/*}*/

.background{
    position: absolute;
    margin: 0;
    border: none;
    /*align-content: center;*/
    /*left: min(12.5vw,50vh);*/
    left: 10vw;
    top: -10vw;
    width: 80vw;
    /*width: min(75vw,100vh);*/
    /*max-width: 100%;*/
    /*height: 100%;*/
    z-index: -200;
    animation: fadein 7s ;
    image-rendering: crisp-edges;
}

.readify-showcase{
    /*height: 10%;*/
    /*display: flex;*/
    /*justify-content: center;*/
}

.readify-showcase img {
    /*max-width: 30%;*/
    image-rendering: pixelated;
}

.neonfc a:hover{
    color: greenyellow;
}

.redirect {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 33vw;

    display: flex;
    justify-content: center;
}

#pages p{
    animation: blink 2s infinite;
    line-height: 0.6vh;
}

#pages{
    justify-content: center;
    display: flex;
    font-size: 6vmin;
}

#readify-showcase-artists{
    position: absolute;
    top: auto;
    left: 10%;
    transform: translateY(100px);
}
#readify-showcase-selection{
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateY(100px);
    border: 0 black solid;
}
#readify-showcase-graph{
    /*position: absolute;*/
    top: auto;
    /*left: 20%;*/
    /*width: 60%;*/
    z-index: -20;
    image-rendering: optimizeSpeed;
}
#robots-showcase{
    /*transform: scale(70%) translateY(-20%);*/
    max-width: 40%;
    z-index: -40;
}

#links{
    display: grid;
}

#neon:hover{
    color: green;
}

#github:hover{
    color: grey;
}

#engine:hover{
    color: lightblue;
}

a img:hover{
    width: 100%;
}

#repos{
    display: flex;
    justify-content: center;
    margin: 0;
}

#repos img {
    width: 5vh;
    border: dotted transparent .7vw;
}