@charset "UTF-8";

html, body{ height: 100% }

a{ color: #ffc1cc }

h1, h2, h3{ font-weight: lighter }

body{
    color: #fff;
    float: right;
    padding: 1.5em;
    max-width: 35em;
    background: url(/role/images/bg.webp) center center/cover fixed no-repeat;
}
header{
    text-align: right;
    margin-bottom: 1em;
}
header .teco-name{
    padding: 1rem;
    text-align: center;
    display: inline-block;
    background: rgba(0, 0, 0, .5);
}

.teco-name h1{
    margin-bottom: 0;
}
.teco-name p{
    opacity: .6;
    font-size: .875em;
}

main{
    padding: 1.5em;
    margin-bottom: 2em;
    background: rgba(0, 0, 0, .5);
}

@media screen and (max-width: 768px){
    body{
        float: none;
        padding: 0;
        max-width: 100%;
    }

    header{
        display: flex;
        align-items: flex-end;
        height: 100%;
        
    }
    header .teco-name{
        padding: 2em 3em;
    }
}

main h2{
    position: relative;
    margin-top: 3em;
}
main h2:before{
    content: '';
    height: 100%;
    width: .5rem;
    left: -1.5rem;
    background: #ffc1cc;
    position: absolute;
}

main h2:first-child{
    margin-top: 0;
}

footer{
    padding: 1em;
    text-align: center;
    background: rgba(0, 0, 0, .6);
}