@import "https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap";
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: IM Fell English,serif;
    background: #f5f5f5;
    color: #333;
    margin: 0;
    min-height: 100vh;
}
button {
    font-family: IM Fell English,serif;
}
#calculate-ip {
  background: #1c1c29;
  color: white;
  border: 2px solid white;
  padding: 8px 20px;
  font-size: 1.1em;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  font-weight: bold;
}

#calculate-ip:hover {
  background: white;
  color: #1c1c29;
  border: 2px solid #1c1c29;
}
.container {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin: 0.5rem auto 50px auto;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

h1 {
    color: #1c1c29;
    margin: 0;
}

.language-switcher select {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.tabs {
    display: flex;
    justify-content: center;
    padding: 0 1rem 0.5rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.burger-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.burger-menu span {
    width: 2rem;
    height: 0.25rem;
    background: #1c1c29;
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

.tab-links {
    display: flex;
    justify-content: center;
    width: 100%;
}

.tabs.scrolled {
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-link {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    text-align: center;
    font-size: 1rem;
    transition: background-color 0.5s;
    min-width: 120px;
    margin: 0 0.25rem;
}
.tab-link:hover {
    background-color: #1c1c29;
    color: #e1e1e1;
}

.tab-link:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.tab-link:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.tab-link.active {
    background-color: #1c1c29;
    color: white;
    cursor: no-drop;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.converter-wrapper {
    display: grid;
    gap: 1rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

label {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

input {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

#calculation-steps, #ip-results {
    margin-top: 2rem;
}

h2 {
    border-bottom: 2px solid #1c1c29;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

#steps-container, #ip-results-container {
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 4px;
    min-height: 50px;
    white-space: pre-wrap;
    font-family: monospace;
}

.scientific-calculator-wrapper {
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.calculator-display {
    margin-bottom: 1rem;
}

#scientific-display {
    width: 100%;
    padding: 1rem;
    font-size: 1.5rem;
    text-align: right;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.calculator-buttons {
    display: grid;
    gap: 0.5rem;
}

.button-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.calc-btn {
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.calc-btn:hover,
.calc-btn.operator:hover {
    background-color: #1c1c29;
    color: white;
    border: 2px solid white;
}

.calc-btn.function {
    background-color: #3182ce;
    color: white;
}

.calc-btn.constant {
    background-color: #28a745;
    color: white;
}

.calc-btn.function:hover {
    background-color: white;
    color: #3182ce;
    border: 2px solid #3182ce;
}

.calc-btn.constant:hover {
    background-color: white;
    color: #28a745;
    border: 2px solid #28a745;
}

#scientific-history-section button {
    float:right;
    padding: 0.2rem;
    background: #1c1c29;
    color: white;
    border: 2px solid white;
    border-radius: 4px;    
    cursor:pointer;
}

#scientific-history-section button:hover {
    background: white;
    color: #1c1c29;
    border: 2px solid #1c1c29;
}

#scientific-history-section ul {
    background:#f9f9f9;
    padding:0.5rem 1rem 0 40px;
    border-radius:4px;
    min-height:2em;
    list-style-type:decimal;
    height:100px;
    overflow-y:auto;
    margin:0;    
    font-family: monospace;
}

#scientific-history-section h3{
    margin:0.5rem 0;
}

footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #1c1c29;
   color: white;
   text-align: center;
}

footer a {
    color: white;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .tabs {        
        padding-right: 1rem;
    }

    .burger-menu {
        display: flex;
    }    
    .tab-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .tab-links.show {
        display: flex;
    }

    .container {        
        padding: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .tabs {
        padding: 0.5rem;
    }

    .tab-link {
        font-size: 0.8rem;
        padding: 0.5rem;
        width: 100%;
        margin: 0.125rem 0;
    }
}