@import "./root.scss";

footer {
    position: relative;
    width: 100%;
    height: 40vh;
    background-color: $primary-dark;

    .content {
        width: 100%;
        height: 70%;
        // background-color: red;
        padding-left: 5vw;
        padding-right: 5vw;

        .column-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center; /* Optional for better alignment */
            width: 100%;

            .me_box {
                position: absolute;
                top: 50%;
                right: 100%;
                transform: translate(100%, -50%);
                width: 10vw;
                height: 10vh;
                background-color: $primary-light;
                border-radius: 1vw;
                opacity: 0;
                transition: all 0.25s ease-in-out;

                &::after {
                    content: '';
                    position: absolute;
                    left: 92%;
                    top: 35%;
                    width: 0;
                    height: 0;
                    border-left: 20px solid transparent;
                    border-right: 20px solid transparent;
                    border-top: 20px solid $primary-light;
                    clear: both;
                    transform: rotate(270deg);
                }

                h1 {
                    position: relative;
                    font-size: 1vw;
                    top: 50%;
                    transform: translate(0%, -50%);
                }
            }

            a {
                text-align: center;
                width: 100%;
                transition: 0.1s all ease-in-out;
                color: #e6b14c;
                text-decoration: none;
                
                &:hover {
                    color: #ffc857;
                }
            }
        
        }
    }

    .copyright{
        position: relative;
        width: 100%;
        height: 30%;
        // background-color: blue;

        .divider {
            position: relative;
            width: 90%;
            height: 0.5vh;
            left: 50%;
            transform: translate(-50%);
            background-color: rgba(114, 114, 114, 0.3);
            border-radius: 1vw;
        }

        h1 {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2vw;
            text-align: center;
            letter-spacing: 1vw;
        }
    }
}



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

        .column-content {

            img {
                width: 7.5vw;
            }

            a {
                font-size: 2vw;
            }

        }

    }
}

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

        height: 30vh;
        padding-top: 1.5vh;
        padding-bottom: 1.5vh;

        #img_column {
            display: none;
        }
    
        .content {

            .img_column {
                display: none;
            }
    
            .column-content {

                .me_box {
                    display: none;
                }
    
                img {
                    width: 15vw;
                }
    
                a {
                    font-size: 5vw;
                }
            
            }
        }
    
        .copyright{
    
            h1 {
                font-size: 4vw;
                color: $primary-light;
                letter-spacing: 2vw;
            }
        }
    }
}