@font-face {
    font-family: 'Literata';
    src: url('/fonts/Literata/Literata-Light.woff2') format('woff2');
    font-weight: light;
    font-style: normal;
}

@font-face {
    font-family: 'Literata';
    src: url('/fonts/Literata/Literata-LightItalic.woff2') format('woff2');
    font-weight: light;
    font-style: italic;
}

@font-face {
    font-family: 'Literata';
    src: url('/fonts/Literata/Literata-SemiBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Literata';
    src: url('/fonts/Literata/Literata-SemiBoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}
* {box-sizing: border-box;}
html {height: calc(100% - 6.5em)}
body {
    background-color: #141414;
    color: #fff;
    font-family: "Literata", Arial, Ubuntu, Helvetica , sans-serif;
    font-size: 16px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 .5em;
    height: 100%;
}
.container {
    min-height: 100%;
    position: relative;
}

a {color: #fff;}
#titol {
    text-align: center;
    margin: .4em 0 0 0;
}
#info {
    color: #aaa;
    text-align: center;
    margin: .7em 0;
    line-height: 1.3em;
}
h3 {text-align: center;}

.inline {text-align: center;}
.inline > * {
    display: inline-block;
    width: 49%;
}
.chooser {
    display: inline-flex;
    position: relative;
    overflow: hidden;
}
.chooser button {width: 100%;}
.chooser input[type=file] {
    left: 0;
    top: 0;
    opacity: 0;
    position: absolute;
    font-size: 90px;
    cursor: pointer;
}
button:hover,
button:has(+ #file-input:hover) {
    background-color: #555;
}
button {
    background-color: #333;
    border: 0;
    color: #fff;
    padding: .5em 1em;
    cursor: pointer;
    font-size: 1.1em;
    text-align: center;
    font-family: inherit;
}

table {
    border-spacing:0;
    border-collapse: collapse;
    width: 100%;
}
tr:hover {background: #333;}
.taula {margin-top: 1em;}
.taula > i {color: #aaa;}
.status {
    color: #aaa;
    text-align: right;
    width: 5.5em;
}

footer {
    color: #aaa;
    padding: .6em 0 .5em 0;
    text-align: center;
    font-size: .9em;
    line-height: 1.3em;
    border-top: 1px solid #aaa;
    margin-top: .8em;
}
footer a {color: #aaa}

.frm-admin {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.frm-admin label {
    color: #aaa;
}

.frm-admin input, .frm-admin select {
    width: 100%;
    padding: .4em .7em;
    background-color: #222;
    border: 1px solid #444;
    margin: .2em 0 .6em 0;
    font-size: 1em;
    font-family: inherit;
    color: #fff;
}

.frm-admin input[type="radio"],
.frm-admin input[type="checkbox"] {
    width: auto;
    margin-left: 1em;
}

.frm-admin button {
    width: 100%;
}

.msg {
    text-align: center;
    display: none;
}

.msg a {color: inherit !important;}

.d-block {display: block !important;}

#msg-error {color: #f74242}
#msg-success {color: #48f742}

#frm-login {
    margin-top: 20%;
    text-align: center;
    border: 1px solid #aaa;
    padding: 2em;
}

#logout {
    text-align: center;
    background: inherit;
    border: 0;
    text-decoration: underline;
    color: #f74242;
    width: auto;
    cursor: pointer;
    margin: 0 auto;
    display: block;
}

#galeria-pujada {
    text-align: center;
    color: #aaa;
}

#galeria-errors {
    text-align: center;
    color: #f74242;
}

#galeria {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: .8em 0;
}

#galeria > div {
    width: 24.4%;
    padding: 16% 24.4% 0 0;
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    margin: .5% .25% 0 .25%;
}

#galeria > div > a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    cursor: pointer;
    background: white;
    opacity: 0;
    z-index: 2;
}

#galeria > div > a:hover {
    opacity: .4;
}

#galeria span {
    position: absolute;
    bottom: 0;
    right: 2px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: white;
    font-size: .7em;
    z-index: 1;
}

@media (max-width:600px)  {
    #galeria > div {
        width: 49.5%;
        padding: 32% 49% 0 0;
    }
}