@import "../app.css";

.homepage {
  background-color: var(--anaibeige);

    & #homepage-hero {
        width: 100vw;
        min-height: 100vh;
        background-image: url('../../images/homepage_bkg.jpeg');
        background-size: 100%;
        @media (max-width: 768px) {
            background-size: cover;
        }
        background-position: center center;
        transition: background-size 1s ease-in-out 0s;
        &:hover {
            background-size: 110%;
        }

        & #homepage-hero-content {
            padding-top: 10vh;
            padding-bottom: 10vh;
            color: var(--anaibeige);

            h1 {
                font-family: 'Logo', cursive;
                font-size: 10rem;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            }
            h2 {
                font-family: 'Script', cursive;
                font-size: 5rem;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
                color: var(--anaipurple);
            }
            section.presentation {
                color: var(--anaibeige);
                font-size: 1.5rem;
                max-width: 80%;
            }
        }
    }


    #whoami {
        text-align: justify;

        hr {
            border-top: 2px solid var(--anaipurple);
            width: 50%;
            margin-left: 2rem;
            margin-bottom: 1rem;
            opacity: .5;
        }
        section#presentation {
            display: flex;
            flex-direction: row;
            @media (max-width: 768px) {
                flex-direction: column;
            }
            section#content {
                padding-right: 2rem;
            }
            img {
                margin-bottom: 2rem;
                border-radius: 10px;
            }
            .signature {
                text-align: right;
            }
        }

        h2 {
            font-family: 'Logo', cursive;
            font-size: 5rem;
            color: var(--anaigreen);
        }
    }

}