body {
  background: #2D2D2D;
  color: #bec5cc;
  font-size: 0.8rem;
  font-family: 'Segoe UI',Helvetica,sans-serif,Arial;
}

p {
  margin: 0;
  word-wrap: break-word;
  max-width: 98vw;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0.5rem 0;
  color: #bec5cc;
}
h1, h4, h5, h6 {
  color: goldenrod;
}

ul {
  padding-left: 1rem;
}

::selection {
  background-color: #53c7ff;
  color: black;
}

/* f o n t s */
.fontxsmall {font-size: x-small;}
.fontsmall {font-size: small;}



/* linki '''''''''''''''''''''''''''''''''''''' */
a:link {
  text-decoration: none;
}
a:link, a:visited {
  color: #aaa;

}
a:hover,a:focus {
  color: #666;
}
a:active {
  color: #967B43;
}


#logo {
  /* border-top: double 3px gray; */
  position: relative;
  justify-self: center;
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  width: 60%;
  min-width: 250px;
}

#pagetitle, #pagetitlepopular, .pagetitle {
  display: flex;
  align-items: flex-end;
  height: 4rem;
}
#pagetitle h2, #pagetitlepopular h2, .pagetitle h2 {
  font-size: 1.2rem;
  color: #bec5cc;
  padding-bottom: 1rem;
}

#filter {
  padding: 0.7rem 0.5rem;
  margin: 0.5rem 0 0.5rem 0;
  background-color: #800000;
  /* font-weight: bold; */
  color: gainsboro;
  height: 2.2rem;
}
#filter :is(div, label) {
  display: inline;
}
#filter :is(ul,li,.pocisti-oznaci) {
  font-size: 0.7rem;
  padding-left: 0.2rem;
  display: inline;
}
#filter input {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
}
#filter img {
  position: relative;
  width: 1rem;
  height: 1rem;
  top: 2px;
}
.pocisti-oznaci{
  display: inline;
  cursor: pointer;
}
.pocisti-oznaci:hover{
  color:white;
}


/* color class '''''''''''''''''''''''''''''''''''''' */

  /* backg */


  /* text */
  .golden,
  .golden a {
    color: goldenrod;
  }
  .green {
    color:#00ca00;
  }
  .red {
    color:red;
  }
  .sea {
    color:lightseagreen;
  }
  .sky {
    color: #53c7ff
  }



.hidden {display: none;}
.mhidden {display: none; }
.displayflex { display: flex;}
.align_center {text-align: center}
.floatright {float: right;}
.floatleft {float: left;}
.left {text-align: left;}
.mleft05 {margin-left: 0.5rem;}
.mright1 {margin-right: 1rem;}
.inline {display: inline;};
.inline-block {display: inline-block;}



/* #footer ***************************/

footer {
  padding-top: 0.5rem;
  text-align: center;
}
footer img {
  margin-left: 5px;
  margin-right: 5px;
}
/* .fb img {
  margin-left: 5px;
  margin-right: 5px;
} */

#empty {
  display: none
}

.napake {font-size:150%; text-align: center; color: #ffcc00;}






@media screen and (min-width: 800px) {

  #logo {
    width: 250px;
    height: 60px;
    text-align: unset;
    justify-self: end;
    margin-top: unset;
    padding-top: 0.5rem;
    /* border-top: none; */
  }
  #logo img {
    position: fixed;
    z-index: 81;
  }

  #pagetitle, #pagetitlepopular, .pagetitle, #empty  {
    background: #ddd;
    margin: 0.5rem 0;
  }
  #pagetitle h2, #pagetitlepopular h2, .pagetitle h2 {
    color: black;
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  #empty {
    display: block
  }
  .mhidden {display: unset;}
}


@media screen and (min-width: 1200px) {

  #grid {
    width: 100%;
    margin-bottom: 1rem;
  }
}