@import "../__common__/root.scss";

.about {
    background-color: $primary-dark;

    .initial_view {
        .hero_text {
            span {
                color: #c5ac75;
                background-color: #1e242a;
                border-radius: 0.3vw;
                padding-left: 0.5vw;
                padding-right: 0.5vw;
            }
        }
    }

    .final_view {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        height: 95dvh;
        color: $primary-light;

        .cursor {
            display: inline-block;
            width: 10px;
            height: 1rem;
            background-color: #333;
            margin-left: 2px;
            animation: blink 0.8s steps(2) infinite;
          }
          
        @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        }

        .skills_section {
            
            .divider {
                background-color: rgba(114, 114, 114, 0.3);
                border-radius: 1vw;
            }

            .vertical_divider {
                @extend .divider;
            }

            .expertise {
                
                .title {
                    color: $primary-light;
                    text-align: center;
                    font-size: 2vw;
                }

                .item {
                    position: relative;
                    left: 50%;
                    transform: translate(-50%, 0%);
                    padding: 1vw;
                    width: 85%;

                    h1 {
                        font-size: 1vw;
                    }

                    .progress_bar {
                        border: none;
                    }

                    .ai {
                        background-color: #2196F3;
                    }

                    .web {
                        background-color: #FF9800;
                    }
                }
            }

            .horizontal_divider {
                @extend .divider;
                position: relative;
                left: 50%;
                transform: translate(-50%, 0%);
                width: 80%;
                height: 0.5vh;
                margin-top: 1vh;
                margin-bottom: 1vh;
            }
    
            .tools {
                position: relative;
                left: 50%;
                transform: translate(-50%, -0%);
                width: 90%;
                margin-top: 1vw;

                .title {
                    color: $primary-light;
                    text-align: center;
                    font-size: 2vw;
                    margin: 1vw;
                }

                .row {
                    --bs-gutter-x: 0;

                    .divider_1 {
                        @extend .divider;
                        position: absolute;
                        left: 50%;
                        transform: translate(-50%, 0%);
                        width: 0.5vh;
                        height: 90%;
                    }

                    .item {
                        // background-color: red;

                        .item_divider {
                            @extend .divider;
                            position: relative;
                            width: 80%;
                            height: 0.5vh;
                            margin-bottom: 1vh;
                            left: 50%;
                            transform: translate(-50%, 0%);
                        }
                    }
                }
            }
        }
    }

}

// Final display is hidden at first, display status changed in JS
.final_view {
    display: none;
}

// .initial_view {
//     display: none;
// }

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {

    .initial_view {

        .hero_text {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -20%);
            color: $primary-light;
            text-align: center;
        }

        .run_button {
            display: none;
        }

        .code_container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50vw;
            height: 20vh;
            background-color: #252526;
            border-radius: 0.5vw;

            .line {
                position: absolute;
                height: 100%;
                width: 0.2vw;
                border-radius: 90vw;
                background-color: #007fd4;
                left: -4vw;
            }

            .run_button_area {
                position: absolute;
                width: 4vw;
                left: -4vw;
                height: 100%;

                .run_button {
                    justify-content: center;
                    display: flex;
                    margin-top: 0vh;
                    cursor: pointer;

                    i{
                        color: white;
                        transform: rotate(90deg);
                        font-size: 1.5vw;
                    }
                }

                .bracket {
                    justify-content: center;
                    display: flex;
                    margin-top: 130%;
                    
                    code {
                        font-size: 1vw;
                        opacity: 0.5;
                    }
                }
            }

            .hero_code {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 1.5vw;
                width: 100%;
                text-align: center;
            }
        }
    }

    .final_view {

        .download_cv_button_mobile {
            display: none;
        }

        .bio_section {
            position: absolute;
            top: 50%;
            transform: translate(-0%, -50%);
            left: 0;
            width: 60%;

            .download_cv_button_desktop {
                position: relative;
                left: 50%;
                transform: translate(-50%);
                margin-top: 1vw;
                width: 12.5vw;
                background-color: transparent;
                border: 0.1vw solid $cta-green;
                color: $cta-green;
                height: 6vh;
                opacity: 0;

                p {
                    font-size: 1vw;
                    font-weight: 600;
                    margin: 0;
                    opacity: 0;
                }
                
                &:hover {
                    background-color: $cta-green;
                    color: $primary-light;
                    // border: 0.1vw solid $;
                }
            }
        }

        .skills_section {
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translate(-100%, -50%);
            width: 40%;

            .vertical_divider {
                position: absolute;
                width: 0.5vh;
                height: 100%;
                margin-left: 2.5%;
            }

            .tools {
                .row {
                    .item {
                        // Title
                        h1 {
                            font-size: 1vw;
                        }
                         
                        // Values
                        .values {

                            .col {
                                margin-left: 1.75vw;
                                margin-bottom: 0.7vh;
                                text-align: left; 
                                font-size: 0.9vw;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {

    .about {

        .initial_view {
            .hero_text {
                position: absolute;
                top: 30%;
                left: 50%;
                transform: translate(-50%, -30%);
                color: $primary-light;
                // color: red;
                text-align: center;
                width: 90%;
            }
    
            .code_container {
                position: absolute;
                top: 55%;
                left: 50%;
                transform: translate(-50%, -55%);
                width: 90vw;
                height: 20vh;
                background-color: #252526;
                border-radius: 0.5vw;
    
                .run_button {
                    position: relative;
                    margin-top: 3vh;
                    top: 100%;
                    left: 50%;
                    transform: translate(-50%);
                    width: 50%;
                    padding: 3vw;
                    cursor: pointer;
                    background: linear-gradient(45deg, #32CD32, #228B22, #00FF7F);
                    background-size: 300%;
                    animation: gradientMove 3s infinite;
                    box-shadow: 0 4px 15px rgba(50, 205, 50, 0.3);
                    transition: transform 0.2s, box-shadow 0.2s;
                    font-weight: 900;
                }
    
                @keyframes gradientMove {
                    0% {
                      background-position: 0% 50%;
                    }
                    50% {
                      background-position: 100% 50%;
                    }
                    100% {
                      background-position: 0% 50%;
                    }
                } 
    
                .line {
                    display: none;
                }
    
                .run_button_area {
                    display: none;
                }
    
                .hero_code {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 3.5vw;
                    width: 100%;
                    text-align: center;
                }
            }
        }

        .final_view {

            .download_cv_button_desktop {
                display: none;
            }

            .bio_section {
                position: absolute;
                margin-top: 0vh;
                left: 0;
                width: 100%;
                $padding: 4vw;
                padding-left: $padding;
                padding-right: $padding;
                font-size: 1.5vh;

                h1 {
                    font-size: 2.5vh;
                }
            }
    
            .skills_section {
                // display: none;
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translate(-50%, -100%);
                width: 100%;
    
                .expertise {
                    
                    .title {
                        display: none;
                    }
    
                    .item {
                        padding: 1vh;
                        width: 90%;
    
                        h1 {
                            font-size: 3vw;
                        }
                    }
                }

                .horizontal_divider {
                    width: 90%;
                }
        
                .tools {
                    position: relative;
                    left: 50%;
                    transform: translate(-50%, -0%);
                    width: 90%;
                    margin-top: 0vh;
                    margin-bottom: 3.5vh;

                    .last_divider {
                        display: none;
                    }

                    .version_control {
                        display: none;
                    }
    
                    .row {
                        --bs-gutter-x: 0;
    
                        .item {
                            // background-color: red;
    
                            .item_divider {
                                @extend .divider;
                                width: 90%;
                                margin-top: 1vh;
                                margin-bottom: 1.5vh;
                            }
    
                            // Title
                            h1 {
                                font-size: 3vw;
                            }
                            
                            // Values
                            .values {

                                .col {
                                    margin-left: 1.75vw;
                                    margin-bottom: 0.7vh;
                                    text-align: left; 
                                    font-size: 3.3vw;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }

                .download_cv_button_mobile {
                    position: relative;
                    left: 50%;
                    transform: translate(-50%);
                    width: 50vw;
                    background-color: $cta-green;
                    color: $primary-light;
                    border: none;
                    opacity: 1;
                    text-align: center;
                    height: 4vh;

                    p {
                        top: 50%;
                        font-size: 4vw;
                        font-weight: 600;
                        margin: 0;
                        opacity: 0;
                    }
                }   

            }
        }
    } 
}

// header {
//     display: none;
// }

// .landing {
//     display: none;
// }


// footer {
//     display: none;
// }

// // .about {
// //     display: none;
// // }

// .projects {
//     display: none;
// }