/* ==========================================================================

	Google Font

========================================================================== */

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext";

@import "https://fonts.googleapis.com/css?family=Oranienbaum&subset=cyrillic,cyrillic-ext,latin-ext";

/* navigation styles
/* ========================================== */
 /* Navbar Styles */
 .navbar {
border:none;
  padding: 10px 20px;
}
.navbar-brand {
  font-weight: bold;
  color: #333 !important;
}
.navbar-nav {
  margin-left: auto;
}
.navbar-nav > li > a {
  color: #333 !important;
  font-size: 16px;
  transition: color 0.3s;
}
.navbar-nav > li > a:hover {
  color: #007bff !important;
}
/* Centering navbar links */
.navbar-collapse {
  justify-content: flex-end;
}
/* Responsive Navbar */
@media (max-width: 990px) {
  .navbar-nav {
    float: none;
    text-align: center;
  }
  .navbar-nav > li {
    display: block;
  }
}
/* Naviugation
/* ========================================== */
:root {
  --underline-height: 0.5em;
  --transition-duration: 0.5s;
  --button-color:#38DC8D;
  --numbers-color:#37BDDB;
}

nav {
  position: relative;
  white-space: nowrap;
  background: white;
  padding: var(--underline-height) 0;
  margin: 2em 0;
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.05);
}

/* Containers
/* ========================================== */

.custom-box {
  width:90%;
  padding: 30px; 
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #343a40; 
  color: white; 
  text-align: center;
}


.goal-box {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border: 2px solid white;
  border-radius: 4px;
  margin: 10px auto;
  min-width: 120px;
}


/* Buttons
/* ========================================== */


 #numbers button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--numbers-color);
    transition: background-color 0.3s;
  }
/* #numbers button:hover {
  background-color: #5671DB; 
} */


  .Operations button{
    margin: 5px;
    padding: 10px 20px;
    font-size: 20px;
    color:black;
    background-color: var(--button-color);
  }
  /* .Operations button:hover {
  background-color: #60DB56; 
} */

  .UndoAndReset button{
    margin: 5px;
    padding: 5px 20px;
    font-size: 14px;
    color:black;
    background-color: var(--button-color);
    min-width: 100px;
  }

  .UndoAndReset button:hover {
  background-color: #60DB56; 
}
  .NextAndSkip{
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  background-color: #569BDB;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  min-width: 120px;
  
}

.NextAndSkip:hover {
  background-color: #5671DB; 
}

.errorMessage{
  color:rgb(174, 38, 38);
}

.number-btn.selected { outline: 3px solid #fff; filter: brightness(0.9); }
.operator-btn.selected {
  background-color: #ffeb3b; /* yellow highlight */
  outline: 2px solid #333;   /* visible focus */
}