@keyframes idle {
    0% {
        transform: translate(0%, 0%);
    }
    25% {
        transform: translate(2%, 1%);
    }
    50% {
        transform: translate(-1.5%, 2%);
    }
    75% {
        transform: translate(1%, -0.5%);
    }
    100% {
        transform: translate(0%, 0%);
    }
}
@keyframes bloop {
    0% {
            transform:  scale(1);
        }
        50% {
            transform:  scale(0.8);
        }
        100% {
            transform:  scale(1);
    }
}
.idle {
    animation: idle 30s ease-in-out 0s infinite normal none;
}
.bloop {
    width: 430px;
    height:500px;
    transition: transform .3s ease-in-out;
    cursor:pointer;
}
.bloop:hover {
    transform:scale(0.95);
}
@keyframes pop{
    0% {
        transform:  scale(0);
    }
    25% {
        transform:  scale(0.9);
    }
    60% {
        transform:  scale(1);
    }
    85% {
        transform:  scale(1);
    }
    100% {
        transform:  scale(0);
    }
}
.popper {
    transform:scale(0);
    transition: transform 2s ease-out;
}
.slide-up {
    transform:translate(-100%, 100%) scale(0) ;
    transition: transform 1s ease-out;
}
.pop-active {
    transform: scale(1);
}
.popping {
    animation: pop 5s ease-in-out 0s infinite normal none;
}
body {
    margin: 0;
    padding: 0;
    background-color: #c5bea2;
    background-image: url("/images/papertexture_fullhd.jpg");
    background-repeat: repeat-y;
    background-size: 100% auto;
    text-align: center;
    max-width:100vw;
    max-height:100vh;
    overflow-x: hidden;
    top:0;
    bottom:0;
}
#container {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#logo {
    fill: aqua;
    max-width: 430px;
    max-height:500px;
    user-select: none;
}
.special-elite {
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style: normal;
}
#corner-container div {
    position: absolute;
    margin:1em;
}
.top {
    top:0px;
}
.right {
    right:0px;
}
#about {
    position: fixed;
    bottom: -4px;
    width: 250px;
    max-width:25%;
    right: -32px;
    cursor: pointer;
    transition: transform 1s ease-in-out;
}
#about h2 {
    text-align: left;
}
#about:hover {
    transform: translate(2.5%, 0%) scale(1.05);
}
#about img {
    width:100%;
}
.mail-link {
    text-decoration: none;
    color:black;
}
.diablo {
    font-family: "Diablo", sans-serif;
}
.subject {
    font-size:1.5rem;
    user-select: none;
    font-family: "Diablo", sans-serif;
    display: flex;
    height:10vh;
    align-items: center;
    justify-content: center;
}
.subject a {
    cursor:pointer;
    user-select: none;
    /*padding: 1.75rem 0 1.75rem 0;*/
}
@media (hover:hover) and (pointer:fine) {
    .green:hover {
        color: #75ffc1;
    }
    .yellow:hover{
        color:#FFD40C;
    }
    .red:hover {
        color:#C23636;
    }
}

.active.green {
    color: #75ffc1;
}
.active.yellow{
    color:#FFD40C;
}
.active.red {
    color:#C23636;
}
.scifi {
    font-family: "Anta", sans-serif;
    font-weight: 600;
    font-size:2em;
    line-height:0em;
    font-style: normal;
}

.thing {
    width:300px;
    max-width:20%;
    position: absolute;
    left:5%;
    top:5%;
}
.model {
    width:300px;
}
.code {
    width:200px;
}
/*#about:hover{
    transform: translateY(-130px);
}*/
.hidden {
    opacity:0;
    pointer-events: none;
}
.removed {
    display:none;
}
#about:hover > .hovershow {
    opacity: 1 !important;
}
.about-txt {
    font-size:2rem;
    margin:0;
    transition: opacity .2s linear;
    transform: rotate(3deg);
}
.models-title:hover ~ .model {
    transform:scale(1);
}
.bloop:hover ~ .subject > .model {
    transform:scale(1);
}
.models-title:hover ~ .slide-up {
    transform: translate(0%,0%) scale(1) ;
}
.code-title:hover ~ .code {
    transform:scale(1);
}
.code {
    border-radius: 20%;
}
.more-title:hover ~ .more {
    transform:scale(1);
}
.more {
    border-radius: 20%;
}
.subject p {
    display: inline;
}
.slider-container{
    width: 100vw;
    max-width:100vw;
    margin-left: auto;
    margin-right: auto;
    max-height: 90vh;
    overflow-y: scroll;
}
.slider-btn {
    padding:0.5em;
    font-weight: bold;
    z-index: 999;
    user-select: none;
}
.slider-btn-container {
    position: relative;
    bottom: -100px;
}
.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > div {
    float: left;
    width: 100%;
    position: relative;
}
.aqross, .youtube, .cubecat {
    left: 67%;
    top: 16%;
}
.stege {
    left: 13%;
    top: 55%;
}
.qards, .fuckgif {
    right: 10%;
    left: auto;
    bottom: 10%;
    top: auto;
}
.athena {
    position: fixed;
    left:0%;
    bottom:0%;
    top: auto;
}
.quickode, .wireskull {
    top:2%;
    left: 45%;
}
#slider02 {
    z-index:99;
}
.slideshow .swipe-wrap .swipe-page {
    height:auto;
    padding-bottom:0px;
}
.swipe-page {
    overflow-y: scroll;
    height:100%;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.aboutme {
    font-family: "Teko", sans-serif;
    font-weight: 600;
    font-size:2em;
}
.contact {
    font-family: "Teko", sans-serif;
    font-weight: 600;
    font-size:2em;
    padding-left: 1em;
    padding-right: 1em;
}
.contact:hover {
    background-color: black;
    color:white;
    transform: rotate(15deg);
}
.tilt {
    transition: transform .2s ease-in-out;
    transform: rotate(0deg);
    margin-left:0.5em;
    margin-right:0.5em;
}
.tilt:hover {
    transform: rotate(-4deg);
}
.tilt-reverse:hover {
    transform: rotate(4deg);
}
.swipe-page p {
    line-height: 2em;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.2em;
}
.swipe-page img {
    width:70%;
    max-width:250px;
}
.swipe-page video {
    width:auto;
    max-height:250px;
    max-width:70%;
}
#slider03 .swipe-wrap .swipe-page img, #slider02 .swipe-wrap .swipe-page video {
    padding:5px;
    margin:10px;
    background-color: rgb(255, 255, 255);
    border: solid 5px rgb(0, 0, 0);
    border-radius: 25px;
}
#slider03 .swipe-wrap .swipe-page img:hover{
    transform:scale(1.05);
}
hr {
    max-width: 600px;
    border: 1px dashed #420000;
}
.model-viewer {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
.me {
    position: absolute;
    transition: transform 1s ease-in-out;
}
.me:hover{
    transform: translateX(-10%);
}
#parallax {
    width:100%;
    position: fixed;
    z-index: -1;
    pointer-events: none;
    background-image: url(/logo/aeps_front.png), url(/logo/aeps_middle.png), url(/logo/aeps_back.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position: 50% 50%;
    margin-bottom: -3rem;
    margin-top: 1.5rem;
    transition: opacity 1s ease-out;
}
.bloop {
    background-size: auto 105%, auto 105%, auto 105%;
}
#python-mini, .inline-icon{
    height: 1.5rem;
    width: 1.5rem !important;
    margin-bottom: -0.4rem;
}
#caesar {
    font-family: "Diablo", sans-serif;
}
::-webkit-scrollbar {
width: 0px;               /* width of the entire scrollbar */
}

::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.438);    /* color of the scroll thumb */
border-radius: 20px;       /* roundness of the scroll thumb */
/*border: 3px solid rgb(0, 0, 0);  creates padding around scroll thumb */
}
.link p {
    width: fit-content;
}
.inliner {
    width: fit-content;

}
.polaroid {
    width: fit-content;
    max-width:80%;
    border-radius: 0.5em;
    background-color: #fff;
    border: 10px solid white;
    border-bottom-width: 10px;
    border-bottom-style: solid;
    border-bottom-color: white;
    /*border-bottom: 50px solid white;*/
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    transition: transform .2s ease-in-out;
}
.polaroid video {
    width: auto;
    max-height: 250px;
    max-width: 100%;
    border-radius: 0.3em;
    cursor:pointer;
}
.portfolio-container, #boardgame, #repairs, #custom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
}
.website {
    width: fit-content;
    height: fit-content;
    margin:1em;
    background-color: #0000004d;
    border: 4px solid rgba(0, 0, 0, 0);
    border-radius: 2em;
    padding: 1em;
    transition: transform .1s ease-in-out;
}
.website-link {
    text-decoration: none;
}
.website img {
    border-radius: 1em;
    width: 100%;
    max-width:300px;
}
.website h4 {
    line-height: 1em;
    margin:0.5em;
    color: white;
}
.website p {
    text-decoration: none;
    color:white;
    margin-left: -1em;
    margin-right: -1em;
}
.website a {
    color:white;
    text-decoration: none;
}
.polaroid h3 {
    margin: 0;
    height: 50px;
    line-height: 50px;
    opacity:0;
    transition: opacity .2s ease-in-out;
}
.polaroid:hover h3 {
    opacity: 1;
}

.polaroid:hover {
    transform:scale(1.1) rotate(3deg);
    box-shadow: 5px 5px 20px 9px rgba(0,0,0,0.74);
    z-index:420;
}
.model-viewer canvas {
    filter: drop-shadow(0 0 5px black);
}
.model-viewer:hover canvas {
    filter: drop-shadow(0 0 5px rgb(255, 123, 0));
}
#alien {
    margin-bottom: -2em;
    padding: 20px;
    text-decoration: none;
    color:black;
}
#alien:hover{
    filter: invert(1);
}
#alien h3 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em;
}
#alien:hover h3 {
    background-color: white;
}
@media only screen and (max-width: 800px) {
    #parallax {
        transform: scale(0.5);
    }
    .subject {
        font-size: 1rem;
        border-bottom: 2px dashed black;
    }
    .about-txt {
        font-size: 1rem;
        opacity: 1;
        width: fit-content;
        padding: 0.2em;
        background-color: black;
        color: white;
    }
    #corner-container {
        display: none;
    }
    .portfolio-container, #boardgame, #custom, #repairs {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }
    #cv-link {
        display: none !important;
    }
}
@media only screen and (min-width: 800px) {
    .portfolio-container, #boardgame, #repairs, #custom {
        padding-left:20%;
        padding-right:20%;
    }

    .polaroid-container {
        display: flex;
        max-width: 800px;
        flex-wrap: wrap;
        justify-content: center;
        margin-left:auto;
        margin-right:auto;
    }
    .polaroid-container:hover .polaroid {
        opacity: 0.5;
    }
    .polaroid:hover {
        opacity: 1 !important;
    }
}
@media (hover:hover) and (pointer:fine) {
    .model-viewer{
        cursor:move;
    }
    a p:hover{
        background-color: black;
        text-decoration: none;
        font-weight: bold;
    }
    .link:hover{
        color: white;
        background-color: black;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
    }
    #printables:hover{
        transform:scale(1.1);
        background-color: white;
        filter: invert(1);
    }
    #github:hover, #kofi:hover {
        transform: scale(1.1);
        background-color: white;
        filter: invert(1);
        border-radius: 0.5em;
    }
    .website:hover {
        transform: scale(1.05);
        border: 4px solid black;
    }
    .website:hover p{
        background-color: black;
    }
}
#printables, #github {
    transition: transform .2s ease-in-out;
    margin-bottom:25px;
}