body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #1F1F1F;
    color: rgba(255, 255, 255, 0.959);   
}

/* Top navigation bar */
.navbar {
    background-color: #333;
    overflow: hidden;
}

.navbar a {
    float: left;
    color: white;
    text-align: center;
    padding: 30px 40px;
    text-decoration: none;
    font-size: clamp(10px, 5vw, 25px)
}

.navbar a:hover {
    background-color: #575757;
    color: white;
}

.levels-table {
    width: 100%;
    max-width: 1200px;
    margin: 10px auto;
}

.levelbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    padding: 20px;
}

.levelbar a {
    padding: 25px 10px;
    text-align: center;
    text-decoration: none;
    font-size: clamp(16px, 2vw, 24px);
    transition: all 0.3s ease;
    background-color: rgb(223, 136, 123);
    color: white;
    border-radius: 10px;
}

.levelbar a:hover {
    background-color: rgb(183, 110, 99);
}

@media screen and (max-width: 600px) {
    .levelbar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 600px){
.navbar a{
    padding: 5vh 7vw;
  }
}

.column-left-home {
  float: left;
  width: 47%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  font-size: clamp(20px, 1.8vw, 30px);
  text-align: left;
}

.column-right-home {
  float: right;
  width: 47%;
  padding: 0 auto;
  font-size: clamp(20px, 1.8vw, 30px);
  text-align: center;
}

.column-left-levels {
  float: left;
  width: 47%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  font-size: clamp(20px, 1.8vw, 30px);
  text-align: center;
}

.column-right-levels{
  float: right;
  width: 47%;
  font-size: clamp(20px, 1.8vw, 30px);
  text-align: left;
}

@media screen and (max-width:1279px) {
  .column-left-levels {
    width: 100%;
  }
  .column-right-levels {
    width: 100%;
  }
}
.row::after {
  content: "";
  display: table;
  clear: both;
}

img {
  max-width: 100%;
  height: auto;    
}

@media screen and (max-width:800px) {
  .column-left-home {
    width: 100%;
    padding: 5vw;
    padding-top: 1vw;
  }

  .column-right-home {
    width: 100%;
    padding: 5vw;
    padding-top: 1vw;
  }

  img {
  max-width: 70%;
  height: auto;    
  }
}

/*Heading format */
h1 {
    color: rgb(252, 99, 79);
    text-align:left;
}

h2{
    color: rgb(252, 99, 79);
    text-align:center;
    font-size:60px;
}

h3 {
    color: rgb(236, 241, 241);
    text-align:left;
    font-size:40px;
    margin:15px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: underline;
}

h4{
    text-align:center;
    font-size:40px;
    text-decoration:underline;
}

h5{
    text-align:center;
    font-size:25px;
    color:red
}

p2{
    margin-left:15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:rgb(220, 237, 238);
}

.centered-paragraph-tutorial {
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:rgb(255, 255, 255);
}

.centered-paragraph-tera {
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:rgb(223, 236, 147);
}

table, th {  
  border: 1px solid #ddd;
  text-align: left;
  border: 1px solid transparent;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

th {
  width: 33.33%;  /* Even distribution for 3 columns */
  padding: 7px;
}



.pokemon-target {
    background-color: #ffffff; /* Green */
  border: none;
  color: black;
  padding: 5px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  width:130px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  opacity:0.8;
}

.pokemon-target:hover {
    background-color: #cec0c0; /* Green */
}

.switch, .switch-can{
   font-family: Verdana, Geneva, Tahoma, sans-serif; 
    width:100px;
    padding: 5px 0px;
    font-size: 15px;
    opacity: 0.8;
}

.switch-cant{
   font-family: Verdana, Geneva, Tahoma, sans-serif; 
    width:100px;
    padding: 5px 0px;
    font-size: 15px;
    cursor: default;
    pointer-events: none;
    opacity: 0.4; /* Make it slightly transparent */
}

.tera-can{
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    width: 150px;
    padding: 5px 0px;
    font-size: 15px;
    border-radius:10px;
    background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4  51%, #E55D87  100%);
}

.tera-cant{
  font-family: Verdana, Geneva, Tahoma, sans-serif; 
    width: 150px;
    padding: 5px 0px;
    font-size: 15px;
    border-radius:10px;
    background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4  51%, #E55D87  100%);
    cursor: default;
    pointer-events: none;
    opacity: 0.6; /* Make it slightly transparent */  
}
.tera:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.btn-group button {
  background-color: #ffffff; 
  border: 1px solid rgb(0, 0, 0); 
  color: rgb(0, 0, 0); 
  padding: 10px 0px; 
  cursor: pointer; 
  float: left; 
  margin-left:15px;
  margin-bottom: 10px;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #cec0c0;
}

.submission{
    margin-left:15px;
    margin-top:20px;
    padding: 15px 0px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: black;            
    border-radius: 10px;
    border-color:black;
    display: block;
    font-family: Verdana, sans-serif;
    background: hsl(0, 87%, 63%);
    font-size:20px;
    width:200px;
}

.btn-grad-water, .btn-grad-fighting, .btn-grad-bug, .btn-grad-fire, .btn-grad-normal, 
.btn-grad-grass, .btn-grad-ice, .btn-grad-poison, .btn-grad-ground, .btn-grad-flying, 
.btn-grad-psychic, .btn-grad-bug, .btn-grad-rock, .btn-grad-ghost, .btn-grad-dark, 
.btn-grad-steel, .btn-grad-fairy, .btn-grad-dragon, .btn-grad-electric {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px 0px;
    text-align: center;
    background-size: 200% auto;
    color: black;            
    border-radius: 10px;
    display: block;
    font-family: Verdana, sans-serif;
    font-size: 20px;
    width: 100%;
}

/* Type-specific styles only include background and border-color */
.btn-grad-water {
    background: linear-gradient(to bottom right, hsl(222, 29%, 97%), hsl(221, 78%, 69%));
    border-color: hsl(222, 41%, 44%);
}

.btn-grad-water:hover {
    background: linear-gradient(to bottom right, hsl(222,29%,94%), hsl(221, 42%, 56%));
    border-color: hsl(222, 41%, 44%);
}

.btn-grad-dragon {
    background: linear-gradient(to bottom right, hsl(257, 39%, 97%), hsl(257, 46%, 78%));
    border-color: hsl(257, 39%, 70%);
}

.btn-grad-dragon:hover {
    background: linear-gradient(to bottom right, hsl(257, 39%, 97%), hsl(257, 47%, 68%));
    border-color: hsl(257, 43%, 65%);
}

.btn-grad-fighting {
    background: linear-gradient(to bottom right, hsl(3, 40%, 97%), hsl(4, 69%, 75%));
    border-color: #d19794;
}

.btn-grad-fighting:hover {
	background: linear-gradient(to bottom right, hsl(3, 40%, 97%), hsl(4, 40%, 68%));
	border-color: #b8736f;
}

.btn-grad-bug {
    background: linear-gradient(to bottom right,  hsl(66,42%,97%),  hsl(65, 39%, 67%));
	border-color: hsl(66, 66%, 66%);
}

.btn-grad-bug:hover {
	background: linear-gradient(to bottom right,  hsl(66,42%,97%),  hsl(65, 32%, 59%));
	border-color: hsl(66, 57%, 61%);
}

.btn-grad-electric {
    background: linear-gradient(to bottom right,  hsl(48,41%,97%),  hsl(48, 79%, 69%));
	border-color: hsl(48,41%,70%);
}

.btn-grad-electric:hover {
	background: linear-gradient(to bottom right,  hsl(66,42%,97%),  hsl(65, 40%, 58%));
	border-color: hsl(66, 56%, 62%);
}

.btn-grad-fairy {
    background: linear-gradient(to bottom right,  hsl(310,41%,97%),  hsl(311, 42%, 82%));
	border-color: hsl(310,41%,70%);
}

.btn-grad-fairy:hover {
	background: linear-gradient(to bottom right,  hsl(310,41%,97%),  hsl(312, 32%, 66%));
	border-color: hsl(310, 38%, 65%);
}

.btn-grad-normal {
    background: linear-gradient(to bottom right,  hsl(60,14%,97%),  hsl(60,14%,84%));
	border-color: hsl(60,14%,70%);
}

.btn-grad-normal:hover {
	background: linear-gradient(to bottom right,  hsl(60,14%,97%),  hsl(60, 14%, 79%));
	border-color: hsl(60,14%,70%);
}

.btn-grad-fire {
    background: linear-gradient(to bottom right,  hsl(25,40%,97%),  hsl(24, 47%, 68%));
	border-color: hsl(25,40%,70%);
}

.btn-grad-fire:hover {
	background: linear-gradient(to bottom right,  hsl(25,40%,97%),  hsl(24, 41%, 59%));
	border-color: hsl(25,40%,70%);
}

.btn-grad-grass {
    background: linear-gradient(to bottom right,  hsl(100,30%,97%),  hsl(100, 39%, 72%));
	border-color: hsl(100,30%,70%);
}

.btn-grad-grass:hover {
	background: linear-gradient(to bottom right,  hsl(100,30%,97%),  hsl(100, 35%, 60%));
	border-color: hsl(100,30%,70%);
}

.btn-grad-ice {
    background: linear-gradient(to bottom right,  hsl(180,15%,97%),  hsl(180, 41%, 77%));
	border-color: hsl(180,15%,70%);
}

.btn-grad-ice:hover {
	background: linear-gradient(to bottom right,  hsl(180,15%,97%),  hsl(180, 27%, 59%));
	border-color: hsl(180,15%,70%);
}

.btn-grad-poison {
    background: linear-gradient(to bottom right,  hsl(300,30%,97%),  hsl(300, 40%, 73%));
	border-color: hsl(300,30%,70%);
}

.btn-grad-poison:hover {
	background: linear-gradient(to bottom right,  hsl(300,30%,97%),  hsl(300, 46%, 67%));
	border-color: hsl(300,30%,70%);
}

.btn-grad-ground {
    background: linear-gradient(to bottom right,  hsl(44,27%,97%),  hsl(44, 38%, 73%));
	border-color: hsl(44,27%,70%);
}

.btn-grad-ground:hover {
	background: linear-gradient(to bottom right,  hsl(44,27%,97%),  hsl(44, 44%, 69%));
	border-color: hsl(44,27%,70%);
}

.btn-grad-flying {
    background: linear-gradient(to bottom right,  hsl(255,20%,97%),  hsl(255, 38%, 79%));
	border-color: hsl(255,20%,70%);
}

.btn-grad-flying:hover {
	background: linear-gradient(to bottom right,  hsl(255,20%,97%),  hsl(255, 40%, 73%));
	border-color: hsl(255,20%,70%);
}

.btn-grad-psychic {
    background: linear-gradient(to bottom right,  hsl(342,33%,97%),  hsl(342, 61%, 71%));
	border-color: hsl(342,33%,70%);
}

.btn-grad-psychic:hover {
	background: linear-gradient(to bottom right,  hsl(342,33%,97%),  hsl(342, 58%, 62%));
	border-color: hsl(342,33%,70%);
}

.btn-grad-rock {
    background: linear-gradient(to bottom right,  hsl(49,35%,97%),  hsl(49, 37%, 68%));
	border-color: hsl(49,35%,70%);
}

.btn-grad-rock:hover {
	background: linear-gradient(to bottom right,  hsl(49,35%,97%),  hsl(49, 31%, 64%));
	border-color: hsl(49,35%,70%);
}

.btn-grad-ghost {
    background: linear-gradient(to bottom right,  hsl(262,21%,97%),  hsl(260, 22%, 66%));
	border-color: hsl(262,21%,70%);
}

.btn-grad-ghost:hover {
	background: linear-gradient(to bottom right,  hsl(262,21%,97%),  hsl(259, 29%, 64%));
	border-color: hsl(262,21%,70%);
}

.btn-grad-dark {
    background: linear-gradient(to bottom right,  hsl(24,18%,97%),  hsl(24, 8%, 63%));
	border-color: hsl(24,18%,70%);
}

.btn-grad-dark:hover {
	background: linear-gradient(to bottom right,  hsl(24,18%,97%),  hsl(23, 5%, 51%));
	border-color: hsl(24,18%,70%);
}

.btn-grad-steel {
    background: linear-gradient(to bottom right,  hsl(240,6%,97%),  hsl(240, 5%, 75%));
	border-color: hsl(240,6%,70%);
}

.btn-grad-steel:hover {
	background: linear-gradient(to bottom right,  hsl(240,6%,97%),  hsl(240, 4%, 64%));
	border-color: hsl(240,6%,70%);
}

/* .item and .container removed (not referenced in templates) */

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

.item {
  border: 2px solid rgb(95 97 110);
  border-radius: 0.5em;
  padding: 20px;
  width:50em;
  height:30em;
}

.container {
  border: 2px solid rgb(75 70 74);
  border-radius: 0.5em;
  font: 1.2em sans-serif;

  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Remove SCSS variables and use plain CSS values */
body {
  background-color: #212121;
  color: #fff;
  font-family: monospace, serif;
  letter-spacing: 0.05em;
}

h7 {
  font-size: 23px;
}

.form {
  width: 300px;
  padding: 64px 15px 24px;
  margin: 0 auto;
}
.form .control {
  margin: 0 0 24px;
}
.form .control input {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: monospace, serif;
  letter-spacing: 0.05em;
  font-size: 16px;
}
.form .control input:hover,
.form .control input:focus {
  outline: none;
  border: 0;
}
.form .btn {
  width: 100%;
  display: block;
  padding: 14px 16px;
  background: transparent;
  outline: none;
  border: 0;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-family: monospace;
  font-size: 16px;
}

.block-cube {
  position: relative;
}
.block-cube .bg-top {
  position: absolute;
  height: 10px;
  background: linear-gradient(90deg, #020024 0%, #00d4ff 100%);
  bottom: 100%;
  left: 5px;
  right: -5px;
  transform: skew(-45deg, 0);
  margin: 0;
}
.block-cube .bg-top .bg-inner {
  bottom: 0;
}
.block-cube .bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #020024 0%, #00d4ff 100%);
}
.block-cube .bg-right {
  position: absolute;
  background: rgba(0, 212, 255, 1);
  top: -5px;
  z-index: 0;
  bottom: 5px;
  width: 10px;
  left: 100%;
  transform: skew(0, -45deg);
}
.block-cube .bg-right .bg-inner {
  left: 0;
}
.block-cube .bg .bg-inner {
  transition: all 0.2s ease-in-out;
}
.block-cube .bg-inner {
  background: #212121;
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  bottom: 2px;
}
.block-cube .text {
  position: relative;
  z-index: 2;
}
.block-cube.block-input input {
  position: relative;
  z-index: 2;
}
.block-cube.block-input input:focus ~ .bg-right .bg-inner,
.block-cube.block-input input:focus ~ .bg-top .bg-inner,
.block-cube.block-input input:focus ~ .bg-inner .bg-inner {
  top: 100%;
  background: rgba(255, 255, 255, 0.5);
}
.block-cube.block-input .bg-top,
.block-cube.block-input .bg-right,
.block-cube.block-input .bg {
  background: rgba(255, 255, 255, 0.5);
}
.block-cube.block-input .bg-right .bg-inner,
.block-cube.block-input .bg-top .bg-inner {
  transition: all 0.2s ease-in-out;
}
.block-cube.block-input:focus .bg-top,
.block-cube.block-input:focus .bg-right,
.block-cube.block-input:focus .bg,
.block-cube.block-input:hover .bg-top,
.block-cube.block-input:hover .bg-right,
.block-cube.block-input:hover .bg {
  background: rgba(255, 255, 255, 0.8);
}
.block-cube.block-cube-hover:focus .bg .bg-inner,
.block-cube.block-cube-hover:hover .bg .bg-inner {
  top: 100%;
}

.switch-button, .tera-button {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Make all move buttons clickable */
.btn-grad-water, .btn-grad-fighting, .btn-grad-bug, 
.btn-grad-dragon, .btn-grad-electric, .btn-grad-fairy {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Make target buttons clickable */
.pokemon-target {
    cursor: pointer;
    transition: all 0.3s ease;
}

.feedback-container {
  border: 1px solid rgba(255,255,255,0.3);
  padding: 15px;
  background: rgba(0,0,0,0.5);
  font-family: Verdana, sans-serif;
  white-space: pre-wrap;
}

/* Visual style for a selected button. JS toggles the class 'btn-selected'.
   Keep pointer-events enabled so the user can toggle selection again. */
.btn-selected {
  border: 4px solid limegreen !important;
  box-shadow: 0 0 12px rgba(50, 205, 50, 0.6) !important;
  opacity: 1 !important;
  border-radius: 6px !important;
}

.main-wrapper{
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}

.flash-messages {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px auto;
    text-align: center;
}

.flash-message {
    background: rgba(255, 0, 0, 0.1);
    color: #ff3333;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid #ff3333;
}