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


.calculatort {
  max-width: 520px;
  margin:40px auto;
  background:#fff;
  padding:20px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.triangle-wrap {
  position:relative;
  height:260px;
  margin:20px 0;
}

.triangle {
  width:0;
  height:0;
  border-left:120px solid transparent;
  border-right:120px solid transparent;
  border-bottom:200px solid #222;
  margin:auto;
  position:absolute;
  left:0; right:0;
  bottom:0;
}

.input-box {
  position:absolute;
  width:90px;
}

.calculatort input, .calculatort select {
  width:100%;
  padding:8px;
  border-radius:6px;
  border:1px solid #bbb;
  text-align:center;
  font-size:14px;
}

.top-angle { top:-5px; left:50%; transform:translateX(-50%); }
.left-side { left:-5px; top:120px; }
.right-side { right:-5px; top:120px; }
.left-angle { bottom:-5px; left:60px; }
.right-angle { bottom:-5px; right:60px; }
.base-side { bottom:-45px; left:50%; transform:translateX(-50%); }

.calculatort .row {
  margin:15px 0;
}

.calculatort .buttons {
  display:flex;
  gap:10px;
}

.calculatort button {
  flex:1;
  padding:12px;
  border:none;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
}

.calculatort .calc-btn {
  background:#000;
  color:#fff;
}

.clear-btn {
  background:#ccc;
}

#result {
  margin-top:40px;
  padding:15px;
  background:#e8f5e9;
  border-radius:8px;
  display:none;
}
.unitarea{
	padding-top:25px
}
.ttitle{
	text-align:center
}

/* Responsive */
@media (max-width:768px){
  .triangle {
    border-left:90px solid transparent;
    border-right:90px solid transparent;
    border-bottom:160px solid #222;
  }
  .triangle-wrap { height:220px; }
  .calculatort {
  max-width: 95%;
  margin:20px auto;
 width:95%
}
.ttitle{
	font-size:22px
}
  
  
  
}