@import url("styles.css");

.intro_container {
    display: flex;
    /*justify-content: center;*/
    flex-direction: row;
    gap: 3vw;
    width: 80%
}

.intro_text_container {
    flex-basis: 100%;
    flex-direction: column;
}

.home_page_image_container {
    flex-basis: 100%;
}

.home_page_image {
    object-fit: fill;
    height: 100%;
    width: 100%;
    border-radius: 5%;
}

.home_page_text_content {
    flex-wrap: nowrap;
}

.home_page_name {
    color: #800000;
    font-size: 3vw;
    margin: 0;
    display: flex;
    justify-content: center;
}

/*media queries need to come after the definitions they're supposed to override*/
@media screen and (max-width: 1020px) {
 .intro_container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    width: 80%;
}

.intro_text_container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    /*flex-direction: column;*/
}

.home_page_image_container {
    justify-content: center;
    padding-top: 10px;
    display: flex;
    border-radius: 5%;
    /*width:10rem;*/
    /*height:10rem;*/
    /*flex-grow: 1;*/
}

.home_page_image {
    width: 18rem;
    height: 18rem;
    /*width: 70%;*/
    /*height: 70%;*/
    border-radius: 5%;
    /*width:10rem;*/
    /*height:10rem;*/
    /*flex-grow: 1;*/
}
}