@import "../../variables.css";
#about-me {
    height: 100vh;
    width: 100%;
    color: white;
    background: #202020;
}

#about-me .about-me-wrapper {
    display: flex;
    justify-content: center;
}

#about-me .text {
    max-width: 90%;
    overflow: hidden;
}

#about-me h1 {
    text-align: center;
    font-size: 4rem;
    margin-top: 9vh;
    width: 100%;
}

#about-me p {
    margin-top: 10vh;
    font-size: 3rem;
    width: 100%;
    text-align: center;
}

#about-me .img-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15vh;
}

#about-me .img-wrapper {
    background-image: url("/images/earth.jpg");
    height: 20vh;
    width: 20vh;
    shape-outside: polygon(0px 0px, 0px 180px, 100 200px 120px);
    background-size: 40vh;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20% 100% 100% 100% / 20% 100% 100% 100%;
    border: 0rem solid white;
    animation: border 5s linear infinite;
}

@keyframes border {
    0% {
        border-radius: 20% 100% 100% 100% / 20% 100% 100% 100%;
    }
    12% {
        border-radius: 20% 50% 100% 100% / 20% 50% 100% 100%;
    }
    25% {
        border-radius: 100% 20% 100% 100% / 100% 20% 100% 100%;
    }
    37% {
        border-radius: 100% 20% 50% 100% / 100% 20% 50% 100%;
    }
    50% {
        border-radius: 100% 100% 20% 100% / 100% 100% 20% 100%;
    }
    62% {
        border-radius: 100% 100% 20% 50% / 100% 100% 20% 50%;
    }
    75% {
        border-radius: 100% 100% 100% 20% / 100% 100% 100% 20%;
    }
    87% {
        border-radius: 50% 100% 100% 20% / 50% 100% 100% 20%;
    }
}

@media (min-width: 640px) {}

@media (min-width: 768px) {}

@media (min-width: 1024px) {
    #about-me h1 {
        font-size: 5rem;
    }
    #about-me p {
        font-size: 3.5rem;
    }
}

@media (min-width: 1280px) {}