/*
 * Theme stylesheet — referenced in layout.twig as:
 *   <link rel="stylesheet" href="{{ themeAssetsUrl }}/css/style.css">
 *
 * CSS variables injected by the theme engine:
 *   --primary          Primary accent colour
 *   --background       Page background
 *   --foreground       Default text colour
 *   --card             Card/panel background
 *   --border           Border colour
 *   --muted            Subtle background tint
 *   --muted-foreground Muted text
 *   --radius           Border radius (e.g. 0.5rem)
 *   --font-body        Body font stack
 *   --font-heading     Heading font stack
 */

body,h1 a {
    color: #fff
}

.footer,.tl-logo,h1 {
    text-align: center
}

body {
    font: 16px/24px sans-serif;
    margin: 0;
    background-image: url(../img/background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: .98;
    height: 100%
}

h1 {
    padding-bottom: 20px
}

h1 a {
    text-decoration: none
}

table {
    width: 100%
}

table td {
    font-size: 14px;
    color: #ddd
}

.tl-logo-container-outside {
    -webkit-transform: skew(0deg,-6deg);
    transform: skew(0deg,-6deg);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.5);
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    background: #aaa;
    max-width: 600px;
    margin: 170px auto;
    border-radius: 5px
}

.tl-logo-container-inside {
    -webkit-transform: skew(0deg,12deg);
    transform: skew(0deg,12deg);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.5);
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    background: #323232;
    color: #efefef;
    max-width: 600px;
    margin: 170px auto;
    border-radius: 5px
}

@media only screen and (max-width: 650px) {
    .tl-logo-container-inside,.tl-logo-container-outside {
        max-width:400px;
        margin: 100px auto;
        font: 14px/20px sans-serif
    }
}

.tl-logo {
    -webkit-transform: skew(0deg,-6deg);
    transform: skew(0deg,-6deg);
    padding: 50px
}

.tl-logo img {
    width: 100px;
    margin: 0 auto;
    display: block
}

.tl-logo p {
    padding-bottom: 20px
}

a,a:focus,a:hover {
    color: #fff
}

.footer,.footer a {
    color: #999
}

.footer {
    padding-top: 20px;
    font-size: 12px
}