css: %%

css/feminitives.css

@@ -4,11 +4,11 @@ a {
 
 input {
 	width: 70%;
-	font-size:16px;
+	font-size:100%;
 	border-color:#cccccc;
 	border-style:solid;
-	padding:3px;
+	padding:0.5%;
-	margin:3px;
+	margin:0.5%;
 	border-width:1px;
 	border-radius:7px;
 } 
@@ -23,8 +23,8 @@ button {
 	width: 20%;
 	font-family: helvetica;
 	color: #14396A !important;
-	font-size: 16px;
+	font-size: 100%;
-	padding: 4px;
+	padding: 0.7%;
 	border: 0px;
 	-border-radius: 7px;
 	-webkit-border-radius: 7px;
@@ -47,39 +47,38 @@ button:hover {
 }
 
 #definition {
-	/* border: solid 1px; */
+	padding: 1%;
-	padding: 30px;
+	width: 50%;
-	width: 600px;
 	margin: 0 auto;
 }
 
 #definition h1 {
 	color: #7c795d;
 	font-family: 'Trocchi', serif;
-	font-size: 35px;
+	font-size: 250%;
 	font-weight: normal;
-	line-height: 70px;
+	line-height: 200%;
 	margin: 0;
 }
 
 #definition-help {
 	text-align: justify;
-	font-size: 16px;
+	font-size: 40%;
-	margin-top: -230px !important;
+	margin-top: -58% !important;
 }
 
 #definition-dict {
 	text-align: center;
 	height: 20px;
-	font-size: 18px;
+	font-size: 110%;
-	margin-top: 25px;
+	margin-top: 3%;
-	margin-bottom: 25px;
+	margin-bottom: 3%;
 }
 
 #definition-image {
 	width: 50%;
 	margin: 0 auto;
-	padding: 10px;
+	padding: 0.5%;
 	width: 400px;
 	background-color: white;
 }
@@ -92,14 +91,21 @@ button:hover {
 	width: 400px;
 }
 
+@media screen and (max-device-width: 800px) {
+	#definition-card {
+		height: 220px;
+		width: 300px;
+	}
+}
+
 #definition-card h1 {
 	position: relative;
 	text-align: right;
-	margin-top: 210px;
+	margin-top: 52.5%;
-	margin-right: 15px;
+	margin-right: 5%;
-	height: 20px;
+	height: 10%;
-	line-height: 20px;
+	line-height: 120%;
-	font-size: 17px;
+	font-size: 103%;
 	color: MediumOrchid;
 	font-weight: bold;
 	font-style: italic;
@@ -107,32 +113,32 @@ button:hover {
 
 #definition-card h1 span{
 	background-color: white;
-	padding-left:  5px;
+	padding-left:  2%;
-	padding-right: 5px;
+	padding-right: 2%;
 }
 
 #definition-content {
 	color: black;
 	position: relative;
-	margin-top: -150px;
+	margin-top: -38%;
 	font-family: sans-serif;
-	font-size: 40px;
+	font-size: 250%;
 	font-weight: regular;
 	text-align: center;
 }
 
 #definition-full {
-	font-size: 16px;
+	font-size: 100%;
 	height: 40px;
-	margin-top: 10px;
+	margin-top: 1%;
 }
 
 .toolbar, .toolbar:visited {
-	font-size: 30px;
+	font-size: 180%;
 	opacity: 0.3;
 	color: MediumOrchid;
 	text-decoration: none;
-	margin: 0 10px 0 0;
+	margin: 0 1px 0 0;
 }
 
 .toolbar:hover {