@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

*:before,
*:after {
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    /* (2)- Adding display flex */
    display: flex;
    /* (11)- removing scroll bar */
    overflow: hidden;
}

/* 
---------------
(1)- Adding h1 styling with text shadow
---------------
*/

section {
    background-color: #ff5a00;
    height: 100vh
}

main {
    background-color: #1d0f40;
    height: 100vh
}

section> h1 {
    font-size: 15rem;
    font-weight: 900;
    color: #1d0f40;
    /*text-shadow: 4px 4px #ff5a00, 8px 8px #1d0f40, 12px 12px #ff5a00;*/
    /* (10)- Adding h1 transition */
    transition: all 0.2s ease-out;
}

main> h1 {
    font-size: 15rem;
    font-weight: 900;
    color: #ff5a00;
    /*text-shadow: 4px 4px #ff5a00, 8px 8px #1d0f40, 12px 12px #ff5a00;*/
    /* (10)- Adding h1 transition */
    transition: all 0.2s ease-out;
}


/* 
---------------
(8)- moving h1 away
---------------
*/

section h1 {
    transform: translateX(-10px);
}

main h1 {
    transform: translateX(10px);
}


/* 
---------------
(9)- adding h1 hover
---------------
*/

section:hover h1{
    transform: translateX(-20);
    text-shadow: -5px -5px #ff5a00, -10px -10px #1d0f40, -15px -15px #ff5a00;
}

main:hover h1{
    transform: translateX(20);
    text-shadow: 5px 5px #1d0f40, 10px 10px #ff5a00, 15px 15px #1d0f40;
}


/* 
---------------
(3)- Adding flex basis
---------------
*/

section, main {
    flex-basis: 50%;
    /* (4)- Adding display flex */
    display: flex;
    /* (7)- Adding transition and scale*/
    transform: scale(1);
    transition: all 0.2s ease-out;
}

/* 
---------------
(5)- Aligning the main and section
---------------
*/

main {
    justify-content: flex-start;
    align-items: center;
}

section {
    justify-content: flex-end;
    align-items: center;
}

/* 
---------------
(6)- Adding hover effect
---------------
*/

section:hover, main:hover {
    transform: scale(1.01);
}

section:hover {
    box-shadow: 2px 0px 15px 5px rgba(255, 90, 0, 0.7);
}

main:hover {
    box-shadow: -2px 0px 15px 5px rgba(29, 15, 64, 0.7);
}