*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


.fc-container {
    max-width:600px;
    margin:40px auto;
    background:#fff;
    padding:20px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.fc-row {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.fc-fraction {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.fc-input {
    width:80px;
    padding:8px;
    text-align:center;
    font-size:18px;
    border:2px solid #3f51b5;
    border-radius:6px;
}

.fc-line {
    width:100%;
    height:2px;
    background:#000;
    margin:4px 0;
}

.fc-buttons {
    text-align:center;
    margin-top:20px;
}

.fc-btn {
    padding:12px 20px;
    border:none;
    border-radius:6px;
    margin:5px;
    cursor:pointer;
}

.fc-calc { background:#000; color:white; }
.fc-clear { background:#ccc; }

.fc-result {
    margin-top:30px;
    display:none;
}

canvas {
    width:100%;
    background:#fafafa;
    border-radius:6px;
    padding:10px;
}

.fc-decimal {
    margin-top:15px;
    font-weight:bold;
}
.brackettxt{
	display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.topn {
    display: block;
}
.bottomn {
    display: block;
    border-top: 1px solid #000;
    padding: 0px 3px;
}
   .fa-fraction {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 0 3px;
    }
    .fa-fraction sup {
        display: block;
        font-size: 0.8em;
        border-bottom: 1px solid #333;
    }
    .fa-fraction sub {
        display: block;
        font-size: 0.8em;
    }
    .fa-example {
        background-color: #eaf2f8;
        border-left: 4px solid #3498db;
        padding: 10px;
        margin: 15px 0;
    }

@media(max-width:768px){
    .fc-row { flex-direction:column; }
	
.fc-container {
    max-width:95%;
    width:95%;
    margin:20px auto;
    
}
	
}