input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



input[type=number] {

  -moz-appearance: textfield;

}





@font-face {

  font-family: OpenSans-Regular;

  src: url("/font//OpenSans-Regular.ttf") format('truetype');

}



@font-face {

  font-family: pixelfont;

  src: url("/font/SHPinscher-Regular.otf") format('opentype');

}



@font-face {

  font-family: CaveatRegular;

  src: url("/font/caveat-regular.ttf") format('truetype');

}



@font-face {

  font-family: Bloody;

  src: url("/font/PlasmaDripCE.otf") format('opentype');

}



@font-face {

  font-family: ComicSans;

  src: url("/font/ComicSansMS3.ttf") format('truetype');

}



@font-face {

  font-family: Georgia;

  src: url("/font/georgia.ttf") format('truetype');

}



#container {

  background-color: rgba(0, 0, 0, 0.671);

  color: aliceblue;

  border-radius: 20px;

  padding: 15px;

}



#page{

  margin: 5px auto;

  width: 1040px;

  text-align: center;

  position: relative;

}



body {

  font-family: 'Georgia';

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: cover;

  background-image: url(https://wallpapers.com/images/hd/black-blur-emrp7dvgvze88f1x.jpg);

}



header{

  position: absolute;

  left: 1053px;

  top: 21px;

}



.header-flex{

  display: flex;

  justify-content: center;

  align-items: flex-end;

  flex-direction: column;

}



main{

  width: 100%;

  height: 100%;

  margin: 0 auto;

  padding: 10px;

}



p{

  font-size: 22px;

}



footer{

  width: 100%;

  height: 50px;

}



iframe {

  border-radius: 35px;

}





ul {

  padding: 0;

  margin: 0;

  text-decoration: none;

  display: block;

}



h3 {

  text-decoration: underline;

}



h1,

h2,

h3,

h4,

h5,

h6,

.heading {

  font-family: Georgia, serif;

  font-weight: 400;

  word-wrap: break-word

}



h1 {

  font-size: 2.5em;

  line-height: 1;

  margin: .5em 0

}



h2 {

  font-size: 2.143em;

  line-height: 1;

  margin: .429em 0;

  display: inline

}



h3 {

  font-size: 1.400em;

  line-height: 1;

  margin: .5375em 0

}



h4 {

  font-size: 1.143em;

  line-height: 1.125;

  margin: .5em 0

}



h5 {

  font-size: 1em;

  line-height: 1.286;

  margin: .643em 0

}



h6 {

  font-size: .875em;

  font-weight: 900;

  line-height: 1.5;

  margin: 1.5em 0

}



p,

dd,

hr {

  margin: 25px 50px;

}



hr {

  border: 0;

  border-bottom: 3px double

}



.clear {

  clear: both;

  height: 0;

  border: 0;

  margin: 0;

  background: 0 0;

  opacity: 0

}



pre {

  white-space: pre-wrap

}



strong,

b {

  font-weight: 700

}



em,

cite,

i {

  display: block;

  font-style: oblique;

  margin: 25px 50px;

}





li {

  border: solid #000b30 5px;

  background-color: rgb(0 0 0);

  display: inline-block;

  padding: 15px;

  margin: 10px 10px;

  text-decoration: none;

  border-radius: 15px;

}



li:hover{

  border: solid red 5px;

}



a {

  text-decoration: none;

  color: white;

  font-family: sans-serif;

}



a:hover {

  color: red

}



.white {

  color: white

}



.spellcard{

  color: blueviolet;

}





.language {

  display: flex;

  flex-direction: column;

  width: 100px;

  border-radius: 15px;

  background-color: rgba(0, 0, 0, 0.795);

  margin-left: 10px;

  margin-bottom: 15px;

  padding: 5px;

} 



.language>label{

  color: white;

  font-size: 15px;

  margin: 10px;

}



.language>select{

  margin: 5px;

  padding: 5px;

  border-radius: 15px;

  background-color: rgba(0, 0, 0, 0.473);

  color: rgb(255, 255, 255);

  border: 3px solid #000000;

  outline: none;

}



.language>select:focus{

  background-color: rgba(0, 0, 0, 0.473);

  color: white;

  border: 3px solid #000000;

  outline: none;

}



.language>option{

  background-color: black;

  color: white;

}



.language>label{

  color: white;

  font-size: 15px;

  margin: 5px;

  text-shadow: 4px 2px #000000;

}



.button {

  background-color: #000000;

  border: none;

  color: white;

  padding: 15px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 4px 2px;

  cursor: pointer;

  border-radius: 15px;

  border: solid rgb(0, 0, 0) 3px;

  margin-bottom: 10px;

}



.button:hover {

  background-color: #000000;

  color: red;

  border: solid red 3px;

}



/* Hudba */





.hudbaContainer{

  position: relative;

  width: 450px;

  height: 275px;

  margin: 0 auto;

}



.hudbaImg{

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 25px;

  opacity: 100%;

  backface-visibility: hidden;

  -webkit-user-drag: none;

}



.hudbaPlay{

display: none;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

text-align: center;

cursor: pointer;

width: 22%;

height: auto;

image-rendering: pixelated;

opacity: 60%;

-webkit-user-drag: none;

}



.hudbaPlay:hover{

opacity: 100%;

}



.hudbaVolume{

  display: none;

  border: 0;

  cursor: pointer;

  height: 65%;

}



.hudbaCas{

  display: none;

  opacity: 60%;

}



.hudbaCas:hover{

  opacity: 100%;

}



.hudbaTimestamp{

  color: white;

  user-select: none;

}



.hudbaSeekbar{

  accent-color: #da3f3f;

  width: 75%;

}



.hudbaSeekbar:hover{

  cursor: pointer;

}



.hudbaContainer:hover .hudbaVolume{

  display: block;

  writing-mode: vertical-lr;

  direction: rtl;

  accent-color: #da3f3f;

  position: absolute;

  left: 90%;

  top: 10%;

  opacity: 60%;

  height: 75%;

}



.hudbaContainer:hover .hudbaVolume:hover{

  opacity: 100%;

  border: 0;

}



.hudbaContainer:hover .hudbaCas{

  position: relative;

  display: flex;

  flex-direction: row;

  justify-content: center;

  bottom: 30px;

  width: 100%;



}



.hudbaContainer:hover .hudbaPlay{

  display: block;

}



.hudbaContainer:hover .hudbaImg{

opacity: 70%;

transition: 0.5s ease;

}



.zdroje a{

  cursor: pointer;

}



.zdroje details {

  border: 1px solid #686868;

  border-radius: 4px;

  padding: 0.5em 0.5em 0;

  width: 7%;

  margin: 0 auto;

  transition: 0.25s ease;

  text-align: left;

}



.zdroje summary {

  font-weight: bold;

  margin: -0.5em -0.5em 0;

  padding: 0.5em;

  user-select: none;

  text-align: center;

}



.zdroje summary:hover {

  color: #ff0000;

  cursor: pointer;

}



.zdroje details[open] {

  padding: 0.5em;

  width: 75%;

}



.zdroje details[open] summary {

  border-bottom: 1px solid #686868;

  margin-bottom: 0.5em;

}





.time{

  background-color: rgba(0, 0, 0, 0.671);

  color: white;

  padding: 10px;

  border-radius: 15px;

  font-size: 10px;

  margin: 5px;

  margin-left: 10px;

  margin-bottom: 15px;

}