Continue Lining Up Columns

style.css

@@ -41,10 +41,12 @@ input:disabled {
   color: var(--grey);
   background: transparent;
   border: 0;
+  padding: 8px 0;
 }
 
 ::placeholder {
   color: var(--grey);
+  opacity: 0.6;
 }
 
 button {
@@ -55,7 +57,6 @@ button {
   box-sizing: border-box;
   border-radius: 900px;
   text-align: left;
-  margin: auto;
   cursor: pointer;
 }
 
@@ -65,8 +66,11 @@ button:disabled {
 }
 
 a {
-  cursor: pointer;
+  color: var(--grey);
+  font-size: 85%;
   text-decoration: underline;
+  text-transform: uppercase;
+  cursor: pointer;
 }
 
 header {
@@ -129,6 +133,10 @@ label[for="torrent"] {
 }
 
 #reset {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  text-align: center;
   position: absolute;
   top: -12px;
   right: -12px;
@@ -143,19 +151,34 @@ label[for="torrent"] {
 }
 
 #download > * {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  text-align: center;
   margin: 4px 0;
 }
 
 .property {
-  width: 100%;
-  margin: 20px 0px;
+  margin: 24px 0;
   display: flex;
-  justify-content: space-around;
-  align-items: center;
+  align-content: flex-start;
+  justify-content: space-between;
 }
 
 .property:first-child {
-  width: 160px;
+  width: 240px;
+}
+
+.labels {
+  width: 280px;
+  text-align: right;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.content, #files {
+  width: 460px;
 }
 
 label {
@@ -168,30 +191,33 @@ input {
 
 #addTracker, #addWebseed {
   width: 440px;
+  margin: 0 0 16px 0;
   color: var(--light-blue);
   background: var(--dark-blue);
   border: 1px solid var(--light-blue);
-  padding: 8px;
   box-sizing: border-box;
   border-radius: 900px;
   cursor: pointer;
 }
 
 #announce > *, #urlList > * {
-  margin: 4px 0;
+  margin: 0 0 16px 0;
+}
+
+.remove {
+  /* position: absolute; */
 }
 
 @media (max-width: 1080px) {
 
   #reset {
-    width: auto;
     top: 0px;
     right: 8px;
   }
 
   #download {
     justify-content: center;
-    width: 96%;
+    width: 95%;
     top: auto;
     bottom: 16px;
     left: auto;
@@ -200,7 +226,6 @@ input {
   }
 
   #download > * {
-    width: auto;
     margin: 0 4px;
   }
 
@@ -218,24 +243,35 @@ input {
   }
 
   #properties {
-    margin: 0;
-    padding: 0 2vw;
+    margin: 0 1.5vw;
+    padding: 0 1.5vw;
     width: 95vw;
   }
 
   .property {
-    margin: 8px 0;
+    margin: 12px 0;
     flex-direction: column;
-    align-items: center;
   }
 
   .property > label {
-    width: fit-content;
-    margin: 8px 0;
+    margin: 12px 0;
   }
 
   input, button, #addTracker, #addWebseed {
-    width: 95vw;
+    width: 94vw;
+    text-align: center;
+  }
+
+  .labels {
+    margin-bottom: 16px;
+    align-items: center;
+  }
+
+  .labels, .content, #files {
+    width: auto;
+  }
+
+  #announce, #urlList {
     text-align: center;
   }