@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/jetbrainsmono/v13/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVgaY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }  
html{
    scroll-behavior: smooth;
}
body{
    font-family: "JetBrains Mono";
    margin-left: 0;
    margin-right: 0;
    background-color: #282c34;
}
footer{
    background-color: #141414;
    color: white;
    z-index: 3;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: max-content;
    font-size: 1vw;
    padding: 3% 1% 2% 1%;
}
footer .credits{
    right: 50%;
    transform: translate(50%);
    bottom: 0;
    position: absolute;
    padding-bottom: 2%;
    width: max-content;
}
footer .social-links{
    right: 0;
    font-size: 2.5vw;
    bottom: 2vh;
    position: absolute;
    padding-right: 2%;
    color: white;
}
a{
    text-decoration: none;
    color: inherit;
}
a:hover{
    -webkit-animation:text-shadow-pop-br .6s both;
    animation: text-shadow-pop-br 0.6s both;
}
main{
    color: #ABB2BF;
}
main .foreground-code-writing{
    z-index: 0;
    left:1ch;
    background-color: #282c34;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60rem;
    width: 100%;
    position: fixed;
}
main .sidebar-information{
    visibility: initial;
    z-index: 2;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30vw;
    background-color: #141414;
    filter:drop-shadow(-5px -5px 10px #080706);
    filter:(5px 5px 10px #1e1d1b);
    height: 100%;
}
main .sidebar-information h1{
    text-align: center;
}

main .sidebar-information .selfie{
    position: absolute;
    top: 30vh;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15vw;
    height: auto;
    border-radius: 80% 20% 80% 20% / 40% 56% 44% 60%;
    background: #131211;
    filter:drop-shadow(-5px -5px 10px #080707);
    filter:(5px 5px 10px #1e1d1b);
    margin-bottom: 10px;
}
main .sidebar-information .sidebar-links{
    position: absolute;
    top: 50%;
    left: 25%;
    line-height: 3.5ch;
}
main .parallax{
    z-index: 1;
    position: relative;
    top: 50rem;
    background-size: cover;
    border: 0;
    padding: 0;
    margin: 0;
}
main .parallax .spikes{
    z-index: 1;
    background-image: url(layered-peaks-haikei.svg);
    background-size: cover;
    padding-bottom: 10rem;
    padding-top: 50rem;
}
main .parallax .spikes-bottom{
    z-index: 1;
    background-image: url(layered-peaks-haikei\ \(2\).svg);
    background-size: cover;
    padding-bottom: 0;
    padding-top: 40rem;
}
main .about-me{
    z-index: 2;
    padding-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    align-items: center;
    align-self: center;
    align-content: center;
    background-color: #101010;
}
main  h2{
    width: max-content;
    align-items: center;
    align-self: center;
    align-content: center;
    margin: 1ch;
    font-size: 4ch;
}
main h3{
    text-align: start;
    margin: 2ch;
    font-size: 2ch;
    width: 63%;
}
main .projects{
    padding-top: 2rem;
    padding-bottom: 20rem;
    z-index: 0;
    background-color: #101010;
    align-items: center;
    align-self: center;
    align-content: center;
    position: relative;
}

main .projects-cards{
    max-width: 70%;
    overflow-x: hidden;
    overflow-y: hidden;
    display: -webkit-inline-box;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    cursor: grab;
}

main .projects .card{
    height: 30em;
    width: 25em;
    border-radius: 15%;
    background-color: #131211;
    margin: 1rem;
    z-index: -1;
}

main .projects button{
    height: 30em;
    width: 25em;
    border-radius: 15%;
    background-color: #131211;
    margin: 1rem;
    z-index: -1;
    font-family: "JetBrains Mono";
    font-size: 16px;
    background-color: transparent;
    color: #ABB2BF;
    border-style: hidden;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    border-radius: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}
main .projects .card:hover .content {
    transform: translateZ(12px);
  }
main .projects-card .active {
    background: rgba(255,255,255,0.3);
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1);
}



main .projects .card h3{
    padding-top: 2ch;
    padding-left: 2ch;
    width: fit-content;
    z-index: 1;
}

main .projects .card img{
    height: 15rem;
    width: 20rem;
    object-fit: contain;
    object-position: 70% 0;
    display: flex;
    transform: translate(15%);
    z-index: 2;
    opacity: 1;
    
}
main .projects .projects-cards .card .devicon-c-plain{
    z-index: 0; 
    font-size: 25rem;  
    top: 3rem; 
    opacity: 0.05; 
    position: relative;
}

main .projects .projects-cards .card .devicon-java-plain{
    z-index: 0; 
    font-size: 25rem;  
    top: 3rem; 
    opacity: 0.05; 
    position: relative;
}

main .projects .card .card-content{
    position:relative; 
    top:-25rem;
}

main .projects .card .devicon-github-original{
    font-size: 2.5rem;
    position: relative;
    top: auto;
    bottom: 1rem;
    right: -21rem;
    z-index: 1;
    
}

main .projects .card h4{
    display: -webkit-box;
    transform: translateY(-40%);
    padding-left: 2ch;
    padding-right: 2ch;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    z-index: 1;
    
}
input{
    font-family: "JetBrains Mono";
    background-color: #282c34;
    color: #E6C07B;
    border-style: hidden;
    box-shadow: none;
    text-shadow: none;
    outline: none;
    min-width: 1ch;
    width: 1ch;
}

.button-sidebar{
    font-family: "JetBrains Mono";
    font-size: 16px;
    background-color: transparent;
    color: #ABB2BF;
    border-style: hidden;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.button-string-highlight{
    color: #E6C07B;
    font-family: "JetBrains Mono";
    font-size: calc(0.5rem + 0.5vw);
    background-color: transparent;
    border-style: hidden;
    box-shadow: none;
    text-shadow: none;
    width: calc((fit-content)-1ch);
    cursor: pointer;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.button-var-highlight{
    color: #56B6C2;
    font-family: "JetBrains Mono";
    font-size: calc(0.5rem + 0.5vw);
    background-color: transparent;
    border-style: hidden;
    box-shadow: none;
    text-shadow: none;
    width: calc((fit-content)-1ch);
    cursor: pointer;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
button:hover{
    animation: text-shadow-pop-br 0.6s both;
}
/*
    text colors section:
*/
.var-highlight {
    color: #56B6C2
}

.string-highlight {
    color: #E6C07B;
    font-family: "JetBrains Mono";
}

.number-highlight {
    color: #c678DD
}

.sintax {
    color: #E06c75
}

.method {
    color: #98C379
}

.methodsDiv{
    color: #ABB2BF;
    font-size: calc(0.5rem + 0.5vw);
}

.ENUM {
    color: #f59762
}
.hint{
    background-color: #24282f;
    font-size: calc(0.5rem + 0.5vw);
    border-radius: 0%;
    text-align: center;
    color: #ABB2BF;
}
.comment{
    color: #7f848e
}


/*
    Animations section:
*/

#typewriter {
    font-size: calc(0.5rem + 0.5vw);
    margin: 0;
}
#typewriter:after {
    content: "|";
    -webkit-animation: blink 500ms linear infinite alternate;
            animation: blink 500ms linear infinite alternate;
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}/*# sourceMappingURL=main.css.map */

@keyframes text-shadow-pop-br {
    0% {
      text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
      transform: translateX(0) translateY(0);
    }
    100% {
      text-shadow: 1px 1px #555555, 2px 2px #555555, 3px 3px #555555, 4px 4px #555555, 5px 5px #555555, 6px 6px #555555, 7px 7px #555555, 8px 8px #555555;
      transform: translateX(-8px) translateY(-8px);
    }
  }
  

/*
  Code for mobile
*/

@media only screen and (max-width: 700px) {

    main .sidebar-information{
        width: 100%;
        background-color: rgba(20, 20, 20, 0.7);
        z-index: 1;
        font-size: 0.8rem;
    }

    main .sidebar-information .button-sidebar{
        font-size: 0.8rem;
    }
    main .sidebar-information .selfie{
        width: 30vh;
    }

    main .sidebar-information .sidebar-links{
        position: absolute;
        top: 50%;
        left: 25vw;
        line-height: 2ch;
    }
    main .projects{
        padding-top: 2rem;
        padding-bottom: 20rem;
        z-index: 1;
        background-color: #101010;
        align-items: center;
        align-self: center;
        align-content: center;
    }
    main .projects-cards{
        max-width: 100%;
        overflow-x: scroll;
    }
    main .projects .card{
        height: 25em;
        width: 20em;
        border-radius: 15%;
        background-color: #131211;
        margin: 1rem;
        z-index: 2;
    }

    main .projects .projects-cards .card .devicon-c-plain{
        z-index: 0; 
        font-size: 20rem;  
        top: 3rem; 
        opacity: 0.05; 
        position: relative;
    }

    main .projects .projects-cards .card .devicon-java-plain{
        z-index: 0; 
        font-size: 20rem;  
        top: 3rem; 
        opacity: 0.05; 
        position: relative;
    }
    
    main .projects .card .card-content{
        position:relative; 
        top:-20rem;
    }
    
    main .projects .card .devicon-github-original{
        right: -16rem;
    }
    
    
    main .projects .card h3{
        padding-top: 2ch;
        padding-left: 2ch;
    }
    
    main .projects .card img{
        height: 10rem;
        width: 15rem;
        object-fit: contain;
        object-position: 70% 0;
        display: flex;
        transform: translate(15%);
    }
    
    main .projects .card h4{
        display: -webkit-box;
        transform: translateY(-15%);
        padding-left: 2ch;
        padding-right: 2ch;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        
    }
    footer{
        font-size: 1.5vw;
        padding: 10% 1% 2% 1%;
    }

    footer .credits{
        bottom: 10%;
        font-size: 0.4rem;
    }

    footer .social-links{
        bottom: 5%;
        font-size: 1rem;
    }

    main h3{
        margin-left: 2ch;
        font-size: 1.5ch;
        width: fit-content;
    }
    
    main .sidebar-information button{
        font-size: 0.8rem;
    }

    
}

@media only screen and (max-width: 1280px) {
    main .projects-cards{
        overflow-x: scroll;
    }
}