:root{
  --yessNavBlack: #212529;
  --grau: #2d2e2e; /*Jet*/
  --schwarz: #100c08; /*Smokey Black*/
  --hauptfarbe: #54D5C8; /* vorher #67c5bb*/
  --alt-hauptfarbe:#43B1A4; /*keppel*/
  --hauptfarbe-dunkel: #34897f;
  --hauptfarbe-hell: #77dace; /* vorher #67c5bb*/
  --mandel:#F2E2d2; /*weiße Schachfelder?*/ 
}


/* https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

html, body {
  font-size: 16px;
  overflow-x: hidden;
}


.item {
  color: white;
}


.container-fluid{
  --bs-gutter-x:0 !important; /*notlösung - wegen space rechts */
  margin-bottom:0 !important;
  padding-bottom: 0 !important;
 /* overflow: hidden;*/
}
.row{
  --bs-gutter-x:0 !important; /*notlösung - wegen space rechts */
 
}


body{
  background-color: var(--grau);
  font-family: "Rubik", sans-serif!important;

}
/*
html,body {
  margin: 0;
  padding: 0;
}
*/

#yessNav {
  background-color: var(--yessNavBlack);
  height: 5rem;
  border-bottom: solid 2px;
}
#navName{
  /*background-color: #54D5C8;*/
  /*height: 2rem;*/
  /*width: 5rem;*/
}

#hamburger {
  cursor: pointer;
}
#hamburgerImg{
  height: 2.8rem;
}



.yessName {
  padding: 1rem;
  font-weight: 700;
  font-size: 2rem;
}
#logoImg {
  height: 4.5rem;
}
.navPlaceholder{
  height: 2.8rem;
  width: 2.8rem;
}

#navMenu{
  display: none;
  position: absolute;
  z-index: 10;
  width: 100%;
  background-color: var(--yessNavBlack);
  opacity: 0.95;
}

.navMenuItem {
  font-size: 1.8rem;
  padding: 0.5rem;
  text-align: center;
}

.navbar-nav a{
  color:white;
}
.logoYC{
  padding-top: 2px;
  width: 150px; /* Change the width to whatever value you need */
  height: auto; /* Set height to auto to maintain aspect ratio */
}

.nav-link:hover{
color: var(--hauptfarbe) !important;
}
.navbar-toggler{
  border-radius: none !important;
}
.navbar-toggler {
  /* Example: Adjust the padding, size, and border */
  padding: 8px !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid #ccc !important; /* Set the border width, style, and color here */
  border-radius: 4px !important;
  background-color: transparent !important;
}
/* Style the custom-toggler-icon container */
.custom-toggler-icon {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
}

/* Style the lines inside the custom-toggler-icon */
.line {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--mandel) !important; /* Set the color of the lines */
  margin: 4px 0 !important; /* Set the space between the lines */
}

.navbar-toggler:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-color: var(--hauptfarbe) !important; 
}
/* Add a hover effect for the lines */
.navbar-toggler:hover .line {
  background-color: var(--hauptfarbe) !important;
}

.navbar-toggler:focus {
  outline: none !important; /* Remove the default outline */
  box-shadow: 0 0 0 2px var(--hauptfarbe) !important; /* Add a custom focus effect */
}
/* Add a hover effect for the lines */
.navbar-toggler:focus .line {
  background-color: var(--hauptfarbe) !important;
}


  .titlePuzzle{

    background-color: var(--grau);
    justify-content: center;
    align-items: center;

  }
  .titlePuzzle h2{
    color:white;
  }

  .subtitlePuzzle{

    background-color: var(--grau);
    justify-content: center;
    align-items: center;

  }
  
  .subtitlePuzzle h2{
    color: #fff;
  }
.progress {
  height: 1rem;
  width: 80vh;
}
.progressTraining {
  height: 1rem;
  width: 80vh;
  background-color: #fff;
}

.titleAction{
  font-size:0.95rem;

}
#ratingName{
  margin-left: 2rem;
} 
#ratingValue{
  color: var(--hauptfarbe);
}


  .puzzleInfo{
    background-color: var(--grau);
  }
  .puzzleAttributes{
    background-color: var(--grau);
    color:white;
    align-items:flex-start;
    max-height: 1vh;
  }


.board{
  background-color: var(--grau);
  
}
.hintDiv{
  color: white;
  max-height: 1vh;
}
#puzzleProgress{
  display: flex;
}
#spinnerLoad{
  color: var(--hauptfarbe);
  height: 1rem;
  width: 1rem;
}
#turnColor{
  color: var(--hauptfarbe);
}

.board{
  background-color: var(--grau);
  width:100%;

}
#chessboard{
  background-color: var(--grau);
  width:100%; 
}
#boardmain{
  display: flex;
  justify-content: center;

}
#board1{
  width: 70vh;
  visibility: hidden;
}

  #puzzleDetails{
 margin-bottom: 20px;
  }
  .settings{
    height: 50%;
  }
  .left{
    background-color: var(--grau);
    height: 25vh;
    width: 100%;
    
  }


  
#rating {
    background-color: var(--grau);
    color: white;
    text-align: center;
    font-weight: 500;
    overflow: hidden;
    margin:auto;
    border-radius: 6px;
    padding: 0px;

  }
.ratingField {
  background-color: var(--grau);
  color: white;
  text-align: center;
  font-weight: 500;
  overflow: hidden;
  margin:auto;
  border-radius: 6px;
  padding: 0px;
}
#puzzleProgress{
  background-color: var(--hauptfarbe-dunkel);
  color: var(--hauptfarbe-dunkel);
}



.skipIcons{
  border-radius: 4px;
}
.right{
  background-color: var(--grau) ;
  height: 25vh;
  width: 100%;
}




.btn.btn-primary{
  background-color: var(--hauptfarbe);
  border-color:var(--hauptfarbe);
  color: #100c08;
  border-width: 4px;
  border-radius: 6px;
  font-weight: 600;
  padding: 0.5em 0.5em;
}


.btn.btn-primary:hover {
  background-color: var(--hauptfarbe-hell);
  border-color:var(--hauptfarbe-hell);
  color:#100c08;
  border-width: 4px;
  border-radius: 6px;
  font-weight: 600;
}

.btn.btn-primary:active {
  background-color: var(--hauptfarbe-hell) !important;
  border-color: var(--hauptfarbe-hell) !important;
  color: #100c08 !important;
  border-radius: 6px;
  border-width: 4px;
  font-weight: 600;
}
.btn.btn-secondary{
  background-color: transparent;
  border-color:var(--hauptfarbe);
  color: var(--hauptfarbe);
  border-width: 2px;
  border-radius: 6px;
  font-weight: 600;
  
}


.btn.btn-secondary:hover {
  background-color: transparent;
  border-color: var(--hauptfarbe);
  color: var(--hauptfarbe);
  border-width: 2px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow:  -0.4em var(--hover);
  transform: translateY(-0.25em);
}

.btn.btn-secondary:active {
  background-color: var(--hauptfarbe-dunkel) !important;
  border-color: var(--hauptfarbe-dunkel) !important;
  color: white;
  border-radius: 6px;
  border-width: 4px;
  font-weight: 600;
}
.btn.btn-transparent{
  color: white;
}

.btn-transparent {
  background-color: transparent;
  border: px solid white;
  border-radius: px;
  padding: 4px;
  transition: 0.2s ease-in-out;
  font-weight: 600;
}

.btn-transparent:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border: px solid white;
  font-weight: 600;
}

.btn-transparent:active {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid white;
  font-weight: 600;
}
.leftSide{
  background-color: var(--grau);
}
.rightSide{
  background-color: var(--grau);
}
.adSpace{
  height: 400px;
  background-color: var(--grau);
}
.footerContainer{
  margin-top: 100px;
  height: 50px;
}
footer {
  background-color: var(--grau);
  color: white;
 
  margin: 0;
  padding: 0;
}
footer p{
  margin: 0;
  color: white;
}
footer a{
  color: white;
  text-decoration: none;
}
footer a:hover{
  color: var(--hauptfarbe);
  text-decoration: none;
}

.material-icons:hover {
background-color: var(--hauptfarbe);
}


/* css for API Landing page below*/
.btn.btn-success {
  background-color: var(--hauptfarbe);
  color: #100c08;
  font-weight: 600;
}
.btn.btn-success:hover {
  background-color: var(--hauptfarbe-dunkel);
  color: #100c08;
  font-weight: 600;
}
.btn.btn-success:active {
  background-color: var(--hauptfarbe-dunkel)!important;
  color: #100c08!important;
  font-weight: 600;
}


/* css Impressum/privacy/terms & conditions page below*/

.impressumHeader{
  background-color: var(--grau);
  color: white;
}


.impressumBody{
  background-color: var(--grau);
  color: white;
  line-height: 1rem;
}





h1,
p {
  color: white;
}

/*chess board highlights*/
.highlight1-32417, .highlight2-9c5d2 {
  box-shadow: inset 0 0 3px 3px black;
}
.highlight-click {
  box-shadow: inset 0 0 3px 3px black;
}
.highlight-wrong{
  box-shadow: inset 0 0 3px 3px red;
}
.highlight-computer{
  box-shadow: inset 0 0 3px 3px blue;
}
.highlight-correct{
  box-shadow: inset 0 0 3px 3px rgb(0, 255, 0);
}
.highlight-hint{
  box-shadow: inset 0 0 3px 3px yellow;
}

@keyframes moveInL{

  0%   { transform: translate(-1000%, 0)}
  50%   { transform: translate(50%, 0)}
  60%   { transform: translate(-40%, 0) }
  70%   { transform: translate(30%, 0) }
  80%   { transform: translate(-20%, 0)}
  90%  { transform: translate(10%, 0) }
  100% { transform: translate( 0%, 0) }
}

@keyframes moveInR{
  0%   { transform: translate(1000%, 0)}
  50%   { transform: translate(-50%, 0)}
  60%   { transform: translate(40%, 0) }
  70%   { transform: translate(-30%, 0)}
  80%   { transform: translate(20%, 0)}
  90%  { transform: translate(-10%, 0)}
  100% { transform: translate( 0%, 0) }
}
.bounce-in-l {
  animation-name: moveInL;
  animation-duration: 0.7s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

.bounce-in-r {
  animation-name: moveInR;
  animation-duration: 0.7s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

/*Hunt */

.wortmarkeHunt{
  font-size: 30px;
  color:var(--hauptfarbe-dunkel) !important;
  margin-left: -100px !important;
}
#wortHunt{
  font-style:italic;
  color: var(--hauptfarbe);
}
.huntBoard{
  background-color: var(--grau);
  position: relative;
}
#boardHunt{
  width: 85vh;
}
.hunt {
  font-size: 2.5rem;
}
.puzzleCounter{
  height: 100px;
}
.playHunt{
  border-top: solid 1px var(--mandel);
  border-bottom: solid 1px var(--mandel);
}

#counterNumber{
  font-size: 5rem;
  color:var(--mandel);
}
.rocket_launch {
  color: var(--hauptfarbe);
}
#timerNumber {
  color: var(--mandel);
  font-size: 3rem;
}
.puzzleRating {
  color: var(--mandel);
}

/*Hunt IntroModal */

.modal {
  display: none;
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 345px;
  max-height: 450px;
  background-color: var(--grau);
  border-radius: 8px;
  border-width: 4px;
  border-style: solid;
  border-color:#43B1A4;
  padding: 1px;
  text-align: top;
  overflow-y: hidden; /* Prevent vertical scrolling */
}
.titleModal{
  color: var(--mandel);
  font-size: 1.5rem;
}
.rulesHunt{
  font-size: 1.5rem;
}
.closeModalButton {
  background-color: var(--grau);
  color: var(--hauptfarbe);
  border-color: var(--hauptfarbe);
}
.custom-list {
  list-style-type: none;
  padding: 0;
}

.custom-list-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.custom-list-item svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.custom-list-item span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wellDone {
  font-size: 2rem;
}

/*Hunt modal Countdown*/

.modalCount {
  display: flex;
  justify-content: center;
  align-items: center;
  /*position: fixed; */
  position: absolute;
  z-index: 1;
  left:50%;
  top: 54.6%;
  transform: translate(-50%, -50%);
  min-width: 345px;
  max-width: 345px;
  min-height: 450px;
  max-height: 450px;
  background-color: transparent;
  padding: 1px;
  text-align: top;
  overflow-y: hidden; /* Prevent vertical scrolling */
}

#countdown {
  color: var(--yessNavBlack)/*#54D5C8*/;
  font-size: 12rem;
  transform: scale(1);
  animation-timing-function: ease-in;
  animation: pulse 1000ms infinite;
}


@keyframes pulse {
  0% {
    transform: scale(0.95);
  }

  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0.95);
  }
}
















/*modalScore */
.modalScore {
  display: none;
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 345px;
  max-height: 450px;
  background-color: var(--grau);
  border-radius: 8px;
  border-width: 4px;
  border-style: solid;
  border-color:#43B1A4;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1px;
  text-align: top;
  overflow-y: hidden; /* Prevent vertical scrolling */
}
.scoreHunt{
  font-size: 3rem;
  font-weight: bold;
}
.scoreDetails{
  color: var(--mandel);
}

/* Media Queries to put at the end in order to overwrite above settings for different screen sizes*/

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


@media only screen and (min-device-width: 320px) and (max-device-width: 380px) {
  
  #yessNav {
    background-color: var(--yessNavBlack);
    height: 3.5rem;
    border-bottom: solid 2px;
    padding: 20px !important;
  }
  .navPlaceholder{
    height: 1.5rem;
    width: 1.5rem;
  }
  .yessName{
    font-size: 1.5rem;
  }
  #logoImg{
    height: 3rem;
  }
  #hamburgerImg{
    height: 1.5rem;
  }
  

  .navMenuRow{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .navMenuItem{
    font-size: 1rem;
  }
 


  .nav-item.nav-link{
    font-size: 0.9rem;
  }
  .progress {
    height: 0.75rem;
    width: 85vw;
  }
  .progressTraining {
    height: 0.75rem;
    width: 85vw;
  }


  .titlePuzzle{
    height: 1.1rem;
  }
  .titlePuzzle h2{
    font-size: 0.9rem;
  }
  #turnColor {
    font-size: 0.9rem;
  }
  #turnColorHunt {
    font-size: 0.9rem;
  }

  .puzzleAttributes {
    font-size: 0.9rem;
  }
  #ratingName, #ratingValue {
    font-size: 0.95rem;
  }


  #spinnerLoad{
    height: 0.75rem;
    width: 0.75rem;
    margin-left: 10px;
  }
  .footer a{
    font-size: 0.5rem;
  }
  .chooseRating{
    font-size: 1rem;
  }
  #rating{
    font-size: 1rem;
  }
  .buttonBar{
    font-size: 1rem;
  }
  span.material-icons{
    font-size: 1.3rem;
  }
  .btn.btn-primary{
    font-size: 0.8rem;
  }
  .wortmarke{
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  .wortmarkeHunt{
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  .puzzleCounterTimer{
    height: 2.1rem !important;
  }
  .counter{
    height: 2.2rem !important;
  }
  .timer{
    height: 2.2rem !important;
  }
  #rocket{
    height: 1.6rem;
  }
  #alarm{
    height: 1.6rem;
  }
  #counterNumber{ 
    font-size:1.6rem;
  }
  #timerNumber{ 
    font-size:1.6rem;
  }
  .feedbackIcon{
    height: 0.8rem;
  }
  .puzzleRating{
    font-size: 0.5rem;
  }
  .feedbackDiv{
    height: 3rem;
  }
  #feedbackContainer{
    height: 9rem;

  }

  .footerRow{
    height: 100px;
  }
  .custom-list-item img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
}

@media only screen and (min-device-width: 380.01px) and (max-device-width: 500px) {

  #yessNav {
    background-color: var(--yessNavBlack);
    height: 3.5rem;
    border-bottom: solid 2px;
    padding: 20px !important;
  }
  #navName{
    padding-top: 0.75rem;
    padding-bottom: 0.35rem;
  }
  .navPlaceholder{
    height: 1.5rem;
    width: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.35rem;
  }
  .yessName{
    font-size: 2.2rem;
  }
  #logoImg{
    height: 3rem;
  }
  #hamburger{
    padding-top: 0.75rem;
    padding-bottom: 0.35rem;
  }
  #hamburgerImg{
    height: 1.5rem;
  }

  .navMenuRow{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .navMenuItem{
    font-size: 1.3rem;
  }
  
  .nav-item.nav-link{
    font-size: 0.9rem;
  }
  .titlePuzzle h2{
    font-size: 1rem;
  }
  #turnColor {
    font-size: 1rem;
  }
  #turnColorHunt {
    font-size: 1rem;
  }
  .puzzleAttributes {
    font-size: 0.9rem;
  }
  #ratingName, #ratingValue {
    font-size: 0.95rem;
  }
  .progress{
    height: 0.75rem;
    width: 20rem;
  }
  .progressTraining{
    height: 0.75rem;
    width: 21rem;
  }

  #spinnerLoad{
    height: 0.75rem;
    width: 0.75rem;
    margin-left: 10px;
  }
  .footer a{
    font-size: 0.5rem;
  }
  .chooseRating{
    font-size: 1rem;
  }
  #rating{
    font-size: 1rem;
  }
  .buttonBar{
    font-size: 1rem;
  }
  span.material-icons{
    font-size: 1.3rem;
  }
  .btn.btn-primary{
    font-size: 0.8rem;
  }
  .wortmarke{
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  .wortmarkeHunt{
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  .puzzleCounterTimer{
    height: 4rem !important;
  }
  #rocket{
    height: 2rem !important;
  }
  #alarm{
    height: 2rem !important;
  }
  #counterNumber{ 
    font-size:2.8rem !important;
  }
  #timerNumber{ 
    font-size:2rem !important;
  }
  .feedbackIcon{
    height: 1rem;
  }
  .puzzleRating{
    font-size: 0.65rem;
  }
  .feedbackDiv{
    height: 3rem;
  }
  #feedbackContainer{
    height: 14rem
  }
  .footerRow{
    height: 100px;
  }
  .custom-list-item img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
}

@media only screen and (min-device-width: 500.01px) and (max-device-width: 767px) {
  .titlePuzzle h2{
     font-size: 1rem;
   }
   #turnColor {
    font-size: 1rem;
  }
  #turnColorHunt {
    font-size: 1rem;
  }
   .puzzleAttributes {
    font-size: 0.9rem;
  }
  #ratingName, #ratingValue {
    font-size: 1.2rem;
  }
  .progress{
    height: 0.75rem;
    width: 25rem;
  }
  .progressTraining{
    height: 0.75rem;
    width: 27rem;
  }
  #spinnerLoad{
    height: 0.75rem;
    width: 0.75rem;
    margin-left: 12px;
  }
  .footer a{
    font-size: 0.5rem;
  }
  #rating{
    font-size: 1.4rem;
  }
  .chooseRating{
    font-size: 1.5rem;
  }
  span.material-icons{
    font-size: 1.5rem;
  }
  .navbar {
    position: static;
    padding: 0px !important;
    margin: 0px !important;
  }
  .navbar-nav {
    display: flex;
    flex-direction: column;
    padding:0px !important;

  }
  .navbar-toggler{
    margin: 10px;
  }
  .navbar-collapse {
    max-height: none; 
  }
  .nav-link {
    padding-top: 1px !important;  
    padding-bottom: 1px !important; 
    margin-bottom: 0;   
  }
  .wortmarke{
    font-size: 1.7rem !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  .wortmarkeHunt{
    font-size: 1.7rem !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  .feedbackIcon{
    height: 1.2rem;
  }
  .puzzleRating{
    font-size: 0.7rem;
  }
  .feedbackDiv{
    height: 4rem !important;
  }
  #feedbackContainer{
    height: 16rem;
  }
  .footerRow{
    height: 100px;
  }
 }
 


@media only screen and (min-device-width: 768px) and (max-device-width: 1299.99px) {
  .titlePuzzle h2{
     font-size: 1.2rem;
   }
   #turnColor {
    font-size: 1.2rem;
  }
  #turnColorHunt {
    font-size: 1.2rem;
  }
   .puzzleAttributes {
    font-size: 1rem;
  }

  #rating{
    font-size: 1.3rem !important;
  }
  .chooseRating{
    font-size: 1.5rem;
  }
  span.material-icons{
    font-size: 1.5rem;
  }
  .navbar {
    padding-top: 1rem;
    max-height: 8vh;
  }
  .nav-item.nav-link{
    font-size: 1.5rem;
  }

  .navbar-nav {
    justify-content: flex-start; 
    margin-left: 0!important; 
    padding-left: 0; 
  }
  .gameInfo{
    width: 28vw !important;
  }
  .wortmarke{
    font-size: 30px !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  .wortmarkeHunt{
    font-size: 30px !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  #rocket{
    height: 2rem !important;
  }
  #alarm{
    height: 2rem !important;
  }
  #timerNumber{
    font-size: 1.8rem !important;
  }
  #counterNumber{
    font-size: 1.8rem !important;
  }
  .feedbackIcon{
    height: 1.3rem;
  }
  .puzzleRating{
    font-size: 0.8rem;
  }
  .feedbackDiv{
    height: 4rem !important;
  }
  .footerRow{
    height: 100px;
  }
  .progressTraining{
    height: 0.75rem;
    width: 33rem;
  }
 }
 @media only screen and (min-device-width: 1300px) and (max-device-width: 1599px){
  .titlePuzzle h2{
     font-size: 1.4rem;
   }
   #turnColor {
    font-size: 1.4rem;
  }
  #turnColorHunt {
    font-size: 1.4rem;
  }
   .puzzleAttributes {
    font-size: 1rem;
  }
  #rating{
    font-size: 1.5rem;
  }
  .chooseRating{
    font-size: 1.5rem;
  }
  span.material-icons{
    font-size: 1.5rem;
  }
  .logoYC{
    width: 150px;
  }
  .navbar {
    padding-top: 1rem;
    max-height: 8vh;
  }
  .nav-item.nav-link{
    font-size: 2rem;
  }

  .navbar-nav {
    justify-content: flex-start; 
    margin-left: 0!important; 
    padding-left: 0; 
  }
  .gameInfo{
    width: 25vw !important;
    
  }
  .wortmarke{
    font-size: 30px !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  .wortmarkeHunt{
    font-size: 30px !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  }
  #rocket{
    height: 4rem !important;
  }
  #alarm{
    height: 4rem !important;
  }
  #timerNumber{
    font-size: 2.2rem !important;
  }
  #counterNumber{
    font-size: 2.2rem !important;
  }
  .feedbackIcon{
    height: 1.6rem;
  }
  .puzzleRating{
    font-size: 1.4rem;
  }
  .feedbackDiv{
    height: 4.5rem !important;
  }
  .progressTraining{
    height: 1.2rem;
    width: 35rem;
    border-radius: 1rem;
  }
 }
@media screen and (min-width: 1600px){
  .titlePuzzle h2{
     font-size: 2.2rem;
   }
   #turnColor {
    font-size: 2rem;
  }
  #turnColorHunt {
    font-size: 2rem;
  }
   .puzzleAttributes {
    font-size: 2rem;
  }
  #rating{
    font-size: 2rem;
  }
  .chooseRating{
    font-size: 2.2rem;
  }
  span.material-icons{
    font-size: 2.2rem;
  }
  .logoYC{
    width: 150px;
  }
  .navbar {
    padding-top: 1.1rem;
    max-height: 8vh;
  }
  .nav-item.nav-link{
    font-size: 3rem;
  }

  .navbar-nav {
    justify-content: flex-start; 
    margin-left: 0!important; 
    padding-left: 0; 
  }
  .gameInfo{
    width: 25vw !important;
    
  }
  .wortmarke{
    font-size: 40px !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  
  }
  .wortmarkeHunt{
    font-size: 40px !important;
    font-weight: bold !important;
    color:var(--hauptfarbe) !important;
    margin-left: -100px !important;
  
  }
  #rocket{
    height: 4rem !important;
  }
  #alarm{
    height: 4rem !important;
  }
  #timerNumber{
    font-size: 3.2rem !important;
  }
  #counterNumber{
    font-size: 3.2rem !important;
  }
  .feedbackIcon{
    height: 2rem;
  }
  .puzzleRating{
    font-size: 1.6rem;
  }
  .feedbackDiv{
    height: 8rem !important;
  }
  .progressTraining{
    height: 1.2rem;
    width: 35rem;
    border-radius: 1rem;
  }


 }