:root {
    --first-color: linear-gradient(135deg, #2c3e50, #4ca1af, #1e1e1e);
    --second-color: linear-gradient(135deg, #283048, #859398, #1e1e1e);
}

body {
    margin: 0;
    padding: 0;
    height: 100%;

    overflow: hidden;
}

section
{
    display: inline-block;
    position: absolute;
    vertical-align:top;
    
    height: 930px;
    
    width: 800px;

       cursor: pointer;
            transition: all 0.3s ease; 
}

section:hover
{
    background-color: lightgrey; 


    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Adding shadow */
    transform: scale(1.1); /*This is what changes the size*/
}



.portion
{
    border-right: 10px solid black;
    background: var(--first-color);

    
}

.portion2
{
    background: var(--second-color);

    border-left: 10px solid black;
    left: 48%;
    width: 870px;

}


/*Button*/

#box, #box2
{
    position: absolute;
    left: 40%;
    top: 30%;

}

#box
{
    left: 35%;

}


.button
{
    border: 5px solid black;
    width: 200px;
    height: 100px;

    font-size: 50px;
    font-family: "Oswald", sans-serif; 

    cursor: pointer;
            transition: all 0.3s ease; 
}

.button:hover
{
    background-color: lightgrey; 


    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Adding shadow */
    transform: scale(1.1); /*This is what changes the size*/
        
}



/*bottom portion*/
#bottom, #bottom2
{     
    position: absolute;  

        top: 20%;

        width: 400px;
        height: 500px;
        
        top: 44%;
        left: 34%;
}


#bottom2
{
    left: 40%;
}

#bottom:hover #Arrow1,
#bottom2:hover #Arrow1 {
    animation: moveArrows 2s ease-in-out infinite alternate;
}

@keyframes moveArrows {
    75% {
        transform: translateY(-700px);
    }
    75% {
        transform: translateY(-550px) rotate(90deg);
    }
}


/*Question*/
.box /*The look of the box*/
{
    border: 5px solid black;
    width: 220px;
    height: 40px;

    font-size: 30px;

}

#question, #question2
{
        position: absolute;

        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;

        bottom: 2%;

}


/*Arrow*/
.arrow-head {
    width: 0px;
    height: 0px;
        border-style: solid;
        border-width: 40px 0 40px 50px;
        border-color: transparent transparent transparent black;
   
    
}

       
#Arrow1{  
    position: absolute;        
    top: 40%; 
    left: -5%; 
    display: flex;
    align-items: center;
    transform: rotate(270deg);
}

.arrow-line {
    width: 200px;
    height: 20px;
    background-color: black;
}


#home {
    position: absolute;
    top: 5%;
    left: 7%;
    width: 170px;
 

    display: flex;
    align-items: center;
    justify-content: space-between;

    text-decoration: none;
}

.home {
    width: 100px;
    background-color: black;
    color: rgb(255, 250, 250);

    text-align: center;
    padding: 10px;
}

#Home_arrow {
    display: flex;
    align-items: center;
    transform: rotate(180deg);
}

.arrow-line-home {
    width: 40px;
    height: 5px;
    background-color: rgb(255, 252, 252);
}

.arrow-head-home {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent rgb(255, 255, 255);
}