/*
the css of the main group
*/
.mainbox
{
    width:100vw;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:1.25rem;
}

/*
the css of the 2 columns
*/
.main_content_row
{
    width:50rem;
    display:flex;
    height: fit-content;
    margin-top: 1rem;
    border-color: none;
    border-width: 0.3rem;
    border-style: none;
}

/*
the css of one row
*/
.main_column
{
    flex-grow: 1;
    flex-basis: 0;
    height: 50vh;
    background-color:#05d0f4;
    display:flex;
    flex-direction:column;
    justify-content: start;
    align-items: center;
}

/*
the second column is a column for text, make some padding
*/
.main_column:last-child
{
    padding-left:0.3rem;
    padding-right:0.3rem;
}

/*
the name row inside the text column
*/
.my_name
{
    display:flex;
    flex-direction: row;
    justify-content: center;
    text-align:center;
    font-size: 2rem;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color:black;
    width:100%;
    height:fit-content;
    margin-top:0.2rem;
}

/*
the introductions
*/
.introduction
{
    width:100%;
    height:fit-content;
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    overflow-x:auto;
    overflow-y:scroll;
    margin-top:0.2rem;
    margin-bottom:0.3rem;
}

.outer
{
    height:100%;
    width:100%;
}
/*
the image at the left column should take all the space of that column
*/
.main_img_style
{
    object-fit:cover;
    height:100%;
    width:100%;
}

/*
the fun fact row
*/
.main_fun_fact_row
{
    text-align: justify;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgb(244, 146, 72);
    border-radius: 0.3rem;
    margin:1rem;
    padding: 0.7rem;
}