@font-face {
    font-family: LilitaOne;
    src: url("./fonts/LilitaOne-Regular.ttf");
}

.e{
    position: absolute;
    top: 90%;
    font-size: 5em;
    color: red;
}

*{
    margin: 0;
    padding: 0;
}


body {
    background-image: url("./imgs/backgrounds/1920x1080.png");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #ffffff;
}
@media only screen and (max-width: 1270px) {
    body{
        background-image: none !important;
        background-color: black;
    }
    
}

a {
    color: #ffffff;
}

a:visited {
    color: #ffffff;
}

a:hover {
    color: #2bff00;
}


@media only screen and (max-width: 1270px) {
    .holder {
        padding-left: 2.5vw;
        padding-right: 2.5vw;
        left: 0 !important;
        translate: 0 !important;
        position: relative !important;
        width: fit-content !important;
        height: fit-content;
    }
}

.holder{
    left: 50%;
    translate: -50%;
    position: absolute;
    width: 50vw;
    height: fit-content;
}

.title {
    font-family: LilitaOne;  /*Probably gonna change this to a svg*/
    font-size: 5em;
    margin-bottom: 5vh;
}

h2 {
    font-family: LilitaOne;
}

p {
    font-family: Arial;
    font-size: 1em;
}

/* Project */

.projects-headline {
    margin-top: 5vh;
}

.project {
    margin-top: 2.5vh;
    cursor: pointer;
}

.project-a{
    text-decoration: none;
}

.project-a:hover .project-holder {
    border-color: #2bff00;
    color: #ffffff;
}

.project-holder {
    margin-top: 0.5vh;
    border: 0.35vh solid #ffffff;
    border-radius: 1vh;
    padding: 1vh 1vw 1vh 1vw;
    display: grid;
    grid-template-columns: 80% 20%;
}

.project-description {
    display: block;
    align-self: center;
}

.project-image {
    display: block;
    margin-left: auto;
}

/* About Me */
.frame{
    border: 0.35vh solid #ffffff;
    border-radius: 1vh;
}

.text{
    padding: 1vh 1vw 1vh 1vw;
}

.no-unserline {
    text-decoration: none;
}

.goback {
    position: sticky;
    top: 0;
    margin-top: 10vh;
    z-index: 10;
    border: 0.35vh solid #ffffff;
    border-radius: 1vh;
    background-color: transparent;
    padding: 1vh 1vw 1vh 1vw;
    cursor: pointer;
    color: #ffffff;
    font-size: 2em;
}

.goback:hover {
    color:#2bff00;
    border-color: #2bff00;
}

/* Socials */

@media only screen and (max-width: 1270px) {
    .socials-holder {
        display: block !important;
        padding-left: 2.5vw;
        padding-right: 2.5vw;
        left: 0 !important;
        translate: 0 !important;
        position: relative !important;
        width: fit-content !important;
        height: fit-content;
    }
}

.socials-holder {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-top: 5vh;
}

.socials-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    border: 0.35vh solid #ffffff;
    border-radius: 1vh;
    cursor: pointer;
}


.social-img {
    grid-row: span 2;
    width: 90px;
    height: 90px;
}

.social-header, .social-description {
    margin: 0;
}

.a-socials {
    color: #ffffff;
    text-decoration: none;
}

.a-socials:hover .socials-container{
    border-color: #2bff00;
}