@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

html,body{width: 100%; height: 100%; font-family: 'Poppins', Courier, monospace; color: #222;}

.navbar{padding: 1rem;}
.navbar-nav li{padding-right: 10px;}
.nav-link{font-size: 1.2em;}

.carousel-inner img{width: 100%; height: 100%;}
.carousel-caption{position: absolute;top: 50%; transform: translateY(-50%);}
.carousel-caption h2{font-size: 500%; text-transform: uppercase; text-shadow: 1px 1px 15px black;}
.carousel-caption h3{font-size: 200%; text-shadow: 1px 1px 10px black; padding-bottom: 1rem;}
.btn-danger{background-color: darkred; border: 1px solid whitesmoke;}

.jumbotron{padding: 1rem;}
.welcome{width: 75%; margin: auto auto;}
.welcome hr{width: 95%; border-top: 5px solid darkred;}

.fa-ghost, .fa-spider, .fa-skull{font-size: 6rem; margin: 1rem;}
.fa-ghost{color: darkslateblue;}
.fa-skull{color: gainsboro;}
.fa-spider{color: darkolivegreen;}

.social a{font-size: 4.5rem; padding: 3rem;}
.fa-facebook{color: #3b5998;}
.fa-discord{color: #7289da;}
.fa-instagram{color: #e4405f;}
.fa-tiktok{color: #000}
.fa-github{color: #1b1f24;}
.fa-facebook:hover, .fa-discord:hover, .fa-instagram:hover, .fa-tiktok:hover, .fa-github:hover{ color: darkred;}
footer{background-color: darkred; color: whitesmoke; padding-top: 1rem;}
.light{width: 100%; border-top: 2px solid gainsboro;}


/*---Media Queries --*/
@media (max-width: 992px) {

  }
@media (max-width: 768px) {
  
}
@media (max-width: 576px) {
  
}


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixované pozadí --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(darkred,black);
}
#fixed {
  background-image: url('obrazky/sky.jpg');
  opacity: 0.5;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}



/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}





/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/