@import url(style.css);


/* | Fade In Affect | */
@keyframes fadeIn {
    from {
        margin-top: 10px;
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }


/* ---- Main Body ---- */

/* | Left Content | */
#leftContent {
    margin-left: 6.4vw;
    margin-top: 6.4vw;
    width: 100%;
}

    /* | Intro Box | */
    /* #introBox {} */

        /* | Welcome Text | */
        #welcomeText {
            color: var(--mainColour2);
        }

            /* Hello! */
            #welcomeText h1 {
                font-size: 2.3vw;
                margin-bottom: 5px;
                opacity: 0;
                animation: fadeIn 0.8s ease-in-out forwards
            }

            /* I'm Finnley */
            #welcomeText h2 {
                font-size: 3.75vw;
                margin: 0px;
                opacity: 0;
                animation: fadeIn 0.8s ease-in-out 0.8s forwards
            }

            #welcomeText h2 span {
                color: var(--mainColour1);
                background-color: var(--mainColour2);
                padding: 0.4vw;
                border-radius: 0.7vw;
            }

            /* and this is my website! */
            #welcomeText h3 {
                font-size: 1.28vw;
                margin-top: 2.75vw;
                opacity: 0;
                animation: fadeIn 0.8s ease-in-out 1.6s forwards
            }

        /* | About Me | */
        #aboutMeBtn {
            padding-top: 0.95vw;
            opacity: 0;
            animation: fadeIn 0.8s ease-in-out 2.4s forwards
        }

            /* About Me Button */
            #aboutMeBtn a {
                font-size: 0.95vw;
                text-decoration: none;
                color: var(--mainColour1);
                background-color: var(--mainColour2);
                padding: 0.8vw;
                border-radius: 0.5vw;
                transition: all 0.3s ease;
                display: inline-block;
            }

            /* About Me Button on Hover */
            #aboutMeBtn a:hover {
                transform: scale(1.05);
                background-color: var(--mainColour2Dark);
            }

        /* | My Social Links | */
        #mySocials {
            padding-top: 1vw;
            opacity: 0;
            animation: fadeIn 0.8s ease-in-out 2.4s forwards
        }

            /* My Social Icons */
            #mySocials i {
                font-size: 1.25vw;
                color: darkslategray;
                background-color: var(--mainColour2);
                border-radius: 50%;
                padding: 0.4vw;
                transition: all 0.3s ease;
            }

            /* My Social Icons on Hover */
            #mySocials i:hover {
                scale: 1.2;
                cursor: pointer;
                color: var(--mainColour1);
            }

    /* | TypeWriter Changing Text | */
    #changingTextArea {
        margin-top: 4.5vw;
        margin-left: 1vw;
        color: var(--mainColour2);
        opacity: 0;
        animation: fadeIn 0.8s ease-in-out 2.4s forwards
    }

        /* I am */
        #changingTextArea p {
            font-size: 2.7vw;
            margin-bottom: 0;
        }

        /* TypeWriter Text */
        #changingText {
            display: flex;
        }

            /* Text */
            #textToChange {
                font-size: 3.7vw;
            }

            @keyframes blinker {
                50% {
                    opacity: 0;
                }
            }

            /* Blinker */
            #blinker {
                margin-top: 0.3vw;
                margin-left: 0.5vw;
                width: 0.5vw;
                height: 3.7vw;
                background-color: var(--mainColour2);
            }

            .blink {
                animation: blinker 1s step-end infinite;
            }



/* | Right Content | */

    /* Picture of Me */
    #rightContent img {
        height: 26vw;
        position: absolute;
        right: 15%;
        top: 15%;
        border: solid var(--mainColour2) 7px;
        box-shadow: black 0px 0px 20px;
        border-radius: 50%;
        -webkit-user-drag: none;
        user-select: none;
    }

    #myFace {
        border: solid var(--mainColour2) 7px;
        box-shadow: black 0px 0px 20px;
        border-radius: 50%;
        -webkit-user-drag: none;
        user-select: none;
    }

    .mainImage {
        transition: transform 1s ease, opacity 1s ease;
    }

    .helloThere {
        opacity: 0;
        transition: transform 2s ease, opacity 2s ease;
    }


/* ---- First Section ---- */

.mobileView {
    display: none;
}


@media(max-width: 700px){

    /* Hello! */
    #welcomeText h1 {
        font-size: 7.3vw;
        margin-bottom: 5px;
    }

    /* I'm Finnley */
    #welcomeText h2 {
        font-size: 9.75vw;
        margin: 0px;
    }

    /* and this is my website! */
    #welcomeText h3 {
        font-size: 3.28vw;
        margin-top: 2.75vw;
    }

    /* | About Me | */
    #aboutMeBtn {
        padding-top: 3.95vw;
    }

        /* About Me Button */
        #aboutMeBtn a {
            font-size: 3.95vw;
            padding: 3.8vw;
            border-radius: 3.5vw;
        }

    /* | My Social Links | */
    #mySocials {
        padding-top: 5vw;
    }

        /* My Social Icons */
        #mySocials i {
            font-size: 7.25vw;
            padding: 1.4vw;
        }

    /* | TypeWriter Changing Text | */
    #changingTextArea {
        margin-top: 20.5vw;
    }

        /* I am */
        #changingTextArea p {
            font-size: 7.7vw;
        }

        /* Text */
        #textToChange {
            font-size: 7.7vw;
        }

        /* Blinker */
        #blinker {
            margin-left: 1vw;
            width: 1.3vw;
            height: 8vw;
        }

    /* Picture of Me */
    #myFace {
        border: solid var(--mainColour2) 1vw;
        box-shadow: black 0px 0px 2vw;
        height: 35vw;
        margin-left: 25%;
    }

    .desktopView {
        display: none;
    }

    .mobileView {
        display: block;
    }

}

@media (max-height: 500px) {
    /* | TypeWriter Changing Text | */
    #changingTextArea {
        margin-top: 1.5vh;
    }
}