/* CSS file */

/* Fonts */
@font-face
{
    font-family: 'DelaGothicOne'; /* A name to be used later in your CSS */
      src: url('/Fonts/Dela_Gothic_One/DelaGothicOne-Regular.ttf');
      font-weight: normal;
      font-style: normal;
      font-display: block;
}

@font-face
{
    font-family: 'MedievalSharp'; /* A name to be used later in your CSS */
      src: url('/Fonts/MedievalSharp/MedievalSharp-Regular.ttf');
      font-weight: normal;
      font-style: normal;
      font-display: block;
}

@font-face
{
    font-family: 'Urbanist'; /* A name to be used later in your CSS */
      src: url('/Fonts/Urbanist/Urbanist-VariableFont_wght.ttf');
      font-weight: normal;
      font-style: normal;
      font-display: block;
}

/* Rules */

html
{
    min-height:100%;
    margin: 0;
}

body
{
    background-image: url("/Graphics/Background.svg");
    background-repeat:no-repeat;
/*    background-size: 100vw 100vh;*/
    background-size: 100% 100%;
    background-color: #eeeeee;
    min-height:100%;
    color: #844C2C;
    font-family: 'Urbanist';
    margin: 0;
}

.content-wrapper
{
    display: flex;
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* Ensure the wrapper is at least the height of the viewport */
}

main
{
    flex-grow: 1; /* This makes the main content area grow and fill all available space */
    /* You can also use margin-top: auto; on the footer, but flex-grow on the main content is generally cleaner */
}

main
{
    padding:0 5%;
}

a
{
    text-decoration:none;
    color: #844C2C;
}

a:hover
{
    text-decoration:underline;
}

/* Splash screen logo */
#LogoBlock
{
    width:300px;
    margin:auto;
    position:relative;
    margin-top:5%;
    height:330px;
}

#LogoBlock img
{
    width:100%;
}

#LogoBlock #TagLine1
{
/*    font-size:2cqw;*/
    font-size:1.5em;
    white-space:nowrap;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-family: 'MedievalSharp';
}

#LogoBlock #TagLine2
{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-family: 'Urbanist';
    font-size:.7em;
}

/* Bottom logo */
#LogoBlockBottom
{
    width:150px;
    position:relative;
    bottom:0px;
    left:10%;
    height:165px;
}

#LogoBlockBottom img
{
    width:100%;
}

#LogoBlockBottom #TagLine1
{
/*    font-size:2cqw;*/
    font-size:1em;
    white-space:nowrap;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-family: 'MedievalSharp';
}

#LogoBlockBottom #TagLine2
{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-family: 'Urbanist';
    font-size:.7em;
}

#SplashTitle
{
    font-family: 'DelaGothicOne';
    font-size:50px;
    text-align:center;
}

#SplashTitleSub
{
    text-align:center;
}

.ButtonLink
{
    background-color:#844C2C;
    color:#ffffff;
    min-width:200px;
    height:50px;
    display:inline-block;
    border-radius:10px;
    font-weight:bold;
    text-align:center;
    line-height:50px;
    cursor:pointer;
    transition-property: background-color;
    transition-duration:200ms;
    transition-timing-function:ease-in-out;
}

.ButtonLink:hover
{
    background-color:#BC6C3F;
}

header#Menu
{
    width:100%;
    text-align:center;
}

a.MenuItem
{
    display:inline-block;
    height:50px;
    line-height:50px;
    font-family: 'DelaGothicOne';
    padding-left:20px;
    padding-right:20px;
    border-bottom:5px solid transparent;
}

a.MenuSelected:hover
{
    text-decoration:none;
}

a.MenuSelected
{
    border-bottom:5px solid rgb(132, 76, 44);
}

div#ProjectList
{
    background-color:#844C2C;
    color:#ffffff;
    width:100%;
    margin-top:5px;
    text-align:center;
}

a.ProjectBox
{
    height:250px;
    width:150px;
    background-color:white;
    color: #844C2C;
    padding:25px;
    margin:25px;
    display:inline-block;
    overflow:hidden;
}


a.ProjectBox img
{
    width:100%;
}

.IntroPic
{
    width:50%;
    display:block;
    margin:2% auto;
}

.Thumb
{
    margin:0 1%;
}

.SmallLeft
{
    float:left;
    width:10%;
}

.MidLeft
{
    float:left;
    width:25%;
}

.BigLeft
{
    float:left;
    width:50%;
}

.SmallRight
{
    float:right;
    width:10%;
}

.MidRight
{
    float:right;
    width:25%;
}

.BigRight
{
    float:right;
    width:50%;
}

.CompanyLogo
{
    width:24px;
}