@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,100..900;1,100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Unbounded:wght@200..900&display=swap');

:root {
    --heading-text:"Unbounded", serif;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: var(--heading-text);
    background-color: #fff; /* f9f1e1 fcf6ec*/
    color: #000;
}

.container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    height: 95vh;
    gap: 15px;
    padding: 15px 10px 0px 10px;
    width: 98vw;
    margin: 0 auto;
}

.box {
    background-color: #fff;
    padding: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease, transform 0.3s ease;
    position: relative;
    border: #000 solid;
    box-shadow: -4px -4px 0px #000;
}

.box a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.clickable-box:hover {
transform: translateX(10px);
box-shadow: -3px -3px 0px #000;
}

.name { grid-column: 1 / 5; grid-row: 1 / 3; font-size: 2vw; background-color: #ffc64c; }

.arrow {
    grid-column: 5/ 6;
    grid-row: 1 / 3;
    color:#000;
    font-size: 10vw;
    display: flex; /*added for the "simple" arrow switch*/
    align-items: center;
    justify-content: center;
    text-align: center;
    /*transition: transform 0.3s ease; for the rotating arrow action*/
}

.arrow-right { display: inline; }
.arrow-down { display: none ; }

.title { grid-column: 6 / 9; grid-row: 1 / 3; font-size: 1.3vw; background-color: #4ecdc4; }
.about { grid-column: 1 / 4; grid-row: 3 / 5; font-size: 1.5vw; background-color: #ff6b6b; } 
.project1 { grid-column: 4 / 6; grid-row: 3 / 5; font-size: 1.5vw; background-color: #FF9F63; cursor: pointer;} /*ff9f63 f4a154*/
.project2 { grid-column: 6 / 9; grid-row: 3 / 5; font-size: 1.5vw; background-color: #f3769a; cursor: pointer}
.project3 { grid-column: 1 / 3; grid-row: 5 / 7; font-size: 1.5vw; background-color: #783ddf; color: #f8f8f8; cursor: pointer;} /*783ddf 5f27cd 9723c9*/
.project4  { grid-column: 3 / 5; grid-row: 5 / 7; font-size: 1.5vw; background-color: #1dd1a1; cursor: pointer; }
.project5 { grid-column: 5 / 8; grid-row: 5 / 7; font-size: 1.5vw; background-color: #54a0ff; padding:0; }
.star { grid-column: 8 / 9; grid-row: 5 / 7; color: #000; font-size: 10vw; transition: transform 1s ease-in-out; } 
.flower { grid-column: 1/ 2; grid-row: 7/ 9; color: #000; font-size: 10vw; transition: transform 1s ease-in-out; } 
.contact { grid-column: 2 / 4; grid-row: 7 / 9; font-size: 1.5vw; background-color: #ff9ff3; }
.skills { grid-column: 4 / 6; grid-row: 7 / 9; font-size: 1.5vw; background-color: #93C5FD; }
.social-1 { grid-column: 6 / 7; grid-row: 7 / 9; background-color: #ef6f68 ; font-size: 1.5vw; }
.social-2 { grid-column: 7 / 8; grid-row: 7 / 9; background-color: #F9A8D4; font-size: 1.5vw; }
.social-3 { grid-column: 8 / 9; grid-row: 7 / 9; background-color: #5eead4; font-size: 1.5vw; }


.tippy-content img {
    width: 250px;
    height: 180px;
    color: #ef6f68
}

.tippy-box[data-theme~='tomato'] {
    background-color: tomato;
    color: yellow;
}
.social-icon a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
}

.social-icon i {
    font-size: 2em;
    margin-bottom: 0.2em;
}

.social-icon span {
    font-size: 1em;
}

.social-icon:hover {
    color:#fff;
}

.star:hover { color: #93C5FD; transform: rotate(360deg); }
.flower:hover { color: #1dd1a1; transform: rotate(360deg); }


.star, .flower, .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    color: inherit;
}

        /* Media Queries */
        @media screen and (max-width: 1024px) {
            .container {
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: repeat(14, auto); /* Changed to auto for flexibility old > grid-template-rows: repeat(14, 1fr);*/

            }
            .name { grid-column: 1 / 4; grid-row: 1 / 2; font-size: 4vw; }
            .arrow { grid-column: 4 / 5; grid-row: 1 / 2; font-size: 10vw; /* transform: rotate(90deg); for the rotating arrow action */}
            .title { grid-column: 1 / 5; grid-row: 2 / 3; font-size: 3vw; }
            .about { grid-column: 1 / 5; grid-row: 3 / 4; font-size: 2.5vw; }
            .project1 { grid-column: 1 / 3; grid-row: 4 / 6; font-size: 2.5vw; }
            .project1 { grid-column: 1 / 3; grid-row: 4 / 6; font-size: 2.5vw; }
            .project2 { grid-column: 3 / 5; grid-row: 4 / 6; font-size: 2.5vw; }
            .project3 { grid-column: 1 / 3; grid-row: 6 / 8; font-size: 2.5vw; }
            .project4 { grid-column: 3 / 5; grid-row: 6 / 8; font-size: 2.5vw; }
            .project5 { grid-column: 1 / 5; grid-row: 8 / 10; padding: 20px; font-size: 2.5vw;} 
            .star { grid-column: 1 / 2; grid-row: 10 / 11; font-size: 10vw; }
            .flower { grid-column: 2 / 3; grid-row: 10 / 11; font-size: 10vw; }
            .contact { grid-column: 3 / 5; grid-row: 10 / 12; font-size: 2.5vw; }
            .skills { grid-column: 1 / 3; grid-row: 12 / 14; font-size: 2.5vw; }
            .social-1 { grid-column: 3 / 4; grid-row: 12 / 13; font-size: 2.5vw}
            .social-2 { grid-column: 4 / 5; grid-row: 12 / 13; font-size: 2.5vw}
            .social-3 { grid-column: 3 / 5; grid-row: 13 / 14; font-size: 2.5vw} /* for a wider item */
            
            .arrow-right { display: none; }
            .arrow-down { display: inline; }
        } 

        @media screen and (max-width: 768px) {
            .container {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(17, auto);
                height: auto;
                min-height: 100vh;
            }
            .name { grid-column: 1 / 2; grid-row: 1 / 2; font-size: 5vw; }
            .arrow { grid-column: 2 / 3; grid-row: 1 / 2; font-size: 14vw; }
            .title { grid-column: 1 / 3; grid-row: 2 / 3; font-size: 3.5vw; }
            .about { grid-column: 1 / 3; grid-row: 3 / 4; font-size: 3vw; }
            .project1 { grid-column: 1 / 2; grid-row: 4 / 6; font-size: 3vw; }
            .project2 { grid-column: 2 / 3; grid-row: 4 / 6; font-size: 3vw; }
            .project3 { grid-column: 1 / 2; grid-row: 6 / 8; font-size: 3vw; }
            .project4 { grid-column: 2 / 3; grid-row: 6 / 8; font-size: 3vw; }
            .project5 { grid-column: 1 / 3; grid-row: 8 / 10; font-size: 3vw; padding: 20px;}
            .star { grid-column: 1 / 2; grid-row: 10 / 11; font-size: 7vw; }
            .flower { grid-column: 2 / 3; grid-row: 10 / 11; font-size: 7vw; }
            .contact { grid-column: 1 / 3; grid-row: 11 / 13; font-size: 4vw; }
            .skills { grid-column: 1 / 3; grid-row: 13 / 15; font-size: 3vw; }
            .social-1 { grid-column: 1 / 2; grid-row: 15 / 16; font-size: 3vw;}
            .social-2 { grid-column: 2 / 3; grid-row: 15 / 16; font-size: 3vw;}
            .social-3 { grid-column: 1 / 3; grid-row: 16 / 17; font-size: 3vw;}

            /* .modal-content {
                width: 90%;
                margin: 5% auto;
                padding: 15px;
            } */

            /*.modal-title { font-size: 1.5em; }
            .modal-description { font-size: 1em; }
            .modal-image { max-width: 100%;} /*calc(50% - 5px) Ensure images are full width on smaller screens */        
        } 

        @media screen and (max-width: 480px) {
            .container {
                grid-template-columns: 2fr;
                grid-template-rows: repeat(13, auto);
                gap: 20px;
                padding: 5px;
            }
            .box { padding: 10px; }
            .name { grid-column: 1; grid-row: 1; font-size: 7vw; }
            .arrow { grid-column: 1; grid-row: 2; font-size: 15vw; }
            .title { grid-column: 1; grid-row: 3; font-size: 4.5vw; }
            .about { grid-column: 1; grid-row: 4; font-size: 5vw; }
            
            .project1, .project2, .project3, .project4, .project5 { 
                grid-column: 1; 
                grid-row: auto;
                height: 100px;
                font-size: 5vw;
            }

            .star, .flower { 
                grid-column: 1; 
                grid-row: auto; 
                font-size: 15vw;
                padding: 30px 0px;
                height: 50px;
            }

            .star:active{ transform: scale(1.25) ; color: #93C5FD ;}
            /*.arrow:active{ transform: scale(1.25) ; color: #A855F7 ;}*/
            .flower:active {transform: scale(1.25) ; color: #1dd1a1 ;}
            
            .contact { grid-column: 1; grid-row: auto; font-size: 5vw; }
            .skills { grid-column: 1; grid-row: auto; font-size: 4vw; }
            .social-1 { grid-column: 1; grid-row: auto; font-size: 4vw; }
            .social-2 { grid-column: 1; grid-row: auto; font-size: 4vw; }
            .social-3 { grid-column: 1; grid-row: auto; font-size: 4vw; }
        }

            /* .modal-content { 
                width: 87%; 
                margin: 5% auto; 
                padding: 10px;
            }
            .modal-title { font-size: 1.2em; }
            .modal-description { font-size: 0.9em; }
            .modal-image-container { gap: 5px; }
            .modal-image { max-width: 100%; height: auto; }
            
            .modal-content { 
                width: 95%; 
                margin: 5% auto; 
                padding: 10px;
            }
            .modal-title { font-size: 1.2em; }
            .modal-description { font-size: 0.9em; }
        }*/