.formulaPage,
.mathFormulaPage,
.physicsFormulaPage,
.rectangleAreaPage,
.rectanglePerimeterPage,
.squareAreaPage,
.squarePerimeterPage,
.triangleAreaPage,
.trianglePerimeterPage,
.circleAreaPage,
.circleCircumferencePage,
.trapezoidAreaPage, 
.slopePage,
.distancePage,
.midpointPage,
.pythagoreanPageA,
.pythagoreanPageB,
.pythagoreanPageC,
.cubeVolumePage,
.cubePerimeterPage,
.rectanglePrismPerimeterPage,
.rectanglePrismVolumePage,
.rectanglePrismSurfaceAreaPage,
.cylinderSurfaceAreaPage,
.cylinderVolumePage,
.cylinderPerimeterPage,
.radiusPage,
.diameterPage,
.conePerimeterPage,
.coneSurfaceAreaPage,
.coneVolumePage,
.sphereVolumePage,
.sphereSurfaceAreaPage,
.trianglePrismVolumePage,
.trianglePrismSurfaceArea,
.speedCalculatorPage,
.velocityCalculatorPage,
.physicsDistanceCalculatorPage,
.displacementCalculatorPage,
.accelerationPage,
.avgVelocityCalculatorPage,
.sohCahToaPage, 
.timeIndependentPage{
    display: none;
}

body {
    margin:0;
    font-family: 'Baloo 2', sans-serif;
    background:rgb(0, 98, 54);
    min-height: 100vh;
    color: rgb(255,255,255);
}

.StartPage {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    position:relative;
    padding: 0 8%;
    box-sizing:border-box;
    overflow: hidden;
}

.StartPage::before {
    content:"";
    position:absolute;
    inset: 12px;
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events: none;
}

.StartPage h1{
    margin: 0;
    color: rgb(255,255,255);
    font-size: 85px;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1;
    text-align: left;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    
}

.mathDecorations span {
    font-family: Arial, sans-serif;
}

.mathDecorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.mathDecorations span {
    position: absolute;
    font-family: Arial, sans-serif;
    font-size: 55px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.12);
}

.mathDecorations span:nth-child(1) {
    top: 80%;
    right: 40%;
    transform:Scale(1.1);
}

.mathDecorations span:nth-child(2){
    top: 70%;
    left: 8%;    
    transform:Scale(1.4);
}

.mathDecorations span:nth-child(3) {
    top: 25%;
    left: 45%;
    transform:Scale(0.8);
}

.mathDecorations span:nth-child(4) {
    top: 4%;
    right: 48%;
    transform:Scale(1.4);
}

.mathDecorations span:nth-child(5) {
    top: 10%;
    right: 8%;
    transform:Scale(1.1);
}

.mathDecorations span:nth-child(6) {
    top: 65%;
    right: 50%;
    transform:Scale(1.4);
}

.mathDecorations span:nth-child(7) {
    top: 40%;
    right: 95%;
    transform:Scale(1.2);
}

.mathDecorations span:nth-child(8) {
    top: 15%;
    left: 17%;
    transform:Scale(0.8);
}

.mathDecorations span:nth-child(9){
    top: 73%;
    left: 28%;   
    transform:Scale(1.9);
}

.mathDecorations span:nth-child(10) {
    top: 35%;
    left: 37%;
    transform:Scale(1);
}

.mathDecorations span:nth-child(11) {
    top: 75%;
    left: 72%;
    transform:Scale(1.6);
}

.mathDecorations span:nth-child(12) {
    top: 35%;
    right: 12%;
    transform:Scale(1.15);
}   

.mathDecorations span:nth-child(13) {
    top: 87%;
    right: 75%;
    transform:Scale(1.4);
}

.mathDecorations span:nth-child(14) {
    top: 85%;
    right: 5%;    
    transform:Scale(1.1);
}

.mathDecorations span:nth-child(15) {
    top: 65%;
    right: 15%;
    transform:Scale(0.6);
}

.mathDecorations span:nth-child(16) {
    top: 20%;
    right: 15%;
    transform:Scale(1.2);
}

.HomeDescription {
    width: 55%;
    text-align: left;
}

.HomeDescription p {
    color: rgb(255,255,255);
    font-size: 25px;
    text-align: left;
    margin-top: 10px;
    line-height: 1.6;
    max-width: 550px;
}

.homeButtons button {
    border:none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size:20px;
    font-weight: 800;
    width: 350px;
    height: 120px;
    
    letter-spacing: 1px;
    padding: 5px 10px;
    box-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    cursor:pointer;
    transition: 0.4s ease;
}

.homeButtons{
    display: flex;
    flex-direction:column;
    gap:40px;
    width: 450px;
    
}

.homeButtons button:hover {
    background: rgb(128, 170, 144);
    color: rgb(6, 42, 31);
    transform: translateX(-70px) scale(1.0);
    box-shadow: 7px 7px 0px rgba(11, 61, 46, 0.5);
}

@media (max-width: 750px) {
    .StartPage {
        flex-direction: column-reverse;
        justify-content: center;
        gap: 40px;
        padding: 80px 10%;
    }

    .homeButtons{
         width: 500px;
    
    }
    
    .HomeDescription {
        width: 70%;
    }

    .StartPage h1 {
        font-size: 55px;
    }
}

.formulaPage {
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    display: none;
    position: relative;
}

.formulaPage::before{
    content:"";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.formulaPage h1 {
    margin-top: 80px;
    font-size: 65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#backButton {
    border:none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size:18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position: absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#backButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.mathSection, .physicsSection{
    width: 90%;
}

.mathSection h2, .physicsSection h2 {
    width:100%;
    font-size: 40px;
    margin: 30px 0 20px;
    padding: 15px 0;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: left;
    text-shadow: 3px 3px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
    border-top: 3px solid rgb(128, 170, 144);
    border-bottom: 3px solid rgb(128, 170, 144);
}

.formulaContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    row-gap: 35px;
    width: 90%;
    margin: 20px;
}

.formulaButton {
    border:none;
    border-radius: 18px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 20px;
    font-weight:800;
    letter-spacing: 1px;
    min-height: 80px;
    padding: 15px 20px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor:pointer;
    transition: 0.5s ease;
}

.formulaButton:hover {
    background: rgb(128,170,144);
    color: rgb(6, 42, 31);
    transform: scale(1.2);
}

.mathFormulaPage {
    min-height: 100vh;
    display:none;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.mathFormulaPage::before{
    content:"";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.mathFormulaPage h1{
    margin-top: 80px;
    font-size: 65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#mathBackButton {
    border:none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size:18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position: absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);

    cursor:pointer;
    transition: 0.2s ease;
}

#mathBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.physicsFormulaPage {
    min-height:100vh;
    display:none;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.physicsFormulaPage::before{
    content:"";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border:8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events: none;
}

.physicsFormulaPage h1 {
    margin-top: 80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11,61,46,0.718);
    font-family: 'Baloo 2', sans-serif;
}

#physicsBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);

    cursor:pointer;
    transition: 0.2s ease;
}

#physicsBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.rectangleAreaPage {
    min-height:100vh;
    display:none;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.rectangleAreaPage::before{
    content:"";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.rectangleAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

.calculatorBox {
    display: flex;
    flex-direction:column;
    border:none;
    align-items:center;
    width:600px;
    height:270px;
    padding:35px;
    border-radius:25px;
    background: rgba(247, 249, 248, 0.163);
    box-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
}

.calculatorBox label {
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

.calculatorBox input {
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.calculatorBox input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#rectangleAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);

    cursor:pointer;
    transition: 0.2s ease;
}

#rectangleAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#rectangleAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateRectangleArea {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateRectangleArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.squareAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.squareAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.squareAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#squareAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#squareAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#squareAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSquareArea {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSquareArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.squareAreaPage .calculatorBox {
    height: 200px;
}

.rectanglePerimeterPage {
    min-height:100vh;
    display:none;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.rectanglePerimeterPage::before{
    content:"";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.rectanglePerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

.calculatorBox input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#rectanglePerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#rectanglePerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#rectanglePerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateRectanglePerimeter {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateRectanglePerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.squarePerimeterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.squarePerimeterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.squarePerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;

}

#squarePerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#squarePerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#squarePerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSquarePerimeter {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSquarePerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.squarePerimeterPage .calculatorBox {
    height: 200px;
}

.triangleAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.triangleAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.triangleAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#triangleAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#triangleAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#triangleAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateTriangleArea {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateTriangleArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.trianglePerimeterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.trianglePerimeterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.trianglePerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#trianglePerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);

    cursor:pointer;
    transition: 0.2s ease;
}

#trianglePerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#trianglePerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateTrianglePerimeter {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateTrianglePerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.trianglePerimeterPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.circleAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.circleAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.circleAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#circleAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#circleAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#circleAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCircleArea {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCircleArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.circleAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.circleCircumferencePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.circleCircumferencePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.circleCircumferencePage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#circleCircumferenceBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#circleCircumferenceBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#circleCircumferenceResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCircleCircumference {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCircleCircumference:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.circleCircumferencePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.trapezoidAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.trapezoidAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.trapezoidAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#trapezoidAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#trapezoidAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#trapezoidAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateTrapezoidArea {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateTrapezoidArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.trapezoidAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.quadrilateralPerimeterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.quadrilateralPerimeterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.quadrilateralPerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#quadrilateralPerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#quadrilateralPerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#quadrilateralPerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateQuadrilateralPerimeter {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateQuadrilateralPerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.quadrilateralPerimeterPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.parallelogramAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.parallelogramAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.parallelogramAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;

}

#parallelogramAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#parallelogramAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#parallelogramAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateParallelogramArea {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateParallelogramArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.parallelogramAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.slopePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.slopePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.slopePage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#slopeBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#slopeBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#slopeResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSlope {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSlope:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.slopePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.distancePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.distancePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.distancePage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#distanceBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#distanceBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#distanceResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateDistance {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateDistance:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.distancePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.midpointPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.midpointPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.midpointPage h1 {
    margin-top:80px;
    font-size:65px;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#midpointBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#midpointBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#midpointResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateMidpoint {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateMidpoint:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.midpointPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.pythagoreanPageA{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.pythagoreanPageA::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.pythagoreanPageA h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#pythagoreanABackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#pythagoreanABackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#pythagoreanAResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculatePythagoreanA {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculatePythagoreanA:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.pythagoreanPageA .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.pythagoreanPageB{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.pythagoreanPageB::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.pythagoreanPageB h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;

}

#pythagoreanBBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#pythagoreanBBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#pythagoreanBResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculatePythagoreanB {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculatePythagoreanB:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.pythagoreanPageB .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.pythagoreanPageC{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.pythagoreanPageC::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.pythagoreanPageC h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#pythagoreanCBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#pythagoreanCBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#pythagoreanCResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculatePythagoreanC {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculatePythagoreanC:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.pythagoreanPageC .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cubeVolumePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.cubeVolumePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.cubeVolumePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#cubeVolumeBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#cubeVolumeBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#cubeVolumeResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCubeVolume {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCubeVolume:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.cubeVolumePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cubePerimeterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.cubePerimeterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.cubePerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#cubePerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#cubePerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#cubePerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCubePerimeter {
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCubePerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.cubePerimeterPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cubeSurfaceAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.cubeSurfaceAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.cubeSurfaceAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#cubeSurfaceAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#cubeSurfaceAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#cubeSurfaceAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCubeSurfaceArea{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCubeSurfaceArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.cubeSurfaceAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.rectanglePrismVolumePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.rectanglePrismVolumePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.rectanglePrismVolumePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#rectanglePrismVolumeBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#rectanglePrismVolumeBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#rectanglePrismVolumeResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateRectanglePrismVolume{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateRectanglePrismVolume:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.rectanglePrismVolumePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.rectanglePrismPerimeterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.rectanglePrismPerimeterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.rectanglePrismPerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#rectanglePrismPerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#rectanglePrismPerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#rectanglePrismPerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateRectanglePrismPerimeter{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateRectanglePrismPerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.rectanglePrismPerimeterPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.rectanglePrismSurfaceAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.rectanglePrismSurfaceAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.rectanglePrismSurfaceAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;

}

#rectanglePrismSurfaceAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#rectanglePrismSurfaceAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#rectanglePrismSurfaceAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateRectanglePrismSurfaceArea{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateRectanglePrismSurfaceArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.rectanglePrismSurfaceAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cylinderVolumePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.cylinderVolumePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.cylinderVolumePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#cylinderVolumeBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#cylinderVolumeBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#cylinderVolumeResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCylinderVolume{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCylinderVolume:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.CylinderVolumePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cylinderSurfaceAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.cylinderSurfaceAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.cylinderSurfaceAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#cylinderSurfaceAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#cylinderSurfaceAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#cylinderSurfaceAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCylinderSurfaceArea{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCylinderSurfaceArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.cylinderSurfaceAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cylinderPerimeterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.cylinderPerimeterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.cylinderPerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#cylinderPerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#cylinderPerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#cylinderPerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCylinderPerimeter{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCylinderPerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.cylinderPerimeterPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.radiusPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.radiusPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.radiusPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#radiusBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#radiusBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#radiusResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateRadius{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateRadius:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.radiusPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.diameterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.diameterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.diameterPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#diameterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#diameterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#diameterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateDiameter{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateDiameter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.diameterPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.coneVolumePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.coneVolumePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.coneVolumePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#coneVolumeBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#coneVolumeBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#coneVolumeResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateConeVolume{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateConeVolume:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.coneVolumePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.conePerimeterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.conePerimeterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.conePerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#conePerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#conePerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#conePerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateConePerimeter{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateConePerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.conePerimeterPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.coneSurfaceAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.coneSurfaceAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.coneSurfaceAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#coneSurfaceAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#coneSurfaceAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#coneSurfaceAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateConeSurfaceArea{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateConeSurfaceArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.coneSurfaceAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.sphereVolumePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.sphereVolumePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.sphereVolumePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#sphereVolumeBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#sphereVolumeBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#sphereVolumeResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSphereVolume{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSphereVolume:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.sphereVolumePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.sphereSurfaceAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.sphereSurfaceAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.sphereSurfaceAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#sphereSurfaceAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#sphereSurfaceAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#sphereSurfaceAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSphereSurfaceArea{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSphereSurfaceArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.sphereSurfaceAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.trianglePrismVolumePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.trianglePrismVolumePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.trianglePrismVolumePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#trianglePrismVolumeBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#trianglePrismVolumeBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#trianglePrismVolumeResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateTrianglePrismVolume{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateTrianglePrismVolume:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.trianglePrismVolumePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.trianglePrismSurfaceAreaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.trianglePrismSurfaceAreaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.trianglePrismSurfaceAreaPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;}

#trianglePrismSurfaceAreaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#trianglePrismSurfaceAreaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#trianglePrismSurfaceAreaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateTrianglePrismSurfaceArea{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateTrianglePrismSurfaceArea:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.trianglePrismSurfaceAreaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.trianglePrismPerimeterPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.trianglePrismPerimeterPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.trianglePrismPerimeterPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#trianglePrismPerimeterBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#trianglePrismPerimeterBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#trianglePrismPerimeterResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateTrianglePrismPerimeter{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateTrianglePrismPerimeter:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.trianglePrismPerimeterPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.speedCalculatorPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.speedCalculatorPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.speedCalculatorPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#speedBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#speedBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#speedResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSpeed{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSpeed:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.speedCalculatorPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.velocityCalculatorPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.velocityCalculatorPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.velocityCalculatorPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#velocityBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#velocityBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#velocityResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateVelocity{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateVelocity:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.velocityCalculatorPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.calculatorBox select {
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.calculatorBox select:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

.avgVelocityCalculatorPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.avgVelocityCalculatorPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.avgVelocityCalculatorPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#avgVelocityBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#avgVelocityBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#avgVelocityResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateAvgVelocity{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateAvgVelocity:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.avgVelocityCalculatorPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.calculatorBox select {
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.calculatorBox select:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

.displacementCalculatorPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.displacementCalculatorPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.displacementCalculatorPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#displacementBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#displacementBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#displacementResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateDisplacement{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateDisplacement:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.displacementCalculatorPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.calculatorBox select {
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.calculatorBox select:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

.physicsDistanceCalculatorPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.physicsDistanceCalculatorPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.physicsDistanceCalculatorPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#physicsDistanceBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#physicsDistanceBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#physicsDistanceResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculatePhysicsDistance{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculatePhysicsDistance:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.physicsDistanceCalculatorPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.calculatorBox select {
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.calculatorBox select:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

.accelerationPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.accelerationPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.accelerationPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#accelerationBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#accelerationBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#accelerationResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateAcceleration{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateAcceleration:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.accelerationPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.calculatorBox select {
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.calculatorBox select:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

.timePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.timePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.timePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#timeBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#timeBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#timeResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateTime{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateTime:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.timePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.calculatorBox select {
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.calculatorBox select:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

.velocityTimeEquationPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.velocityTimeEquationPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.velocityTimeEquationPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#velocityTimeEquationBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#velocityTimeEquationBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#velocityTimeEquationResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateVelocityTimeEquation{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateVelocityTimeEquation:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.velocityTimeEquationPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#velocityTimeInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#velocityTimeInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#velocityTimeInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#velocityTimeInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#velocityTimeInputs select,#velocityTimeInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeVelocityTimeVariable{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeVelocityTimeVariable:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#velocityTimePopup {
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#velocityTimePopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 10px;
}

#velocityTimePopup .variableButton {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.5s ease;
}

#velocityTimePopup .variableButton:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.displacementInitialEquationPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.displacementInitialEquationPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.displacementInitialEquationPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#displacementInitialEquationBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#displacementInitialEquationBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#displacementInitialEquationResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateDisplacementInitialEquation{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateDisplacementInitialEquation:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.displacementInitialEquationPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#displacementInitialInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#displacementInitialInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#displacementInitialInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#displacementInitialInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#displacementInitialInputs select,#displacementInitialInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeDisplacementInitialVariable{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeDisplacementInitialVariable:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#displacementInitialPopup {
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

#displacementInitialPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 10px;
}

#displacementInitialPopup .variableButton1 {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.5s ease;
}

#displacementInitialPopup .variableButton1:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.displacementFinalEquationPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.displacementFinalEquationPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.displacementFinalEquationPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#displacementFinalEquationBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#displacementFinalEquationBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#displacementFinalEquationResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateDisplacementFinalEquation{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateDisplacementFinalEquation:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.displacementFinalEquationPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#displacementFinalInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#displacementFinalInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#displacementFinalInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#displacementFinalInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#displacementFinalInputs select,#displacementFinalInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeDisplacementFinalVariable{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeDisplacementFinalVariable:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#displacementFinalPopup {
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#displacementFinalPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 10px;
}

#displacementFinalPopup .variableButton2 {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.5s ease;
}

#displacementFinalPopup .variableButton2:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.timeIndependentPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.timeIndependentPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.timeIndependentPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#timeIndependentBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#timeIndependentBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#timeIndependentResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateTimeIndependent{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateTimeIndependent:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.timeIndependentPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#timeIndependentInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#timeIndependentInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#timeIndependentInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#timeIndependentInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#timeIndependentInputs select,#timeIndependentInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeTimeIndependentVariable{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeTimeIndependentVariable:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#timeIndependentPopup {
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#timeIndependentPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 10px;
}

#timeIndependentPopup .variableButton3 {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.5s ease;
}

#timeIndependentPopup .variableButton3:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.averageVelocityDisplacementPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.averageVelocityDisplacementPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.averageVelocityDisplacementPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#averageVelocityDisplacementBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#averageVelocityDisplacementBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#averageVelocityDisplacementResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateAverageVelocityDisplacement{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateAverageVelocityDisplacement:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.averageVelocityDisplacementPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#averageVelocityDisplacementInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#averageVelocityDisplacementInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#averageVelocityDisplacementInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#averageVelocityDisplacementInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#averageVelocityDisplacementInputs select,#averageVelocityDisplacementInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeAverageVelocityDisplacementVariable{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeAverageVelocityDisplacementVariable:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#averageVelocityDisplacementPopup {
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#averageVelocityDisplacementPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 10px;
}

#averageVelocityDisplacementPopup .variableButton4 {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.5s ease;
}

#averageVelocityDisplacementPopup .variableButton4:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.sohCahToaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.sohCahToaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.sohCahToaPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#sohCahToaBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#sohCahToaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#sohCahToaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSohCahToa{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSohCahToa:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.sohCahToaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#sohCahToaInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#sohCahToaInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#sohCahToaInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#sohCahToaInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#sohCahToaInputs select,
#sohCahToaInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeSohCahToaVariable, 
#changeSohCahToaSide{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeSohCahToaVariable:hover,
#changeSohCahToaSide:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#sohCahToaSidePopup, 
#sohCahToaPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#sohCahToaSidePopup h2,#sohCahToaSidePopup h3, 
#sohCahToaPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#sohCahToaPopup .variableButton5,
#sohCahToaSidePopup .sohCahToaSideButton{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#sohCahToaPopup .variableButton5:hover,
#sohCahToaSidePopup .sohCahToaSideButton:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.InversePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.InversePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.InversePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#InverseBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#InverseBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#InverseResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateInverse{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateInverse:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.InversePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#InverseInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#InverseInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#InverseInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#InverseInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#InverseInputs select,#InverseInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeSInverseVariable{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeSInverseVariable:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#InversePopup {
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

#InversePopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 10px;
}

#InversePopup .variableButton6 {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.5s ease;
}

#InversePopup .variableButton6:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.physicsSearch{
    display: flex;
    justify-content: center;
    margin:4px 0;
}

#physicsSearchInput{
    width:100%;
    padding: 12px 15px;
    border:3px solid rgb(11, 61, 46);
    border-radius:25px;
    outline: none;
    font-family: "Baloo 2", sans-serif;
    font-size: 20px;
    text-align: center;
}

.mathSearch{
    display:flex;
    justify-content:center;
    margin:4px 0;
}

#mathSearchInput{
    width:100%;
    padding: 12px 15px;
    border:3px solid rgb(11,61,46);
    border-radius:25px;
    outline:none;
    font-family: "Baloo 2", sans-serif;
    font-size:20px;
    text-align:center; 
}

.allSearch{
    display: flex;
    justify-content: center;
    margin:4px 0;
}

#allSearchInput{
    width:100%;
    padding: 12px 15px;
    border:3px solid rgb(11,61,46);
    border-radius:25px;
    outline:none;
    font-family: "baloo 2", sans-serif;
    font-size:20px;
    text-align:center;
}

.allFilterContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.allfilterDropdownMenu{
    display:none;
    position:static;
    min-width: min(100%, 520px);
    box-sizing: border-box;
    padding:12px;
    margin-top: 10px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.allfilterDropdownMenu label{
    display: flex;
    align-items: center;
    gap:10px;
    padding:8px;
    font-size: 16px;
    cursor:pointer;
    color:rgb(11, 61, 46);
    transition: 0.7s ease;

}

.allfilterDropdownMenu label:hover{
    background-color: rgb(11, 61, 46);
    color: rgb(247, 249, 248);
    border-radius: 8px;
    
}

.allfilterDropdownMenu input[type="checkbox"] {
    accent-color: rgb(11, 61, 46);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .allfilterDropdownMenu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 400px) {
    .allfilterDropdownMenu {
        grid-template-columns: 1fr;
    }
}

#resetFiltersButton{
    grid-column: 1/-1;
    width:100%;
    padding: 10px;
    margin-top:10px;
    border:none;
    border-radius: 8px;
    background-color: rgb(10,60,46);
    color:white;
    transition: 0.7s ease;
    cursor:pointer;

}

#resetFiltersButton:hover{
    background-color: rgb(128, 170, 144);
    color: rgb(6,42,31);
}

#allFilterDropdownButton{
    padding: 10px 18px;
    background-color: rgb(11, 61, 46);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

#allFilterDropdownButton:hover {
    background-color: rgb(128, 170, 144);
}

#allFilterDropdownButton:active {
    transform: scale(0.97);
}

.mathFilterContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.mathfilterDropdownMenu{
    display:none;
    position:static;
    min-width: min(100%, 520px);
    box-sizing: border-box;
    padding:12px;
    margin-top: 10px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mathfilterDropdownMenu label{
    display: flex;
    align-items: center;
    gap:10px;
    padding:8px;
    font-size: 16px;
    cursor:pointer;
    color:rgb(11, 61, 46);
    transition: 0.7s ease;
}

.mathfilterDropdownMenu label:hover{
    background-color: rgb(11, 61, 46);
    color: rgb(247, 249, 248);
    border-radius: 8px;
 
}

.mathfilterDropdownMenu input[type="checkbox"] {
    accent-color: rgb(11, 61, 46);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .mathfilterDropdownMenu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 400px) {
    .mathfilterDropdownMenu {
        grid-template-columns: 1fr;
    }
}

#mathresetFiltersButton{
    grid-column: 1/-1;
    width:100%;
    padding: 10px;
    margin-top:10px;
    border:none;
    border-radius: 8px;
    background-color: rgb(10,60,46);
    color:white;
    transition: 0.7s ease;
    cursor:pointer;
}

#mathresetFiltersButton:hover{
    background-color: rgb(128, 170, 144);
    color: rgb(6,42,31);
}

#mathFilterDropdownButton{
    padding: 10px 18px;
    background-color: rgb(11, 61, 46);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

#mathFilterDropdownButton:hover {
    background-color: rgb(128, 170, 144);
}

#mathFilterDropdownButton:active {
    transform: scale(0.97);
}

.sinLawSidesPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.sinLawSidesPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.sinLawSidesPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#sinLawSidesBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#sinLawSidesBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#sinLawSidesResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSinLawSides{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSinLawSides:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.sinLawSidesPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#sinLawSidesInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#sinLawSidesInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#sinLawSidesInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#sinLawSidesInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#sinLawSidesInputs select,
#sinLawSidesInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeSinLawSidesVariable, 
#changeSinLawSidesSide{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeSinLawSidesVariable:hover,
#changeSinLawSidesSide:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#sinLawSidesSidePopup, 
#sinLawSidesPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#sinLawSidesSidePopup h2,#sinLawSidesSidePopup h3, 
#sinLawSidesPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#sinLawSidesPopup .variableButton7,
#sinLawSidesSidePopup .sinLawSidesSideButton{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#sinLawSidesPopup .variableButton7:hover,
#sinLawSidesSidePopup .sinLawSidesSideButton:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.sinLawAnglesPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.sinLawAnglesPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.sinLawAnglesPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#sinLawAnglesBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#sinLawAnglesBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#sinLawAnglesResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateSinLawAngles{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateSinLawAngles:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.sinLawAnglesPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#sinLawAnglesInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#sinLawAnglesInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#sinLawAnglesInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#sinLawAnglesInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#sinLawAnglesInputs select,
#sinLawAnglesInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeSinLawAnglesVariable, 
#changeSinLawAnglesAngle{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeSinLawAnglesVariable:hover,
#changeSinLawAnglesAngle:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#sinLawAnglesAnglePopup, 
#sinLawAnglesPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#sinLawAnglesAnglePopup h2,#sinLawAnglesAnglePopup h3, 
#sinLawAnglesPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#sinLawAnglesPopup .variableButton8,
#sinLawAnglesAnglePopup .sinLawAnglesAngleButton{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#sinLawAnglesPopup .variableButton8:hover,
#sinLawAnglesAnglePopup .sinLawAnglesAngleButton:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.cosineLawSidesPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.cosineLawSidesPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.cosineLawSidesPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#cosineLawSidesBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#cosineLawSidesBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#cosineLawSidesResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCosineLawSides{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCosineLawSides:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.cosineLawSidesPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#cosineLawSidesInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#cosineLawSidesInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#cosineLawSidesInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#cosineLawSidesInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#cosineLawSidesInputs select,
#cosineLawSidesInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeCosineLawSidesVariable{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeCosineLawSidesVariable:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#cosineLawSidesPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#cosineLawSidesPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#cosineLawSidesPopup .variableButton9{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#cosineLawSidesPopup .variableButton9:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.cosineLawAnglesPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.cosineLawAnglesPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.cosineLawAnglesPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#cosineLawAnglesBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#cosineLawAnglesBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#cosineLawAnglesResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateCosineLawAnglesSides{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateCosineLawAnglesSides:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.cosineLawAnglesPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#cosineLawAnglesInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#cosineLawAnglesInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#cosineLawAnglesInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#cosineLawAnglesInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#cosineLawAnglesInputs select,
#cosineLawAnglesInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeCosineLawAnglesVariable{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeCosineLawAnglesVariable:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#cosineLawAnglesPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#cosineLawAnglesPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#cosineLawAnglesPopup .variableButton10{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#cosineLawAnglesPopup .variableButton10:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.areaUsingTrigPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.areaUsingTrigPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.areaUsingTrigPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#areaUsingTrigBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#areaUsingTrigBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#areaUsingTrigResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateAreaUsingTrig{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateAreaUsingTrig:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.areaUsingTrigPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#areaUsingTrigInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#areaUsingTrigInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#areaUsingTrigInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#areaUsingTrigInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#areaUsingTrigInputs select,
#areaUsingTrigInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeAreaUsingTrigVersion{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 60px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeAreaUsingTrigVersion:hover {
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform:scale(1.2);
}

#areaUsingTrigPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;

}

#areaUsingTrigPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#areaUsingTrigPopup .variableButton11{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#areaUsingTrigPopup .variableButton11:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.HeronsFormulaPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.HeronsFormulaPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.HeronsFormulaPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#heronsFormulaBackButton {
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#heronsFormulaBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#heronsFormulaResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateHeronsFormula{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateHeronsFormula:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.HeronsFormulaPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.forcePage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.forcePage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.forcePage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#forceBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#forceBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#forceResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateForce{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateForce:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.forcePage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#forceInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#forceInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#forceInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#forceInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#forceInputs select,
#forceInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeForceVersion{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 60px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeForceVersion:hover {
    background: rgb(11,61,46);
    color: rgb(247,249,248); 

    transform:scale(1.2);
}

#forcePopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

#forcePopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#forcePopup .variableButton12{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#forcePopup .variableButton12:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.weightPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.weightPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.weightPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#WeightBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#weightBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#weightResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateWeight{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateWeight:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.weightPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#weightInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#weightInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#weightInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#weightInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#weightInputs select,
#weightInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeWeightVersion{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 60px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeWeightVersion:hover {
    background: rgb(11,61,46);
    color: rgb(247,249,248); 

    transform:scale(1.2);
}

#weightPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

#weightPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#weightPopup .variableButton13{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#weightPopup .variableButton13:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}

.normalPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.normalPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.normalPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#normalBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#normalBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#normalResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateNormal{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateNormal:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.normalPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#normalInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#normalInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#normalInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#normalInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#normalInputs select,
#normalInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeNormalVersion{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 60px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeNormalVersion:hover {
    background: rgb(11,61,46);
    color: rgb(247,249,248); 

    transform:scale(1.2);
}

#normalPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

#normalPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#normalPopup .variableButton14{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#normalPopup .variableButton14:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}



.densityPage{
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items: center;
    position:relative
}

.densityPage::before{
    content: "";
    position:absolute;
    inset: 12px;
    min-height: calc(100% - 24px);
    border: 8px solid rgb(255,255,255);
    border-radius: 35px 60px 45px 70px;
    pointer-events:none;
}

.densityPage h1 {
    margin-top:80px;
    font-size:65px;
    text-align: center;
    font-weight:800;
    letter-spacing:3px;
    text-shadow: 5px 5px 0px rgba(11, 61, 46, 0.718);
    font-family: 'Baloo 2', sans-serif;
}

#densityBackButton{
    border:none;
    border-radius:15px;
    background:rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 18px;
    font-weight: 800;
    width: 80px;
    height: 35px;
    position:absolute;
    top: 35px;
    left: 35px;
    box-shadow: 4px 4px 0px rgba(11,61,46,0.718);
    cursor:pointer;
    transition: 0.2s ease;
}

#densityBackButton:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

#densityResult {
    color: rgb(11,61,46);
    font-size:24px;
    font-weight:800;
    margin:15px 0 0;
}

#calculateDensity{
    border: none;
    border-radius:15px;
    background: rgb(11,61,46);
    color: rgb(247,249,248);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 30px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    cursor: pointer;
    transition: 0.3s ease;
    margin-top:5px;
}

#calculateDensity:hover {
    background: rgb(128, 170, 144);
    color: rgb(6,42,31);
    transform:scale(1.2);
}

.densityPage .calculatorBox {
    top: 10px;
    height: auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#densityInputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#densityInputs label{
    color: rgb(11,61,46);
    font-size:22px;
    font-weight:800;
    margin-bottom:8px;
}

#densityInputs input{
    width:250px;
    height:40px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#densityInputs select{
    width:260px;
    height:50px;
    border: 3px solid rgb(11,61,46);
    border-radius: 10px;
    font-family:'baloo 2', sans-serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

#densityInputs select,
#densityInputs input:focus {
    outline: none;
    border-color: rgb(128, 170, 144);
}

#changeDensityVersion{
    border: none;
    border-radius:15px;
    background: rgb(247, 249, 248);
    color: rgb(11,61,46);
    font-family: "baloo 2";
    font-size:18px;
    font-weight: 800;
    width: 180px;
    height: 60px;
    box-shadow: 4px 4px 0px rgba(11, 61, 46, 0.718);
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.6s ease;
    margin-top:5px;
}

#changeDensityVersion:hover {
    background: rgb(11,61,46);
    color: rgb(247,249,248); 

    transform:scale(1.2);
}

#densityPopup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

#densityPopup h2 {
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

#densityPopup .variableButton15{
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 2px solid rgb(11, 61, 46);
    border-radius: 12px;
    background: rgb(247, 249, 248);
    color: rgb(11, 61, 46);
    font-family: 'Baloo 2', sans-serif;
    font-size: 17px;
    font-weight: 800;
    margin-bottom:10px;
    cursor: pointer;
    transition: 0.5s ease;
}

#densityPopup .variableButton15:hover{
    background: rgb(11,61,46);
    color: rgb(247, 249, 248);
    transform: scale(1.2);
}