phase fix layout

Author: SoonOwOnooS

CSS/pop-up.css

@@ -2,7 +2,7 @@
     position:fixed;
     inset:0;
     background:rgba(0,0,0,0.4);
-    z-index: 1;
+    z-index: 2;
     display:flex;
     justify-content:center;
     align-items:center;
@@ -19,7 +19,7 @@
 .panel {
     display: none;
     position:relative;
-    width:50%;
+    width: clamp(320px, 90%, 700px);
     height: 80%;
     background: white;
     border-radius:12px;
@@ -28,6 +28,12 @@
     flex-direction: column;
 }
 
+@media (max-width: 520px) {
+    .panel {
+        height: 90%;
+    }
+}
+
 .panel.active {
     display: flex;
     opacity: 1;
@@ -37,12 +43,12 @@
     position:absolute;
     top: 1rem;
     right: 1rem;
-    width: 2rem;
-    height: 2rem;
+    width: clamp(1.4rem, 2vw, 2rem);
+    height: clamp(1.4rem, 2vw, 2rem);
     background: darkred;
     justify-content: center;
     border:none;
-    font-size:24px;
+    font-size: clamp(1rem, 2vw, 1.4rem);
     cursor:pointer;
     color: black;
     border: 1px solid gray;

CSS/style.css

@@ -11,7 +11,7 @@
 .home-introduction,
 .portfolio {
     background: linear-gradient(160deg, rgba(208, 253, 255, 0.05), rgba(255, 238, 213, 0.05));
-    margin: 30px 50px;
+    margin: 2rem 3rem;
     border-bottom: 1px solid rgb(160, 242, 230);
     border-right: 1px solid rgb(160, 242, 230);
     border-top: 1px solid white;
@@ -186,7 +186,7 @@ nav a:hover {
 }
 
 .introduction h1{
-    font-size: clamp(1.2rem, 1.5rem, 2rem);
+    font-size: clamp(1.2rem, 2vw, 2rem);
     margin-block-start: 0px;
     margin-block-end: 0.2em;
 }
@@ -240,7 +240,7 @@ nav a:hover {
 }
 
 .changeText {
-    font-size: clamp(1rem, 2vw, 2rem);
+    font-size: clamp(0.9rem, 2vw, 1.4rem);
     font-weight: 600;
     display: flex;
     flex-wrap: wrap;
@@ -806,7 +806,6 @@ nav a:hover {
     max-height: 280px;
     position: relative;
     overflow: hidden;
-    display: flex;
     background: #88fff97e;
     grid-template-rows: 1fr auto;
     align-items: center;
@@ -890,31 +889,31 @@ nav a:hover {
 
 .port-content {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    width: auto;
-    object-fit: cover;
-    height: 100%;
-    opacity: 0;
-    background: linear-gradient(rgb(0, 0, 0, 0.2),var(--background-color));
+    inset: 0;
+
     display: flex;
-    align-items: center;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     text-align: center;
+
+    opacity: 0;
+    background: linear-gradient(rgb(0, 0, 0, 0.2),var(--background-color));
+    flex-direction: column;
     transition: 0.5s;
-    padding: 0 2rem;
+    padding: 0 clamp(1rem, 2vw, 2rem);
 }
 
 .port-content h3 {
-    font-size: 1.5rem;
+    margin: clamp(0em, 1vw, 1em);
+    font-size: clamp(1rem, 1.2rem, 1.5rem);
     font-weight: 600;
     color: white;
 }
 
 .port-content p {
-    font-size: 1rem;
-    margin: 5px 0 15px;
+    margin: clamp(0em, 2vw, 1em);
+    font-size: clamp(0.8rem, 2vw, 1rem);
 }
 
 .port-box:hover .port-image img {
@@ -925,6 +924,16 @@ nav a:hover {
     opacity: 1;
 }
 
+@media (hover:hover) {
+    .port-content{
+        opacity:0;
+    }
+
+    .port-box:hover .port-content{
+        opacity:1;
+    }
+}
+
 @media (max-width: 768px) {
     .contactForm {
         margin: 30px 15px;