.maincontent {
    margin: 5rem 15% 5rem 15%;
}

.maincontent h2{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: rgb(0, 0, 0);
}

.maincontent p{
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(80, 80, 80);
    font-size: 18px;
}

#tonnageselector {
    background-color:rgb(243, 208, 11) ;
}

.maincontent button{
    background-color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    border: 2px solid rgb(243, 208, 11);
    background-color: rgb(255, 255, 255);
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.maincontent button:hover {
    animation: maintcontentbutton 0.9s ease forwards;
}

@keyframes maintcontentbutton {
    33% {
        border-bottom: 2px solid rgb(243, 208, 11);
    }

    80% {
        border-top: 2px solid rgb(243, 208, 11);
        border-bottom: 2px solid rgb(243, 208, 11);
    }

    100% {
        border-top: 2px solid rgb(243, 208, 11);
        border-bottom: 2px solid rgb(243, 208, 11);
        background-color: rgb(243, 208, 11);
    }
}

.subbox {
    display: grid;
    margin: 2rem 1rem 3rem 0rem;
    padding: 15px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.459);
}

.maincontent label{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    margin: 5px;
    color: rgb(0, 0, 0);
}

.maincontent input{
    border-bottom: 4px solid rgb(243, 208, 11);
    border-left: 2px solid rgba(0, 0, 0, 0);
    border-right: 2px solid rgba(0, 0, 0, 0);
    border-top: 2px solid rgba(0, 0, 0, 0);
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    margin: 5px;
    width: 98.3%;
    color: rgb(0, 0, 0);
}

.maincontent input:focus{
    outline: none;
    box-shadow: none;
    border-bottom: 4px solid rgb(0, 0, 0);
}

.maincontent input:hover{
    outline: none;
    box-shadow: none;
    border-bottom: 4px solid rgb(0, 0, 0);
}


.maincontent select {
    border: none;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 5px;
    text-align: center;
    padding: 5px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.13);
    font-size: 18px;
    width: 100%;
    color: rgb(0, 0, 0);
}

.selection {
    display: flex;
}

.maincontent option {
    background-color: white;
}

.tonnageform {
    display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.beton {
    display: none;
    
}

.gazon {
    display: none;
}

.paveuni {
    display: none;   
}

.muret {
    display: none;   
}

.remblai {
    display: none;  
}

    .shape-selector {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
    }
    .shape-option {
      border: 2px solid #ccc;
      border-radius: 6px;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      width: 120px;
      font-size: 18px;
      transition: 0.2s;
    }
    .shape-option.active {
      border-color: #007BFF;
      background-color: #e6f0ff;
    }
    .form-section {
      display: none;
      margin-top: 20px;
    }
    .results {
      margin-top: 20px;
      font-weight: bold;
    }