/*-----------------------------------*\
#CUSTOM PROPERTY
\*-----------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');

:root {

    --yellow: rgb(233 196 106);
    --cyan: rgb(42 157 143);
    --light-blue: rgb(154 209 234);
    --orange: rgb(244 162 97);
    --dark-blue: rgb(38 70 83);
    --black: rgb(0 0 0);
    --lightgray: rgb(231 229 228);
    --dark-pink: rgb(188 71 73);
    --light-pink: rgb(242 232 207);
    --green-01: rgb(167 201 87);
    --green-02: rgb(106 153 78);
    --green-03: rgb(56 102 65);

}

/*-----------------------------------*\
#RESET
\*-----------------------------------*/

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html { font-family: "Afacad", sans-serif; }

body {
    margin: 0 auto;
    color: var(--black);
    background-color: var(--lightgray);
    padding-block: 1.8rem;
    padding-inline: 20px;
    height: 100%;
}

button {
    background: none;
    border: none;
    font-family: inherit;
    color: inherit;
    font-size: inherit;
}

a {
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}

a, li, button, img, span { cursor: pointer; }

li { list-style: none; }

.bento-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 1000px) {
    .bento-grid,
    .projects-grid {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        grid-template-rows: repeat(9, minmax(0, 1fr));
        height: 90vh;

    }

    .grid-wrapper { padding: 0; }
}

.grid-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    border: 1px solid var(--dark-blue);
    transform: scale(0);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

.banner {
    background-color: var(--dark-blue);
    color: var(--yellow);
    font-weight: 600;
    font-size: x-large;
    padding: .75rem 1.25rem;
    text-align: center;
    margin-top: 1rem;
}

/*-----------------------------------*\
#PORTFOLIO PAGE
\*-----------------------------------*/

.wrapper {
    background-color: var(--yellow);
    padding-block: 2.5rem;
    display: grid;
    place-content: center;
    gap: 1.25rem;
}

.name{
    background-color: var(--dark-blue);
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    padding: .75rem 1.25rem;
    text-align: center;
}

.profession {
    background-color: var(--dark-blue);
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    padding: .75rem 1.25rem;
    text-align: center;
}

.name { font-size: xx-large; }

.profession { font-size: medium; }

.desciptive-text {
    padding-inline: 1rem;
    padding-block-end: 1.5rem;
    color: var(--dark-blue);
    font-size: 1rem;
}

.cursor {
    width: 1.5rem;
    height: .25rem;
    display: inline-block;
    background-color: var(--cyan);
    margin: 0 .5rem;
}

.projects-wrapper,
.resume-wrapper,
.eduaction-wrapper,
.documents-wrapper,
.contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    position: relative;
}

.projects-wrapper div { margin-bottom: 1rem; }

.projects-wrapper div .auto-type-projectText { color: var(--lightgray); }

.projects-wrapper,
#resume { background-color: var(--cyan); } 

#project-svg { 
    background-color: var(--orange); 
}

#project-svg .banner {
    width: 35%;
    margin: 1rem auto;
}

.resume-wrapper svg { width: 70%; }

#education { background-color: var(--light-blue); }

#certificates { 
    background-color: var(--cyan); 
    display: none;
}

.documents-wrapper svg { margin: -4rem 0 -1rem; }

#contact { background-color: var(--light-blue); }

.contact-wrapper svg {
    width: 100%;
    margin-top: -2rem;
}

.socials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
    margin-top: -1.5rem;
}

.socials li {
    padding: 1rem 1.25rem ;
    border: 1px solid var(--dark-blue);
    font-size: xx-large;
}

.socials li:nth-child(2),
.socials li:nth-child(3),
.socials li:nth-child(6)  {
    background-color: var(--yellow);
    color: var(--cyan);
}

.socials li:nth-child(1),
.socials li:nth-child(4),
.socials li:nth-child(5)  {
    background-color: var(--dark-blue);
    color: var(--dark-pink);
}

#svg {  
    background-color: var(--orange);
}

.svg-wrapper svg {
    width: 50%;
    margin: 0 5rem;
}

@media (min-width: 1000px) {
    #wrapper {
        grid-column: 4 / 8;
        grid-row: 4 / 7;
    }

    .name span { font-size: 2.5rem; }

    .profession span { font-size: larger }

    #projects {
        grid-column: 1 / 4;
        grid-row: 4 / 10;
    }

    #projects .banner {
        position: absolute;
        top: 13rem;
        left: 0.5rem;
    }

    .projects-wrapper svg {
        width: 100%;
        height: 40rem;
        margin: -10rem 0 0;
    }

    #project-svg {
        display: block;
        grid-column: 1 / 6;
        grid-row: 1 / 4;
        position: relative;
    }

    #project-svg .banner {
        position: relative;
        top: 20px;
        left: -5px;
    }

    .desciptive-text { padding: 3.5rem 1rem 0; }

    #education {
        grid-column: 7 / 10;
        grid-row: 1 / 4;
    }

    .eduaction-wrapper .banner {
        position: absolute;
        top: 0;
        left: -10px;
    }

    .eduaction-wrapper svg {
        width: 76%;
        margin-top: 1.7rem;
    }

    #resume {
        grid-column: 8 / 10;
        grid-row: 4 / 8;
    }

    .resume-wrapper button {
        position: absolute;
        bottom: 1rem;
        left: -10px;
    }

    .resume-wrapper svg {
        width: 100%;
        margin: 0;
    }


    #certificates {
        display: block;
        grid-column: 6 / 7;
        grid-row: 1 / 4;
    }

    .documents-wrapper .banner {
        position: absolute;
        left: -5px;
    }

    #certificates .svg-wrapper svg { 
        width: 100%;
        margin: 2.5rem auto;
        text-align: center;

    }

    #contact {
        grid-column: 4 / 8;
        grid-row: 7 / 10;
    }

    #svg {
        grid-column: 8 / 10;
        grid-row: 8 / 10;
        display: block;
        height: 100%;

    }

    .svg-wrapper svg {
        width: 60%;
        margin-top: -15px;
        margin-left: 3.5rem;
    }

    .contact-wrapper { flex-direction: row; }

    .wrapper, 
    .svg-wrapper,
    .resume-wrapper,
    .projects-wrapper,
    .documents-wrapper,
    .contact-wrapper {
        height: 100%;
        padding: 0;
    }

    .contact-wrapper svg {
        width: 45%;
        margin-top: -1rem;
    }

    .socials { 
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        padding-right: 1rem;
    }

    .socials li:nth-child(3) {
        background-color: var(--dark-blue);
        color: var(--dark-pink);
    }

    .socials li:nth-child(4) {
        background-color: var(--yellow);
        color: var(--cyan);
    }
}



/*-----------------------------------*\
#PORTFOLIO PAGE
\*-----------------------------------*/

.container {
    background-color: var(--green-03);
    padding: 2.5rem;
    display: grid;
    place-content: center;
    gap: 1.25rem;
}

.title {
    background-color: var(--light-pink);
    color: var(--dark-pink);
    font-weight: 600;
    letter-spacing: 1px;
    padding: .75rem 1.25rem;
    text-align: center;
    margin: 0 auto;
}

.text-box {
    background-color: var(--light-pink);
    color: var(--dark-pink);
    font-weight: 600;
    letter-spacing: 1px;
    padding: .75rem 1.25rem;
    text-align: center;
    margin: 0 auto;    
}

.figure {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    height: 15rem;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: var(--lightgray);
    opacity: .5;
}

.project-title { 
    background-color: var(--dark-pink);
    padding: .75rem 1.25rem;
    color: var(--lightgray);
    position: absolute;
    z-index: 2;
    top: 50%;
}

#project-1 .figure {
    background-image: url(/assets/images/Glowing.jpg);
}

#project-2 .figure {
    background-image: url(/assets/images/Sunnside\ Agency.png);
}

#project-3 .figure {
    background-image: url(/assets/images/Space\ Tourism.png);
}

#project-4 .figure {
    background-image: url(/assets/images/Sneaker\ Factory.png);
}

#project-5 .figure {
    background-image: url(/assets/images/Bookmark\ Page.jpg); 
}

#project-6 .figure {
    background-image: url(/assets/images/Kanban\ Board.png); 
    background-size: cover;
    background-position: 0 0;
}

#project_svg { display: none; }

@media (min-width: 1000px) {

    .container {
        padding: 0;
        height: 100%;
    }

    .title { font-size: 2.5rem; }

    .text span { font-size: larger }

    #project-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 7;
        background-color: var(--green-02);
    }

    #project-1 .figure { height: 35rem; }

    #project-2 {
        grid-column: 7 / 10;
        grid-row: 1 / 4;
        background-color: var(--dark-pink);
    }

    #project-2 .figure {
        background-position: 0 20%;
        height: 100%;
    }

    #project-3 {
        grid-column: 3 / 8;
        grid-row: 7 / 10;
        background-color: var(--dark-pink);
    }

    #project-3 .figure { height: 100%; }


    #project-4 {
        grid-column: 1 / 3;
        grid-row: 7 / 10;
        background-color: var(--green-01)
    }

    #project-4 .figure { height: 100%; }

    #project-5 {
        grid-column: 8 / 10;
        grid-row: 4 / 8;
        background-color: var(--green-02);
        justify-content: flex-end;
    }

    #project-5 .figure { height: 35rem; }

    #project-6 {
        grid-column: 4 / 7;
        grid-row: 1 / 4;
        background: var(--green-01);
    }

    #project_svg {
        grid-column: 8 / 10;
        grid-row: 8 / 10;
        background: var(--dark-pink);
        display: block;
    }

}