/* 
    This file contains all the locally used stuff, the second layer. 
    
    Page.html -> - style.css (code used across all pages like the navbar or custom buttons and animations)
                 - Page.css (code that is specific for that page and that page only wich is not included in the other pages)
*/

body 
{
    background-position: 0% 85vh;
    background-size: 100% 200vh;
}

/*************************************** | Home Section | ****************************************/

#HomeSection
{
    height: 85vh;
}

#HomeTitleRow
{
    max-width: 1200px;
}

@media(min-width: 1200px)
{
    #HomeTitleRow
    {
        margin-left: calc(50% - 600px);
    }
}

#HomeTitle
{
    font-size: var(--FontSizeTitleHuge);
    font-weight: var(--FontWeightTitleHuge);
}

@media(max-width: 900px)
{
    #HomeSubTitle
    {
        margin-top: 30px;
        font-size: 30px;
    }
}

#HomeElement
{
    margin-top: 15vh;
    margin-bottom: 5vh;
}

/*************************************** | About Section | ****************************************/

#AboutSection
{
    min-height: 80vh;
    padding-top: 10vh;
    padding-bottom: 10vh;
}

#AboutSubTitle
{
    text-align: justify;
    color: var(--TextPrimary);
    padding-top: 20px;
    padding-bottom: 50px;
}

@media(max-width: 900px)
{
    #AboutSubTitle
    {
        font-size: 30px;
    }
}

#AboutTitleRow
{
    max-width: 750px;
}

@media(min-width: 750px)
{
    #AboutTitleRow
    {
        margin-left: calc(50% - 375px);
    }
}

#AboutTitle
{
    margin-top: 0vh;
}

#ContactSection
{
    padding-bottom: 50vh;
}