@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins&display=swap');

body {
    background-image: url(/assets/img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar-custom {
    background-color: rgba(0, 0, 0, 0.637);
}

.navbar-custom a {
    color: rgb(0, 0, 0);
}

.navbar-custom a:hover {
    color: rgb(255, 0, 0) !important;
    transition: .5s ease;;
}

.nav-link {
    color: white !important;
}

.nav-link:hover {
    color: rgb(255, 0, 0) !important;
    transition: .5s ease;
}

.welkom h1 {
    text-align: center;
    color: rgb(255, 255, 255);
    margin-top: 180px;
    font-weight:bold;
    font-size: 60px;
}


* {box-sizing:border-box}

#container {
  color:rgb(255, 255, 255);
  text-transform: uppercase;
  font-size:36px;
  font-weight: 500;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:55%;
  display:block;
  margin:0px;
  text-align:center;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
  font-weight:bold;
}

#flip div:first-child {
  animation: show 13s linear infinite;
}


@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/* Ipad */
@media screen and (max-width: 1410px) {
  body {
    background-color: rgb(24, 136, 192);
  }
  
  .welkom h1 {
    text-align: center;
    color: rgb(255, 255, 255);
    margin-top: 140px;
    font-weight:bold;
    font-size: 40px;
  }
  #container {
    color:rgb(255, 255, 255);
    text-transform: uppercase;
    font-size:36px;
    font-weight: 500;
    padding-top:10px;  
    position: relative;
    width:100%;
    bottom:55%;
    display:block;
    margin:0px;
    text-align:center;
  }

}


/* Telefoon  600*/
@media screen and (max-width: 800px) {
  body {
    background-color: rgb(106, 108, 109);
  } 

  .welkom h1 {
    text-align: center;
    color: rgb(255, 255, 255);
    margin-top: 140px;
    font-weight:bold;
    font-size: 40px;
  }
  #container {
    color:rgb(255, 255, 255);
    text-transform: uppercase;
    font-size:36px;
    font-weight: 500;
    padding-top:40px;  
    position: relative;
    width:100%;
    bottom:55%;
    display:block;
    margin:0px;
    text-align:center;
  }

}


.informatie button {
  padding: 16px 26px;
  background-color: rgb(155, 0, 0);
  border-radius: 6px;
  outline: none;
  border: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 140px;
  transition: .5s ease;
}

.informatie button:hover {
  padding: 16px 26px;
  background-color: rgb(187, 0, 0);
  border-radius: 6px;
  outline: none;
  border: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 140px;
  transition: .5s ease;
}

.informatie a {
  text-decoration: none;
  color: white;
  text-align: center;
  font-weight: 500;
}

.navbar-light .navbar-toggler {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
}


.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-light.navbar-toggler {
  border-color: rgb(255, 255, 255);
}