@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Redacted&display=swap');

*{

    margin: 0px;

    scroll-behavior: smooth;

    
}

html{
    background: linear-gradient(#3b3b3b, #171817) no-repeat fixed;


}

body{

    background: #2f2f2f;

    background: linear-gradient(#3b3b3b, #171817) no-repeat fixed;

    color: #eeeeff;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    line-height: 100%;

    display: grid;

}

.container{

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: #0000002d;
    padding: 10px;
    border-radius: 15px;

    place-self: center;
    width: fit-content;

}

.break{

    padding-top: 50px;

}

.twitterButton{

    background: none;
    border: none;
    outline: none;
    color: #eeffff;
    transition: color 0.2s;

}
.twitterButton:hover{

    color: #1a8cd8;


}
.twitterButton:active{

    color: #105a8b;

}

.gitButton{

    background: none;
    border: none;
    outline: none;
    color: #eeffff;
    transition: color 0.2s;

}
.gitButton:hover{

    color: #46954a;
    
    

}
.gitButton:active{

    color: #224824;

}

.gildButton{

    background: none;
    border: none;
    outline: none;
    color: #eeffff;
    transition: color 0.2s;

}
.gildButton:hover{

    color: #FFD75E;
    
    

}
.gildButton:active{

    color: #e2b633;

}

.kofiButton{

    background: none;
    border: none;
    outline: none;
    color: #eeffff;
    transition: color 0.2s;

}
.kofiButton:hover{

    color: #ff5e5b;

}
.kofiButton:active{

    color: #b2413f;

}


.itchButton{

    background: none;
    border: none;
    outline: none;
    color: #eeffff;
    transition: color 0.2s;

}
.itchButton:hover{

    color: #ff5e5b;

}
.itchButton:active{

    color: #913534;

}

.instaButton{

    background: none;
    border: none;
    outline: none;
    color: #eeffff;
    transition: color 0.2s;

}
.instaButton:hover{

    color: #e03496;

}
.instaButton:active{

    color: #831d57;

}

.tumblrButton{

    background: none;
    border: none;
    outline: none;
    color: #eeffff;
    transition: color 0.2s;

}
.tumblrButton:hover{

    color: #4e3fd3;

}
.tumblrButton:active{

    color: #312883;

}


.navBar{

    position: fixed;
    width: 100%;
    background: #1d1d1d;
    display: block;
    z-index: 5;

}
.navBar a{

    float: left;
    color: #eeeeff;
    text-align: center;
    padding: 23px 16px;
    text-decoration: none;
    font-size: 18px;
    user-select: none;

}
.navBar a:hover{
    background: #2b2b2b;
}
.navBar a:active{
    background: #46954a;
}
.navBar form{

    float: right;
    padding-right: 0.5%;
    color: #eeeeff;
    text-align: center;
    text-decoration: none;
    font-size: 18px;

}
.navBar ion-icon{
    font-size: 40px;
    margin-top: 25%;
    pointer-events: none;

}
.navBar p{

    float: left;
    color: #eeeeff;
    text-align: center;
    padding: 23px 16px;
    text-decoration: none;
    font-size: 18px;
    background: #46954a;
    user-select: none;

}

.banner{

    object-fit: cover;
    width: 100%;
    height: 450px;

    border-bottom: 6px solid;

    /* animation: startBlur 0.5s; */

}
@keyframes startBlur{

    0% {filter: blur(10px);}
    10% {filter: blur(9px);}
    20% {filter: blur(8px);}
    30% {filter: blur(7px);}
    40% {filter: blur(6px);}
    50% {filter: blur(5px);}
    60% {filter: blur(4px);}
    70% {filter: blur(3px);}
    80% {filter: blur(2px);}
    90% {filter: blur(1px);}
    100% {filter: blur(0px);}

}

.galleryContainer{

    display:table;
    table-layout: auto;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    background: linear-gradient(#222222, #1a1414) repeat center center;

}
.galleryContainer img{
    
    vertical-align:middle;
    max-width: 90%;
    min-width: 40%;
    height: auto;  
    border: 5px outset;
    border-color: #1f1f1f #9b9087 #7e7064 #0c0c0c;
    margin: 0.75%;
    box-shadow: 0 0 10px 3px #36332e;

    border-radius: 15px;

}
.galleryContainer img:hover{

    animation: smallShake 1s;
    animation-iteration-count: infinite;
}
@keyframes smallShake{

    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-0.2deg); }
    20% { transform: translate(-3px, 0px) rotate(0.2deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(0.2deg); }
    50% { transform: translate(-1px, 2px) rotate(-0.2deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-0.2deg); }
    80% { transform: translate(-1px, -1px) rotate(0.2deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-0.2deg); }

}

.inlineLink{

    color: #eeeeff;

}

hr{

    margin-left: 20%;
    margin-top: 1%;
    margin-bottom: 1%;

}

.jImg {
    max-width: 25%;
    height: auto;  
    border: 7px solid #777777;
    margin: 1%;
}
.jImgNB {
    max-width: 25%;
    height: auto;  
    margin: 1%;
}

ion-icon{

    font-size: 75px;
    pointer-events: none;

}

.specImg{

    height: auto;  
    max-width: 65%;
    min-width: 40%;
    margin: 1%;
    border: 10px inset #151515;

}

.gildedLogo{
    width: 14%;
    opacity: 100%;
    color: #FFD75E;
}



.specLogo{

    width: 7%;
    opacity: 30%;
    filter: grayscale(100%);

}
.specLogo:hover{

    animation: 0.2s specHov;
    animation-fill-mode: forwards;

}
@keyframes specHov {
    0% {filter: grayscale(100%);}
    10% {filter: grayscale(90%);}
    20% {filter: grayscale(80%);}
    30% {filter: grayscale(70%);}
    40% {filter: grayscale(60%);}
    50% {filter: grayscale(50%);}
    60% {filter: grayscale(40%);}
    70% {filter: grayscale(30%);}
    80% {filter: grayscale(20%);}
    90% {filter: grayscale(10%);}
    100% {filter: grayscale(0%);}
}

.specTxt span{

    display: none;

}
.specTxt:before{

    content: "Project Specularity";
    animation: 1s specTxtObf;
    animation-iteration-count: infinite;

}
@keyframes specTxtObf {
    0% {content:  "Pя[]_|£<'][' S9&<[_]1^®][";}
    10% {content: "Gя9_|&©7 S|>3<µ!7j4[";}
    20% {content: "J|?*_|€[7 S|*&([_]|_@1²l";}
    30% {content: ":|20_|3(+ S|°£<µ£/-2][†";}
    40% {content: ">120_|3<+ S|D£[|_|1λ®1+";}
    50% {content: "8|?0_|£©'][' S|²3©µ1^|?l†°/";}
    60% {content: "s®°_|€©† Sp&<|_|£∂|Z|";}
    70% {content: "#2ø_|£[† Sp£(µ£^|Z][†'/*&";}
    80% {content: "%1²*_|£[+ S|²€©[_]1/-\|?|'";}
    90% {content: "(|2[]_|&©'][' S|>3<[_]1^2'";}
    100% {content:"=?9_|€<7 S9€[[_]1/-\я][+j^";}

}

.mBreak{

    padding-top: 0px;

}

.projectContainer{

    display:flex;
    align-items:start;
    justify-content:center;
    max-width: 100%;
    margin-left: 2%;
    margin-right: 2%;
    


}
.projectContainer section{

    background: linear-gradient(#3f3f3f, #2d2d2d) no-repeat center center; 
    border-color: #46954a; 
    border-style:solid; 
    box-shadow: 0 0 5px 4px #224824;

    min-height: 220px;
    height: auto; 
    width: 50%;
    

    margin: 1%;
    
    transition: 0.1s;

}

.projectContainer section:hover{
    transform: scale(110%);
}


.oldContainer{

    display:flex;
    align-items:start;
    justify-content:center;
    place-self: center center;
    max-width: 40%;
    margin-left: 2%;
    margin-right: 2%;
    


}
.oldContainer section{

    font-size: 8pt;
    line-height: 8pt;
    color: #b4b4b9;

    background: linear-gradient(#3f3f3f, #2d2d2d) no-repeat center center; 
    border-color: #4e7e60; 
    border-style:solid; 
    box-shadow: 0 0 5px 4px #31523d;

    min-height: 110px;
    height: auto; 
    width: 50%;
    

    margin: 1%;
    
    transition: 0.1s;

}

.oldContainer section:hover{
    transform: scale(105%);
}


.specPanel a{

    user-select: none;
    color: #eeffff;
    padding: 10px;
    background: rgb(49, 116, 107);
    font-size: 25pt;
    font-family:monospace;
    border: turquoise solid 5px;
    margin: 10px;

}

.gildedPanel a{

    user-select: none;
    color: #eeffff;
    padding: 10px;
    background: rgb(185, 187, 97);
    font-size: 25pt;
    font-family:monospace;
    border: #e9ce36 solid 5px;
    margin: 10px;

}

.centeredList{

    text-align: center;

}

.centeredList ol{

    display: inline-block; text-align: left;

}

.centeredList ul{

    display: inline-block; text-align: left;
    
}

.redacted{

    font-family: Redacted;
    pointer-events: none;
    user-select: none;

}



@media (min-width:750px) {
    .galleryContainer img{
        max-width: 40%;
    }
}

@media (max-width:750px){
    .jImg{
        max-width: 90%;
    }
    .jImgNB{
        max-width: 90%;
    }

    .specImg{
        max-width: 90%;
    }

    .mBreak{
        padding-top: 70px;
    }




    .navBar a{
    
        padding: 18px 4px;
    
    }
    .navBar ion-icon{
        font-size: 35px;
        margin-top: 25%;
        pointer-events: none;
    
    }
    .navBar p{
    
        padding: 18px 4px;
    
    }
    .specTxt{
        padding: 18px 4px;
    }

    .projectContainer{
        display:grid;

    }
    .projectContainer section{
        min-width: 90%;
        align-self: center;
        justify-self: center;
    }






}