Modified the files

Calculator.css

@@ -269,24 +269,6 @@ a{
     /* background-color:rgba(93, 93, 243, 0.637); */
 }
 
-/* .insert--JS{
-    /* position: relative;
-    width: 100%;
-    height: 100%;  */
-    /* bottom: -10px; 
-    background-color: #050A30;
-
-} */
-
-.insert--JS p{
-    /* display: grid; */
-    /* grid-template-rows: 1; */
-    position: absolute;
-    /* bottom: -10%; */
-    background-color: #050A30; 
-    left: 50%;
-    text-align: center;
-}
 
 .currency:hover{
     color: orange;
@@ -338,7 +320,7 @@ a{
     transition: .4s;
     top: 98px;
     left:17px;
-
+    height: 420px;
 }
 
 p.small__p{

Calculator.html

@@ -21,13 +21,13 @@
           <table>
             <tr>
               <td>
-                <a class="small--anchor" href="#"
+                <a class="small--anchor" target="_self" href="./Calculator.html"
                   ><button class="number--btn smaller__el-TACD">123</button></a
                 >
                 <p class="below_small--texts">Number</p>
               </td>
               <td>
-                <a class="small--anchor" href="#">
+                <a class="small--anchor" href="./index.html">
                   <button class="therm-btn smaller__el-TACD">
                     <img
                       class="therm"
@@ -183,9 +183,6 @@
           </tr>
         </table>
       </div>
-      <div class="insert--JS">
-        <p>Recent Calculations</p>
-      </div>
     </div>
     <script src="calculator.js"></script>
   </body>

Temperature.css

@@ -179,7 +179,7 @@ p.small__p{
 }
 
 .dropdown--outmost:hover .dropdown--heading{
-    transform: translateY(-70px);
+    transform: translateY(-80px);
     box-shadow:
       inset 0 0 60px whitesmoke,
       inset 20px 0 80px #f0f,
@@ -205,7 +205,7 @@ opacity: 1;
 }
 
 .dropdown--outmost:hover .dropdown--options{
-    transform: translateY(-90px);
+    transform: translateY(-110px);
 }
 
 p.below_small--texts{
@@ -217,3 +217,162 @@ p.below_small--texts{
     color: white ;
 }
 
+/* ------------------------------------------------ */
+
+.larger--container{
+    display: flex;
+    flex-direction: column;
+/*     justify-content: center;
+    align-items: center; */
+    background-color: #030330 ;
+    width: 80%; 
+    height: 100vh; 
+    color: white;
+    position: relative;
+    /* float: bottom; */
+    font-size: 30px;
+    left: 0px;
+}
+
+.select--contain {
+    display: flex;
+    width: 100%;
+
+    margin-top: 20px;
+}
+
+.select--options_1{
+    margin-right: 40px;
+}
+
+.label_container{
+    position: relative;
+    left: 7%;
+}
+
+.therm__edit{
+
+}
+
+img.img_therm{
+    position: absolute;
+    left:60% ;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin:auto;
+}
+
+/* #mercury{
+    position: absolute;
+    left:60% ;
+    right: 0;
+    top: 0;
+    bottom: 5%;
+    margin:auto;
+    height : 200px;
+    width: 20px;
+    background-color: orange;
+} */
+
+#mercury__outer{
+    position: absolute;
+    left:60% ;
+    right: 0;
+    top: 0;
+    bottom: 5%;
+    margin:auto;
+    height : 200px;
+    width: 20px;
+}
+/* 
+#mercury__inner{
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    margin:auto;
+    height : 20%;
+    width: 100%;
+    background-color: rgb(255, 72, 0);
+} */
+
+
+
+option{
+    font-size: 14px;
+    color:  #e2d5d5;
+    background-color: #454545;
+}
+
+select option:checked,
+select option:hover {
+    box-shadow: 0 0 10px 100px #000 inset;
+}
+
+label{
+    font-size: 22px;
+/*     position: relative;
+    top: 20px;
+ */
+}
+
+
+select{
+    cursor: pointer;
+    background-color: rgba(119, 15, 189, 0.753);  
+    color: rgb(248, 247, 247);
+    font-size: 20px;
+    border-radius: 20px;
+    padding: 7px;
+    outline: none;
+    transition: all .5s;
+}
+
+select:hover{
+    background-color: #17ce07;
+    color: rgb(20, 17, 17);
+}
+
+select:active{
+    border-radius: 25px;
+    outline: none;
+    background-color:rgb(109, 160, 7);
+
+}
+
+input{
+    font-size: 20px;
+}
+
+button{
+    padding: 10px ;
+    color: white;
+    background-color: rgba(29, 25, 25, 0.781);
+    border-radius: 10px;
+    transition: .5s background-color;
+}
+
+#convert:hover{
+    cursor: pointer;
+    background-color:aqua;
+    color:#000;
+}
+
+.select--options{
+/*     position: absolute;
+    left : 30%; */
+    display: grid;
+    grid-template-columns: 1fr 1fr ;
+    width : 200px;
+    vertical-align: baseline;
+}
+
+.output{
+    position: absolute;
+    left : 10%
+}
+
+.result{
+    position: absolute;
+    top: 107%
+}