@import "main.css";

/*CSS page for index.html*/

section {
    position: relative;
    /*background: grey;*/
    aspect-ratio: 4/1;
    overflow: initial;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero {
    background: rgb(10,10,10); /* Temporary */
    display: flex;
    z-index: -1;

    background: url("../media/pool_testing.jpg");
    background-size: cover;
    background-position: 0 50%;
}

.hero div {
    width: 75%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(10,10,10,.8);
}

.hero p { /*temporary*/
    color: white;
    text-align: center;
}

.upper_offset_row {
    position: absolute;
    top: -35%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.info_box {
    position: relative;
    width: 20%;
    height: 100%;
    padding: 2rem;
    background: var(--background_secondary);
}

.info_box h2 {
    color: var(--text)
}

.left_box::before {
    content: "";
    position: absolute;
    bottom: -2%;
    left: -2%;
    width: 100%;
    height: 100%;
    background: var(--background_mono);
    z-index: -2;
}

.right_box::after {
    content: "";
    position: absolute;
    bottom: -2%;
    right: -2%;
    width: 100%;
    height: 100%;
    background: var(--background_mono);
    z-index: -2;
}

#general_information {
    width: 80%;
    /*align-self: flex-end;*/
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#general_information p {
    color: var(--text_inverted);
    width: 75%;
    align-self: center;
}

#robosub {
    width: 80%;
    display: flex;
    gap: 2rem;
}

.content_text {
    width: 50%;
}

.content_text > * {
    color: var(--text);
}

#robosub_image {
    width: 50%;
}