@font-face {
    font-family: "SwordsCZ";
    src: url("../assets/swordscz.ttf");
}

body {
    /* width: 80%; */
    color: rgb(24, 24, 24);

    /* set default font */
    font-family: "SwordsCZ";
    /* background-color: rgba(246, 239, 229, 1); */
    margin: 0px;
}

h1 {
    font-size: 85pt;
    font-family: "SwordsCZ";
    margin-top: 10px;
    margin-bottom: 1px;
}

.main {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

    /* horizontaly align to the center */
    margin: auto;

    /* width: 80%; */
    min-width: 300px;
    max-width: 700px;

}

.main div {
    filter: grayscale(100%);
    border-radius: 5px;
    border: 1px solid black;
    /* outline: lightsalmon; */
    /* max-height: 200px; */
    margin: 10px;
    max-width: 200px;
    min-width: 200px;
    /* padding: 3px; */
    overflow: hidden;
    /* display: inline; */    
}
.main div:hover {
    /* background-color: red; */
    filter:none;
    /* border: 2px solid black;
    margin: 9px; */
    box-shadow: 0px 0px 18px 0px black;
}

h4{
    margin: 0px;
    /* margin-left: 10px; */
    padding: 0px;
    /* padding-left: 10px;     */
    text-align: center;
}

h4 span{
    margin: 0px;    
    padding: 0px;
}


.overlay{
    position: relative;    
}

.bg{   
    /* position: relative; */
    width:200px;
}
.fg{
    /* display: none; */
    position: absolute;
    left:0px;
    top: -145px;/*this value is required by FF to overlay images on top of each other properly */
    width:100%;
    transition: opacity 1s ease-in-out 1s;
}

.transparent{
    opacity: 0;
}
.hide{
    /* opacity: 0; */
    display: none;
    
}



@keyframes fade {
    0% {opacity: 0.1;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    /* 53% {opacity: 0;} */
    100% {opacity: 0.1;}
}


#news12 {
    transition: opacity .4s ease-in .2s;
    /* animation-name: fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-duration: 5s; */

    /* animation-direction: alternate; */
 }

 
header {
    display: block;
    text-align: center;
    padding: 10px;
}

header p{
    margin-top: 1px;
    /* margin-bottom: 3em; */
    font-size:16pt;
}

footer {
    text-align: center;
    /* background-color: rgb(0, 0, 0);
    color: white; */
    padding: 20px;
    /* display: block; */
    margin-top: 50px;
}