@import url('nav.css');
@import url('default.css');
@import url('scrollbar.css');
@import url('cards.css');

* {
    margin: 0;
    padding: 0;
}

body {
    background: #181818;
}


li,
.p-text {
    font-size: 20px;
}

li, 
.p-text,
.p-card-text,
.h2-card, 
.copyright {
    font-family: var(--roboto);
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
    color: white;
}

p, 
li, 
h1, 
h2 {
    color: white;
}

.h1-h2 {
    font-family: var(--roboto);
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: row;
    align-items: end;
    align-items: center;
    text-align: center;
    font-size: 50px;

    gap: 25px;
}

a {
    color: white;
    text-decoration: none;
}

.margin-t {
    /* margin-top: 35vh; */
}

.margin-b {
    margin-bottom: 20vh;
}

/* Background image */

.bg-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    position: fixed;
    z-index: -1;
}

.bg-container::after {
    background: #21072778;
    position: absolute;
    content: '';
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.bg-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/* End background image */




.scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 100%;
    gap: 500px;
    overflow: auto;
}

.section {
    max-width: 1000px;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-headline-image {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid white;
}

.logo-icon {
    z-index: 2;
    position: relative;
    height: 50px;
}

.portrait {
    border-radius: 100%;
    max-width: 250px;
    max-height: 250px;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.section-text {
    /* max-width: 750px; */
    display: flex;
    flex-direction: column;
    gap: 25px;
}




.icons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.connect-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icon-links {
    display: flex;
    align-items: center;
    max-height: 40px;
    gap: 1vw;
}

.icon-text {
    font-size: 16px;
    font-family: var(--roboto);
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
    width: 100%;
}

.icon-links a {
    border-radius: 50%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    max-height: 40px;
}

.git-background {
    background: #EABEE6;
    max-height: 40px;
    border-radius: 100%;
    border: 1px solid #EABEE6;
}



footer {
    height: 50px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.20);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    backdrop-filter: blur(20px);
}

.copyright {
    font-size: 14px;
}

.hide {
    display: none;
}






@media screen and (max-width: 1091px) { 
    .portrait { 
        max-height: 125px;
        max-width: 125px;
    }

    .h1-h2{
        font-size: 35px;
    }
    li,
    .p-text {
        font-size: 18px;
    }
}


@media screen and (max-width: 768px) { 
    ::-webkit-scrollbar {
        display: none;
    }
    .hide {
        display: block;
    }
    .remove{
        display: none;
    }
    .section {
        height: 100%;
    }
    .margin-t{
        margin-top: 15vh;
    }
    .margin-b {
        margin-bottom: 10vh;
    }
    .scroll {
        gap: 150px;
    }
    .h1-h2,
    .h2-card{
        font-size: 20px;
    }
    .section-headline-image {
        flex-direction: column-reverse;
        align-items: center;
    }
    ul,
    .section-headline-image {
        gap: 20px;
    }
    .logo-container img {
        max-height: 40px;
    }
    
    li,
    .p-text,
    .p-card-text {
        font-size: 16px;
    }

    .logo-icon {
        height: 25px;
    }

    .padding {
        padding: 20px;
    }
    
    .px {
        padding: 0 20px;
    }
    
    .py {
        padding: 20px 0;
    }
    
    .pl {
        padding-left: 20px;
    }
    
    .pr {
        padding-right: 20px;
    }
    
    .pt {
        padding-top: 20px;
    }
    
    .pb {
        padding-bottom: 20px;
    }

    :root {
        --header-height: 50px;
    }

    .container::-webkit-scrollbar {
        display: none;
    }
}


@media screen and (max-width: 500px) {
    .project-card-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    .scroll {
        gap: 75px;
    }
}