body{font-family:'Roboto Condensed',sans-serif;background:#000;color:#fff;margin:0;padding:0;text-align:center;}
header,footer{background:#111;padding:15px;color:#aaa;}
nav {background:#2c2c2c; margin:15px; padding: 15px;}
nav a{color:#ffeaa7;text-decoration:none;margin:10px;font-weight:bold;padding: 10px;border-bottom: 2px solid #000;}
nav a:hover{color:#fff; border-bottom: 2px solid #aaa;}

 a {text-decoration: none;}
 
.container{padding:30px;max-width:900px;margin:auto;text-align:center;}
h1{color:#ffeaa7;text-shadow:0 0 30px #fdcb6e;margin:10px; padding: 20px; border-bottom: 2px solid #2c2c2c;}
h1,h2 a {color:#ffeaa7;text-shadow:0 0 30px #fdcb6e;margin:10px; padding: 20px; border-bottom:2px solid #2c2c2c;text-decoration:none;}
h1,h2 a:hover {color:#ffeaaa;text-shadow:0 0 30px #ffffff;margin:10px; padding: 20px; border-bottom:2px solid #2c2c2c;text-decoration:none;}
h2{color:#ffeaa7;text-shadow:0 0 50px #fdcb6e;margin-bottom:20px;}

p{color:#ccc;margin-bottom:30px;font-size: 1.2rem;}

p a {color:#fff; margin: 1rem; padding: 1rem; text-decoration: none;}

select,input,button{padding:10px;margin:8px;font-size:16px;border:none;border-radius:5px;color:#000000;}
button{background:#00b894;color:#fff;cursor:pointer;transition:0.3s;margin-bottom:30px;font-size: 1.2rem;font-weight:600;}
button:hover{background:#019374;}
.result{margin-top:25px;font-size:1.5rem;color:#ffeaa7;font-weight:bold;text-shadow:0 0 15px #fdcb6e;}
.section{border:1px solid #222;border-radius:10px;padding:20px;margin-top:25px;background:rgba(255,255,255,0.05);}
#digits{margin-bottom:30px;font-size: 1.2rem;font-weight:strong;}

 szamolas {
      font-family: Arial, sans-serif;
      background: #f8f8f8;
      color: #333;
      text-align: center;
      margin-top: 50px;
    }
    input, button {
      padding: 10px;
      margin: 10px;
      font-size: 1rem;
    }
	
    #error-message {
      color: red;
      font-weight: bold;
    }
    #circle {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin: 20px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3rem;
      color: #fff;
      font-weight: bold;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      transition: background 0.3s;
    }
    #meaning, #tip {
      margin-top: 10px;
      font-size: 1rem;
      color: #ffffff;
    }

 /* Színkorong stílus */
  .color-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
  }
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
  }
  th, td {
    padding: 12px;
    text-align: left;
	border: none;
	margin:10px;
  }
  th {
    background: rgba(255,255,255,0.05);
    color: #ffeaa7;
  }
  td {
    color: #fff;
  }
  
  ul, li {margin:10px; padding: 12px; font-size: 1.2rem;}
  
 .contact-image {border-radius: 20px; border: 1px solid #2c2c2c2; box-shadow:0 0 20px #fdcb6e;margin:10px; padding: 20px; }
.logo-image {width:200px; height:auto; border-radius: 30px; border: 1px solid #2c2c2c2; box-shadow:0 0 20px #fdcb6e;margin:10px; padding: 20px; }

footer a {color:#ffffff; text-dacoration: none;}
 footer a:hover {color: #019374;}

@media screen and (max-width: 768px) {
nav a{color:#ffeaa7;text-decoration:none;margin:10px;font-weight:bold; display:flex;}

.result{margin-top:20px;font-size:17px;color:#ffeaa7;font-weight:bold;text-shadow:0 0 10px #fdcb6e;}
}