diff --git a/Converter All by Manas/app.js b/Converter All by Manas/app.js
new file mode 100644
index 0000000..038bded
--- /dev/null
+++ b/Converter All by Manas/app.js	
@@ -0,0 +1,224 @@
+const BASE_URL= "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies"; //We have removed eur/jpy.json this part to use in line no 47.
+const dropdowns = document.querySelectorAll(".dropdown select");
+const fromCurr = document.querySelector(".from select");
+const toCurr = document.querySelector(".to select");
+const msg = document.querySelector(".msg");
+// for(code in countryList){
+//     console.log(code,countryList[code]);
+// } we can access the country code and currency code here
+
+for(let select of dropdowns){
+    for(currCode in countryList){
+        let newOption = document.createElement("option");
+        newOption.innerText = currCode;
+        newOption.value = currCode;
+        if (select.id === "from" && currCode === "INR"){
+            newOption.selected = "selected";
+        } else if (select.id === "to" && currCode === "USD"){
+            newOption.selected = "selected"; // Here you can use any word.
+        }
+        select.append(newOption);
+    }
+
+    select.addEventListener("change",(evt) => {
+        updateFlag(evt.target);
+    });
+}
+
+const updateFlag = (element) => {
+    let currCode = element.value; //Here you can use any word in place of currCode.
+    let countryCode = countryList[currCode]; // here [currCode] come from for in loop in line no 9. Here "" this value of code.js will come from this code.
+    let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`
+    let img = element.parentElement.querySelector("img"); // Here element is our select and we have to add image to the parent div select-container so element.parentElement is used.
+    img.src = newSrc;
+};
+
+const btn = document.querySelector("form button");
+
+btn.addEventListener("click",(evt) => {
+    evt.preventDefault(); //It blocks the refresh and submit default behavior of the button
+    updateExchRate();
+});
+
+const updateExchRate = async()=>{
+    let amount = document.querySelector(".amount input");
+    let amtVal = amount.value;
+    if (amtVal ==="" || amtVal < 1) {
+        amtVal = 1;
+        amount.value = "1";
+    }
+    // console.log(fromCurr.value, toCurr.value); here values are in capital but our api will work in lowercase so bellow we have to covert it to lower case
+    const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`; // fromCurr and toCurr is defined in line No. 3 and 4
+    let response = await fetch(URL);
+    console.log(response);
+    let data = await response.json()
+    console.log(data);
+    let rate = await data[toCurr.value.toLowerCase()];
+    console.log(rate);
+
+    let finalAmount = amtVal * rate;
+    msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
+}
+
+window.addEventListener("load",() => {
+  updateExchRate();
+})
+ // to show update value in <p></p> tag when opening refer to video last part.
+
+
+
+function calculateAge(){
+    const dobInput = document.getElementById("doB1").value;
+    const toDateInput = document.getElementById("ToDate1").value;
+    const doB = new Date(dobInput);
+    const toDate = new Date(toDateInput);
+    if(!dobInput || !toDateInput){
+        alert("Please Enter Valid Date !!");
+        return;
+    }
+    const resultElement = document.getElementById("ResultDisplay");
+    const ageInMilliSeconds = Math.abs(toDate - doB);
+    const ageInDays = Math.ceil(ageInMilliSeconds/(1000*60*60*24));
+
+    const Years = Math.floor(ageInDays/365);
+    const remainingDays = ageInDays % 365;
+    const Months = Math.floor(remainingDays/30);
+    const Days = Math.floor(remainingDays % 30);
+
+    resultElement.innerText = `Your Age is ${Years} Years, ${Months} Months & ${Days} days`;
+
+}
+const btn2 = document.getElementById("ageCal");
+
+btn2.addEventListener("click",() => {
+    calculateAge();
+});
+
+//Length Converter
+
+function validateLengthConverterForm(){
+    _cmnRemoveAllErrorMessage();
+    let fromLength = document.getElementById("fromLength").value;
+    if(fromLength = "" || isNaN(fromLength) || (! isNaN(fromLength) && Number(fromLength)) <= 0){
+        _cmnShowAllErrorMessage("fromLength","Enter valid length");
+        return false;
+    }
+    else{
+        return true;
+    }
+}
+function resetLengthConverter(){
+    if(confirm("Are you sure to reset?")){
+        document.getElementById("fromLength").value = "";
+        document.getElementById("fromUnit").value = "Millimeter";
+        document.getElementById("toUnit").value = "Centimeter"
+        document.getElementById("toLength").value = "";
+        _cmnRemoveAllErrorMessage();
+
+        _cmnHideElement("OutputResult");
+        _cmnShowElement("OutputInfo", "flex");
+    }
+}
+
+function convertLength(fromLength, fromUnit, toUnit){
+    fromLength = Number(fromLength);
+    let result = 0;
+    makeThisToMillimeter = 0;
+    inMillimeter = 0;
+
+    //Converting all values to millimeter
+
+    switch(fromUnit){
+        case "Millimeter":
+            makeThisToMillimeter = 1;
+        break;
+        case "Centimeter":
+            makeThisToMillimeter = 10;
+        break;
+        case "Decimeter":
+            makeThisToMillimeter = 100;
+        break;
+        case "Meter":
+            makeThisToMillimeter = 1000;
+        break;
+        case "Kilometer":
+            makeThisToMillimeter = 1000000;
+        break;
+        case "Foot":
+            makeThisToMillimeter = 304.8;
+        break;
+        case "Inch":
+            makeThisToMillimeter = 25.4;
+        break;
+        case "Mile":
+            makeThisToMillimeter = 1609344;
+        break;
+        case "Yard":
+            makeThisToMillimeter = 914.4;
+        break;
+    }
+
+    inMillimeter = fromLength * makeThisToMillimeter;
+
+    switch(toUnit){
+        case "Millimeter":
+            result = inMillimeter;
+        break;
+        case "Centimeter":
+            result = inMillimeter / 10;
+        break;
+        case "Decimeter":
+            result = inMillimeter / 100;
+        break;
+        case "Meter":
+            result = inMillimeter / 1000;
+        break;
+        case "Kilometer":
+            result = inMillimeter / 1000000;
+        break;
+        case "Foot":
+            result = inMillimeter / 304.8;
+        break;
+        case "Inch":
+            result = inMillimeter / 25.4;
+        break;
+        case "Mile":
+            result = inMillimeter / 1609344;
+        break;
+        case "Yard":
+            result = inMillimeter / 914.4;
+        break;
+    }
+    return result;
+}
+function calculateLength(){
+    if(validateLengthConverterForm()){
+        let fromUnit = document.getElementById("fromUnit").value;
+        let toUnit = document.getElementById("toUnit").value;
+        let fromLength = document.getElementById("fromLength").value;
+        let toLength = document.getElementById("toLength");
+
+        let finalValue = convertLength(fromLength,fromUnit,toUnit);
+
+        toLength.value = Number(finalValue).toFixed(2);
+
+        let showResult = document.querySelector("#lengthResult");
+        showResult.innerHTML = `${fromLength} ${fromUnit} = ${Number(finalValue).toFixed(2)} ${toUnit}`;
+
+        // Hide info and show result
+
+        _cmnHideElement("OutputInfo");
+        _cmnShowElement("OutputResult","flex");
+    }
+}
+
+let resetBtn = document.querySelector(".tool-btn-reset");
+
+let calBtn = document.querySelector(".tool-btn-calculate");
+
+resetBtn.onclick = () =>{
+    resetLengthConverter();
+};
+calBtn.onclick = () =>{
+    calculateLength();
+};
diff --git a/Converter All by Manas/common.js b/Converter All by Manas/common.js
new file mode 100644
index 0000000..5935369
--- /dev/null
+++ b/Converter All by Manas/common.js	
@@ -0,0 +1,211 @@
+const countryList = {
+    AED: "AE",
+    AFN: "AF",
+    XCD: "AG",
+    ALL: "AL",
+    AMD: "AM",
+    ANG: "AN",
+    AOA: "AO",
+    AQD: "AQ",
+    ARS: "AR",
+    AUD: "AU",
+    AZN: "AZ",
+    BAM: "BA",
+    BBD: "BB",
+    BDT: "BD",
+    XOF: "BE",
+    BGN: "BG",
+    BHD: "BH",
+    BIF: "BI",
+    BMD: "BM",
+    BND: "BN",
+    BOB: "BO",
+    BRL: "BR",
+    BSD: "BS",
+    NOK: "BV",
+    BWP: "BW",
+    BYR: "BY",
+    BZD: "BZ",
+    CAD: "CA",
+    CDF: "CD",
+    XAF: "CF",
+    CHF: "CH",
+    CLP: "CL",
+    CNY: "CN",
+    COP: "CO",
+    CRC: "CR",
+    CUP: "CU",
+    CVE: "CV",
+    CYP: "CY",
+    CZK: "CZ",
+    DJF: "DJ",
+    DKK: "DK",
+    DOP: "DO",
+    DZD: "DZ",
+    ECS: "EC",
+    EEK: "EE",
+    EGP: "EG",
+    ETB: "ET",
+    EUR: "FR",
+    FJD: "FJ",
+    FKP: "FK",
+    GBP: "GB",
+    GEL: "GE",
+    GGP: "GG",
+    GHS: "GH",
+    GIP: "GI",
+    GMD: "GM",
+    GNF: "GN",
+    GTQ: "GT",
+    GYD: "GY",
+    HKD: "HK",
+    HNL: "HN",
+    HRK: "HR",
+    HTG: "HT",
+    HUF: "HU",
+    IDR: "ID",
+    ILS: "IL",
+    INR: "IN",
+    IQD: "IQ",
+    IRR: "IR",
+    ISK: "IS",
+    JMD: "JM",
+    JOD: "JO",
+    JPY: "JP",
+    KES: "KE",
+    KGS: "KG",
+    KHR: "KH",
+    KMF: "KM",
+    KPW: "KP",
+    KRW: "KR",
+    KWD: "KW",
+    KYD: "KY",
+    KZT: "KZ",
+    LAK: "LA",
+    LBP: "LB",
+    LKR: "LK",
+    LRD: "LR",
+    LSL: "LS",
+    LTL: "LT",
+    LVL: "LV",
+    LYD: "LY",
+    MAD: "MA",
+    MDL: "MD",
+    MGA: "MG",
+    MKD: "MK",
+    MMK: "MM",
+    MNT: "MN",
+    MOP: "MO",
+    MRO: "MR",
+    MTL: "MT",
+    MUR: "MU",
+    MVR: "MV",
+    MWK: "MW",
+    MXN: "MX",
+    MYR: "MY",
+    MZN: "MZ",
+    NAD: "NA",
+    XPF: "NC",
+    NGN: "NG",
+    NIO: "NI",
+    NPR: "NP",
+    NZD: "NZ",
+    OMR: "OM",
+    PAB: "PA",
+    PEN: "PE",
+    PGK: "PG",
+    PHP: "PH",
+    PKR: "PK",
+    PLN: "PL",
+    PYG: "PY",
+    QAR: "QA",
+    RON: "RO",
+    RSD: "RS",
+    RUB: "RU",
+    RWF: "RW",
+    SAR: "SA",
+    SBD: "SB",
+    SCR: "SC",
+    SDG: "SD",
+    SEK: "SE",
+    SGD: "SG",
+    SKK: "SK",
+    SLL: "SL",
+    SOS: "SO",
+    SRD: "SR",
+    STD: "ST",
+    SVC: "SV",
+    SYP: "SY",
+    SZL: "SZ",
+    THB: "TH",
+    TJS: "TJ",
+    TMT: "TM",
+    TND: "TN",
+    TOP: "TO",
+    TRY: "TR",
+    TTD: "TT",
+    TWD: "TW",
+    TZS: "TZ",
+    UAH: "UA",
+    UGX: "UG",
+    USD: "US",
+    UYU: "UY",
+    UZS: "UZ",
+    VEF: "VE",
+    VND: "VN",
+    VUV: "VU",
+    YER: "YE",
+    ZAR: "ZA",
+    ZMK: "ZM",
+    ZWD: "ZW",
+};
+function _cmnRemoveAllErrorMessage()
+{
+    let allErrorBorder = document.getElementsByClassName('.tool-error-border');
+    console.log(allErrorBorder.length)
+	let allErrorMessage = document.getElementsByClassName('tool-error-message');
+	let i;
+    // remove border
+    for(i = (allErrorBorder.length) - 1; i>=0; i--)
+    {
+        allErrorBorder[i].classList.remove("tool-error-border");
+    }
+    // remove error message
+    for(i = (allErrorMessage.length) - 1; i>=0; i--)
+    {
+        allErrorMessage[i].remove();
+    }	  
+}
+
+function _cmnShowAllErrorMessage(fieldID,errorMessage){
+    let inputField = document.getElementById(fieldID);
+    inputField.classList.add("tool-error-border");
+    inputField.focus();
+
+    let errorMessageElement = document.createElement("p");
+    errorMessageElement.innerText = errorMessage;
+    errorMessageElement.classList.add("tool-error-message");
+    inputField.parentNode.insertBefore(errorMessageElement, inputField.nextSibling);
+}
+function _cmnHideElement(elementID){
+    let selectedDisplayValue = document.getElementById(elementID).style.display;
+    if(selectedDisplayValue != "none"){
+        document.getElementById(elementID).style.display = "none";
+    }
+}
+
+function _cmnShowElement(elementID,displayName){
+    let selectedDisplayValue = document.getElementById(elementID).style.display;
+    if(selectedDisplayValue != displayName){
+        document.getElementById(elementID).style.display = displayName;
+    }
+}
+function updateLayOut(){
+    _cmnHideElement("Age");
+    _cmnHideElement("Length");
+    _cmnHideElement("Currency");
+    const selectedTool = document.getElementById("Tool-Select").value;
+    console.log(selectedTool)
+    _cmnShowElement(selectedTool,"block");
+}
+  
\ No newline at end of file
diff --git a/Converter All by Manas/index.html b/Converter All by Manas/index.html
new file mode 100644
index 0000000..f89506d
--- /dev/null
+++ b/Converter All by Manas/index.html	
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+    <div class="head-container">
+    <h1>Select Your Tool 🛠️</h1>
+    <select id="Tool-Select" onchange="updateLayOut()">
+        <option value="" disabled selected>Choose an option</option>
+        <option  value="Age">Age Calculator</option>
+        <option  value="Length">Length Converter</option>
+        <option value="Currency">Currency Converter</option>
+    </select> 
+    </div>
+    <div class="allTools" id="Hide"> <!-- Currency Converter start -->
+
+        <div class="container" id="Currency">
+            <h2>Currency converter</h2>
+            <form>
+                <div class="amount">
+                    <p>Enter Amount</p>
+                    <input id="amount1" value="100" type="text" />
+                </div>
+                <div class="dropdown">
+                    <div class="from">
+                        <p>From</p>
+                        <div class="select-container">
+                            <img src="https://flagsapi.com/IN/flat/64.png">
+                            <select id="from"></select>
+                        </div>
+                    </div>
+                    <i class="fa-solid fa-arrow-right-arrow-left"></i>
+                    <div class="to">
+                        <p>To</p>
+                        <div class="select-container">
+                            <img src="https://flagsapi.com/US/flat/64.png">
+                            <select id="to"></select>
+                        </div>
+                    </div>
+                </div>
+                <div class="msg">1USD = 80 INR</div>
+                <button id="getResult">Get Converted Value</button>
+            </form>
+        </div>
+        
+    
+        <!-- Currency Converter End -->
+
+        <!-- Age Calculator Start -->
+
+        <div class="main-age-calculator-container" id="Age">
+            <h2>Check Your Age 🕵️‍♂️</h2>
+            <div class="doBContainer">
+                <label id="doB">Birth Date :</label>
+                <input type="date" id="doB1">
+            </div>
+            <div class="toDateContainer">
+                <label id="toDate">To Date :</label>
+                <input type="date" id="ToDate1">
+            </div>
+            <div class="calculatorContainer">
+                <button id="ageCal">Calculate</button>
+            </div>
+            <div class="result">
+                <P id="ResultDisplay"></P>
+            </div>
+        </div>
+
+        <!-- Age Calculator End -->
+
+        <!-- Length Converter Start -->
+    
+        <div class="main_container" id="Length">
+            <h2>Length Converter</h2>
+            <div id="tool_box" class="display_container">
+                <div class="tool-container-field">
+                    <div class="tool-input-group">
+                        <div class="tool-input-label">
+                            <label for="from unit">From</label>
+                        </div>
+                        <select class="tool-select-group" id="fromUnit">
+                            <option selected value="Millimeter">Millimeter</option>
+                            <option value="Centimeter">Centimeter</option>
+                            <option value="Decimeter">Decimeter</option>
+                            <option value="Meter">Meter</option>
+                            <option value="Kilometer">Kilometer</option>
+                            <option value="Foot">Foot</option>
+                            <option value="Inch">Inch</option>
+                            <option value="Mile">Mile</option>
+                            <option value="Yard">Yard</option>
+                        </select>
+                        <input placeholder="Type Your value here" id="fromLength" type="number" name="from-length" min="0" class="tool-input-field">
+                    </div>
+    
+                    <div class="tool-input-group">
+                        <div class="tool-input-label">
+                            <label for="to unit">To</label>
+                        </div>
+                        <select class="tool-select-group" id="toUnit">
+                            <option value="Millimeter">Millimeter</option>
+                            <option selected value="Centimeter">Centimeter</option>
+                            <option value="Decimeter">Decimeter</option>
+                            <option value="Meter">Meter</option>
+                            <option value="Kilometer">Kilometer</option>
+                            <option value="Foot">Foot</option>
+                            <option value="Inch">Inch</option>
+                            <option value="Mile">Mile</option>
+                            <option value="Yard">Yard</option>
+                        </select>
+                        <input readonly placeholder="Output" id="toLength" type="number" name="to-length" min="0" class="tool-input-field readonly-background">
+                    </div>
+                    <div class="tool-input-group">
+                        <button class="tool-btn tool-btn-reset">Reset</button>
+                        <button class="tool-btn tool-btn-calculate">Calculate</button>
+                    </div>
+                </div>
+                <div class="tool-container-field">
+                    <div id="OutputInfo" class="tool-output-information tool-output-box">
+                        <h2>Basic Information</h2>
+                        <ul>
+                            <li>1 millimeter (mm) = 1 millimeter (mm)</li>
+                            <li>10 millimeters (mm) = 1 centimeter (cm)</li>
+                            <li>100 millimeters (mm) = 1 decimeter (dm)</li>
+                            <li>1000 millimeters (mm) = 1 meter (m)</li>
+                            <li>1000000 millimeters (mm) = 1 kilometer (km)</li>
+                            <li>304.8 millimeters (mm) = 1 foot (ft)</li>
+                            <li>25.4 millimeters (mm) = 1 inch (in)</li>
+                            <li>1609344 millimeters (mm) = 1 mile (mi)</li>
+                            <li>914.4 millimeters (mm) = 1 yard (yd)</li>
+                        </ul>
+                    </div>
+                    <div id="OutputResult" class="tool-output-result tool-output-box">
+                        <h2>Result</h2>
+                        <p id="lengthResult"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="common.js"></script>
+    <script src="app.js"></script>
+</body>
\ No newline at end of file
diff --git a/Converter All by Manas/style.css b/Converter All by Manas/style.css
new file mode 100644
index 0000000..263e556
--- /dev/null
+++ b/Converter All by Manas/style.css	
@@ -0,0 +1,409 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body {
+    /* display: flex; */
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f4e4ba;
+}
+#Hide{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.head-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 80px;
+    margin-bottom: 10px;
+}
+#Tool-Select{
+    width:70%;
+    padding: 5px;
+    height: 50px;
+    margin-top: 15px;
+    font-size: 20px;
+    font-weight: 700;
+}
+/* Exchange Rate Calculator */
+
+.container {
+    display: none;
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 1rem;
+    min-height: 45vh;
+    width: 30vh;
+}
+form {
+    margin: 2rem 0 1rem 0;
+}
+#type {
+  width: 100%;
+  border: none;
+  outline: none;
+  border-radius: 0.75rem;
+}
+#amount1{
+  width: 100%;
+  border: none;
+  outline: none;
+  border-radius: 0.75rem;
+  border: 1px solid lightgray;
+  font-size: 1rem;
+  height: 3rem;
+  padding-left: 0.5rem;
+}
+#from{
+  width: 100%;
+  border: none;
+  outline: none;
+  border-radius: 0.75rem;
+}
+#to{
+  width: 100%;
+  border: none;
+  outline: none;
+  border-radius: 0.75rem;
+}
+#getResult{
+  width: 100%;
+  border: none;
+  outline: none;
+  border-radius: 0.75rem;
+  height: 3rem;
+  background-color: #af4d98;
+  color: #fff;
+  font-size: 1.15rem;
+  cursor: pointer;
+}
+.dropdown {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+}
+.dropdown i {
+    font-size: 1.5rem;
+    margin-top: 1rem;
+}
+.select-container img {
+    max-width: 2rem;
+}
+.select-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 6rem;
+    border-radius: 0.5rem;
+    border: 1px solid lightgray;
+}
+.select-container select {
+    font-size: 1rem;
+    width: auto;
+}
+.msg {
+    margin: 2rem 0 2rem 0;
+}
+/* Age Calculator */
+
+
+.main-age-calculator-container{
+    display: none;
+    flex-direction: column;
+    background-color:#4942E4;
+    max-width: 330px;
+    height: 450px;
+    border-radius: 1.5rem;
+    -webkit-border-radius: 1.5rem;
+    -moz-border-radius: 1.5rem;
+    -ms-border-radius: 1.5rem;
+    -o-border-radius: 1.5rem;
+}
+.main-age-calculator-container h2{
+    text-align: center;
+    font-weight: 500;
+    font-size: 2rem;
+    padding:1.5rem;
+    color: #F8FAE5;
+    font-family: 'Poppins', sans-serif;
+}
+.doBContainer{
+    display: flex;
+    justify-content: space-around;
+    margin: 1rem;
+    gap: 0.3rem;
+}
+.toDateContainer{
+    display: flex;
+    justify-content: space-around;
+    margin: 1rem;
+    gap: 0.3rem;
+}
+#doB{
+    text-align: left;
+    font-size: 1.5rem;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 200;
+    justify-content: center;
+    color: #F8FAE5;
+}
+#doB1{
+    text-align: justify;
+    font-size: 1.2rem;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+    box-shadow:rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+    border:1px solid lightgray;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+#toDate{
+    text-align: left;
+    font-size: 1.5rem;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 200;
+    justify-content: center;
+    color: #F8FAE5;
+}
+#ToDate1{
+    text-align: justify;
+    font-size: 1.2rem;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+    box-shadow:rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+    border: 1px solid lightgrey;
+    color: rgba(0, 0, 0, 0.5);
+}
+.calculatorContainer{
+    display: flex;
+    justify-content: center;
+    margin-top: 4rem;
+}
+#ageCal{
+    height: 2rem;
+    font-size: 1.5rem;
+    height: 2.5rem;
+    width: 15rem;
+    background-color: #222831;
+    border-radius: 5px;
+    box-shadow:rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 550;
+    color:#F3F8FF;
+}
+.result{
+    display: flex;
+    justify-content: center;
+    margin: 3rem;
+}
+#ResultDisplay{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 900;
+    color:#DA0037;
+    font-size: small;
+    background-color: #FBFFDC;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+    padding: 1px;
+}
+
+/* Length Converter */
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&display=swap');
+
+
+.main_container{
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    max-width: 1200px;
+    margin-left: 23px;
+}
+.main_container h2{
+    display: block;
+    text-align: center;
+    margin: 10px 20px;
+    text-transform: uppercase;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: 40px;
+    font-weight: 700;
+}
+.display_container{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 10px;
+    color: #CDFADB;
+}
+.tool-container-field{
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background: #7F27FF;
+    border-radius: 10px;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+.tool-input-group{
+    display: flex;
+    justify-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin: 5px,auto;
+    position: relative;
+    padding: 10px 5px;
+    border-bottom: 1px solid rgb(222, 228, 228);
+}
+.tool-input-group :last-child{
+    border: none;
+}
+.tool-input-label{
+    display: block;
+    font-size: 20px;
+    line-height: 40px;
+    min-width: 60px;
+}
+
+.tool-input-field{
+    display: block;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+    width: 150px;
+    height: 25px;
+    border: None;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+.tool-btn{
+    border: none;
+    cursor: pointer;
+    min-width: 100px;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+    font-size: 20px;
+    padding: 10px 15px;
+    margin: 5px;
+    color: aliceblue;    
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+}
+.tool-btn-reset{
+    width: 150px;
+    margin-left: 0px;
+    background: #FAEF5D;
+    color: rgb(58, 25, 25);
+}
+.tool-btn-calculate{
+    width: 150px;
+    margin-right: 0px;
+    background: #0C2D57;
+}
+.tool-btn:hover{
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
+}
+.tool-select-group{
+    float: right;
+    border: none;
+    height: 35px;
+    min-width: 100px;
+    text-align: center;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    -o-border-radius: 5px;
+    font-weight: 700;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+}
+.tool-output-box{
+    display: none;
+    width:100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.tool-output-box ul{
+    margin: 5px 5px 5px 25px;
+}
+.tool-output-box ul li{
+    padding: 2px;
+    font-size: 15px;
+}
+#OutputInfo{
+    display: flex;
+}
+.tool-output-box h2{
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 30px;
+}
+.tool-output-box p{
+    text-align: left;
+    margin-top: 10px;
+    font-size: 20px;
+    align-self: flex-start;
+}
+
+.tool-error-border{
+    border: 2px solid red;
+}
+.tool-error-message{
+    display: block;
+    color:black;
+    font-size: 13px;
+    font-style: italic;
+    font-weight: 800;
+    /* margin: 5px 5px 0px 5px; */
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+}
+.readonly-background{
+    background: #E5E5E5;
+}
+
+#lengthResult{
+    text-align: center;
+    align-self: center;
+    margin-top: 20px;
+    font-size: 20px;
+    font-family: sans-serif;
+    font-weight: 600;
+}
+@media only screen and (max-width: 900px) {
+    .main-container{
+        width: 300px;
+        margin: 10px;
+        box-sizing: border-box;
+        padding: 5px;
+        align-items:center;
+    }
+    .main-container h1{
+        margin: 10px 5px;
+        font-size: 25px;
+    }
+    .display_container{
+        width: 90%;
+        flex-direction: column;      
+    }
+    .tool-container-field{
+        width: 98%;
+    }
+}
\ No newline at end of file