/* I will also substract 5rem from the vertical position of the text so as the screen becomes smaller the text will become closer to the left hand side of the display */


#page1{
    position: relative;

    height: calc(100vh - var(--dim-navbar-margin));
    max-height: 864px;
    min-height: 384px;

    margin-top: var(--dim-navbar-margin);
    
    width: 100%;

    background: white url('../Assets/MainPage/graph.svg') no-repeat top left;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    --ft-ratio-title-slogan: 0.778;
    --ft-ratio-title-skills: 0.69;
}

#page1 p{
    margin: 0;
    /* font-size: 1.0em; */
}

h1{
    font-weight: normal;
    margin: 0;
}

h2{
    font-weight: normal;
    margin: 0;
}

.title-box{
    position: absolute;

    white-space: nowrap;
    transform: translate(50%);
    bottom: 49%;
    right: max(26%, 140px); 

    text-align: center;
}

.title{
    font-size: 5rem;
}

.slogan{
    margin-top: auto;
    font-size: 3.25rem;
}

.skills{
    position: absolute;

    left: 7%;
    right: 7%;
    bottom: 5%;

    white-space: pre-wrap;
    text-align: center;

    font-size: 3rem;
    color: rgb(83, 83, 83);
}

/* ------------------------------------ */

/* page 2 */

#page2 img{
    max-height: 700px;
    max-width: max(55vw, min(500px, 100%));
     /* max(55%, min(500px, 95%)); 50vw;  */
}

@media screen and (max-width: 1500px) { 

    #page2{
        flex-direction: column;
    }

    

}

/* ------------------------------------ */

/* 
    all of the following is simply adjusting the text to make the main page look good
*/

@media screen and (max-width: 1800px) {

    .title{
        font-size: 4rem;
    }
    
    .slogan{
        font-size: 2.75rem;
    }

    .skills{
        font-size: 2.5rem;
    }
    
}

@media screen and (max-width: 990px) {

    #page1{
        --ft-size-title: 3.5rem;
    }

    .title{
        font-size: var(--ft-size-title);
    }
    
    .slogan{
        font-size: calc(var(--ft-size-title) * var(--ft-ratio-title-slogan));
    }

    .skills{
        font-size: calc(var(--ft-size-title) * var(--ft-ratio-title-skills));
    }
}


@media screen and (max-width: 640px) {
    #page1{
        --ft-size-title: clamp(2.15rem, 6.8vw, 3.15rem);
    }

    .slogan{
        text-align: right;
    }
}


@media screen and (max-device-width: 475px){
    .title-box{
        transform: translate(0);
        right: 0.5em;
    }
}