:root {
    --main-bg: #000;
    --primary-bg: #0c0c0c;
}

html {
    height: 100vh;
    background: var(--main-bg);
}
* {
    color:  #fff;
    font-family: "Chakra Petch", sans-serif;
}


body {
    background: var(--main-bg);
    height: 100%;
    margin: 0;
}

.layout {
    display: grid;
    grid-template-columns: auto 1fr;
    height: 100%;
}


aside {
    background: var(--primary-bg);
    overflow: auto;
}

aside :where(h2,h3,h4) {
    margin: 0;
}


main {
    overflow: auto;
}


.profile--header {
    width: 100%;
    height: 280px;
    position: sticky;
    top: 0;
}
.profile--header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile--header div {
    position: absolute;
    inset: auto 0 0 0;
    background-color: rgba(39, 67, 39, 0.639);
    padding: 1rem;
}


.profile--body {
    padding: 2rem;
}

.profile--body dl {
    /* padding: 1rem 2rem; */
}

.profile--body dt {
    color: rgb(169, 207, 120);
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.profile--body dd {
    margin-left: 2rem;
}
.profile--body dd :where(strong){
    color: #bdbdbd;
}

.profile--body dd :where(.label,small,small *){
    color: #b7b3b3;
}



.profile--body dd:has(.label){
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 15px;
}

.profile--body .hometown {
    display: flex;
    align-items: center;
    gap: 5px;
}

.projects--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(283px,1fr));
    gap: 1px;
    /* padding: 0 1rem 1rem; */
}

.project--cell{
    padding: 0rem 2rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: black;
    display: grid;
    grid-template-rows: repeat(3,auto);
    align-items: start;
    transition: .3s ease;
}

.project--title {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.project--title > span {
}
.project--title small {
    font-size: .875rem;
    color: greenyellow;
    font-size: .875rem;
}

a.preview {
    text-decoration: none;
    background-color: rgb(199, 143, 74);
    padding: .5rem 1.05rem;
    font-size: .875rem;
    border-radius: 20px;
    float: right;
    /* opacity: .5; */
    font-size: clamp(.625rem,2vw,.725rem);
    transition: .3s ease;
    display: flex
;
    gap: 5px;
    align-items: center;
}

.project--cell:hover{
    background: #38419F;
    background: linear-gradient(0deg,rgba(56, 65, 159, 1) 0%, rgba(66, 76, 189, 1) 44%, rgba(107, 119, 255, 1) 100%) !important;
}

.project--cell:hover a.preview {
    /* opacity: 1; */
}

.project--desc {
    color: #cec8c8;
    font-size: clamp(.725rem,2vw,.925rem);
    line-height: 1;
    margin-top: 0;
    opacity: 0;
    transition: .3s ease;
}
.project--cell:hover .project--desc {
    opacity: 1;
    color: #dfdfdf;

}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tag {
    background: #2f5a5c;
    padding: .25rem .75rem;
    /* border: 1px solid; */
    font-size: clamp(.625rem,2vw,.825rem);
    color: #dad8e0;
}

.tech--stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;  
    align-items: center;
    padding: 10px 0;
}

.tech--stack img {
    --img-size: clamp(10px,10vw,45px);
    width: var(--img-size) !important;
    height: var(--img-size) !important;
}



@media (max-width: 768px) {
    .layout {
        grid-template-columns: unset;
        
    }

    aside {
        overflow: unset;
    }
    main {
        overflow: unset;
    }

    .projects--grid {
        grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    }
}