body{
background:linear-gradient(to right, #22b686, #3067f1);

width: 100%;
overflow-x: hidden;
overflow-y: auto;
display: flex; 
justify-content: center; 
flex-direction: column;
gap: 20px;
align-items: center; 
min-height: 100vh;
font-family: Verdana, sans-serif;
text-align:center;
margin: 0; 
padding: 0;
        
       }
       
 .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            padding: 10px;
            position: fixed;
        }

        .nav-links {
            display: none;
            flex-direction: column;
            background-color: #333;
            position: absolute;
            top: 50px;
            left: 10px;
            width: 200px;
                padding:10px;
                border-radius:5px;
        }

        .nav-links a {
                
            color: white;
            padding: 10px;
            text-decoration: none;
            display: block;
        }

        .burger {
            cursor: pointer;
            width: 25px;
            height: 25px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .burger div {
            width: 100%;
            height: 3px;
            background-color: white;
        }


        
       .spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid transparent;
  background: linear-gradient(to right, #22b686, #3067f1) border-box;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
        
        
        

        .container-change {
                background-color:white;
                width: 300px;
         padding: 20px;
         border-radius: 10px;
         border:1px solid black;
          display: flex;
        align-items: center; 
          justify-content: center;
         flex-direction: column;
         
gap: 20px;
                
                
                }


  .container { 
         background-color:white;
      width: 300px;
         padding: 20px;
         border-radius: 10px;
      background-image: url('container-background.png');
background-position: top left;
background-repeat: no-repeat;
         border:1px solid black;
          display: flex;
        align-items: center; 
          justify-content: center;
         flex-direction: column;
      word-wrap: break-word; 
      overflow-wrap: break-word;
         white-space: normal; 
          word-break: break-all;
gap: 20px;
        } 


  
 .container2 { 
         background-color:white;
      width: 260px;
      padding:20px;
         border-radius: 10px;
          border:1px dotted black;
         background-color:snow;
          display: flex;
        align-items: center; 
          justify-content: center;
         flex-direction: column;
      word-wrap: break-word; 
      overflow-wrap: break-word;
         white-space: normal; 


        } 
        
        
       .section {
      height: 100vh;
      display: flex;
flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 2rem;
      color: #e0e0e0;
            color: white;
    }

.section:nth-child(odd) {
    background: #1e1e1e;
    color: #ffffff;
    padding: 20px;

}

    .section:nth-child(even) {
      background: #181818;
    }

        
        


 .button {
  
  font-size: 16px;
height: auto;
  cursor: pointer;
border-radius:10px;
        border-color:rgb(31, 183, 241);
        padding:5px;
                      

}



  .button-nohover { /* got it/OK! button */
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
  font-size: 16px;
height: auto;
  cursor: pointer;
border-radius:10px;
        border-color:rgb(31, 183, 241);
        padding:5px;
  transition-duration: 0.3s;
}
        



select {
  width: 250px;
  height: 30px;
  padding: 0px 0px;
  margin: 20px 0;

  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  border-radius:10px;
 
}

     select:focus {
  border: 3px solid #555;
  }
        
        
        
input[type=color] {
  width: 250px;
  height: 30px;
  padding: 0px 0px;
  margin: 20px 0;

  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  border-radius:10px;
 
}

     input[type=color]:focus {
  border: 3px solid #555;
  }
        
        
  input {
  width: 250px;
  height: 60px;
  padding: 20px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  border-radius:10px;
 
}

     input:focus {
  border: 3px solid #555;
  }

 .input-container {
  position: relative;
  display: inline-block;
}


.input-container .copy-icon {
  position: absolute;
  top: 58%;
  right: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

#qrcode-container {
  padding: 16px;
  background-color: white;
  display: inline-block;
}


  

      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
      }

    
        .instructions {
        background-color: white;
        color: black;
        position: absolute;
        font-size: 22px;
font-family: Verdana, sans-serif;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 1.2rem;
        cursor: pointer;
      }
      

      
#dragElement {
      width: 100px;
      height: 100px;
      background-color: white;
      position: fixed; 
      cursor: move; 
        top:50px;
        left:100px;
    }
 @media (max-width: 768px) {
    #dragElement {
      display: none;
    }
  }

  
             
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #121212;
    padding: 10px 20px;
        height:60px;
    color: white;
    width: 100%;
    box-sizing: border-box; 
    margin: 0; 
    position: fixed;
    top: 0; 
    left: 0; 
    right: 0;
        z-index: 10;
}



.nav-links {
    display: flex;
    gap: 15px;
    user-select: none;
flex-wrap: wrap;
     
}

.nav-links a {
    text-decoration: none;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.nav-links a:hover {
    background-color: #555;
        color: rgb(31, 183, 241);
}


.code-links {
    display: flex;
    gap: 15px;
    user-select: none;
flex-wrap: wrap;
}

.code-links a {
    text-decoration: none;
    color: black;
    padding: 5px 10px;
        border: 1px solid black;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.code-links a:hover {
    background-color: gold;
}


.account {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #555;
    color: white;
    border: 1px solid white;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    transition: scale 0.1s;
    user-select: none;
}

.account:hover {
    scale: 1.03;
    background-color: #777;
}
 .home-links {
        color: white;
        text-decoration: none;
        padding: 5px 10px;
        border-radius: 5px;
      
    }

    .home-links:hover {
        color: rgb(31, 183, 241); 
       
    }