body { 

	background-color: #0C0C0C;
	color: #63FA86;
    text-align: center;
}

header {

    text-align: center;
	background-image: radial-gradient(#0C0C0C 45%, darkturquoise);
	border-radius: 20px;
}

h1 { margin-bottom: 2em; }

.main-grid {

	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-column: 2 / 3;
	gap: 0.5em;
}

.binary { text-align: right; }

.binary-center { text-align: center; }

.weight-button-base {

    background: linear-gradient(190deg, #FAFAFA 10%, #F4A8FF  40%);
    color: black;
    text-align: center;
    font-size: xx-large;
    font-weight: bolder;
    border-radius: 15px;
    animation-name: weight-button-base-bg-color-animation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.weight-button-on {

    background: linear-gradient(190deg, #DCFCE7 10%, lime  40%);
    color: #8A0194;
    animation-name: weight-button-on-bg-color-animation;
}

.default-grid-row {

    text-align: center;
    font-size: larger;
    font-weight: bold;
}

.row-info {
    
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: larger;
    font-weight: bold;
}

.binary { 
    
    text-align: right;
    font-weight: bolder;
}

.weights {

    text-align: center;
    font-size: xx-large;
    font-weight: bolder;
}

.leading-zeroes {
        
    font-size:initial;
    font-weight: initial;
}

.add-row-button {

    margin-top: 3em;
    background-color:chocolate;
    font-weight: bolder;
    font-size: x-large;
    color: white;
    text-align: center;
    border-radius: 12px;
}

.add-row-button:hover {
    
    background-color: lime;
    color: black;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.weight-button-base:hover {
    
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.weight-button-on:hover {
    
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.result-color {

    color: yellow;
}

@keyframes weight-button-base-bg-color-animation {
    
    0% { background: linear-gradient(190deg, #FAFAFA 10%, #F4A8FF 40%); }
    25% { background: linear-gradient(190deg, #FAFAFA 6%, #F4A8FF 40%); }
    50% { background: linear-gradient(190deg, #FAFAFA 3%, #F4A8FF 40%); }
    100% { background: linear-gradient(190deg, #FAFAFA 0%, #F4A8FF 40%); }
}

@keyframes weight-button-on-bg-color-animation {
    
    0% { background: linear-gradient(190deg, #DCFCE7 10%, lime 40%); }
    25% { background: linear-gradient(190deg, #DCFCE7 6%, lime 40%); }
    50% { background: linear-gradient(190deg, #DCFCE7 3%, lime 40%); }
    100% { background: linear-gradient(190deg, #DCFCE7 0%, lime 40%); }
}