finished cookie popup design

index.html

@@ -8,8 +8,8 @@
 		<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
 
 		<!-- Scripts Begin -->
-		<!-- jQuery -->
+			<!-- jQuery -->
-		<script src="https://code.jquery.com/jquery-3.5.1.js"
+			<script src="https://code.jquery.com/jquery-3.5.1.js"
 				integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
 				crossorigin="anonymous"></script>
 			<title>Mind Overflow : Home</title>
@@ -39,7 +39,7 @@
 		<h4>This website uses cookies.</h4>
 		<p>We use cookies to ensure you the best experience.
 		<br>
-		By using our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>.
+		By visiting our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>.
 		</p>
 			<button onclick="agreePolicyPopup()">Ok, understood</button>
 	</div>

styles/common-style.css

@@ -66,22 +66,24 @@ a {
     padding: 10px;
     font-size: 25px;
     box-sizing: border-box;
+	box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
 
     /* Size */
     width: 600px;
+	overflow: hidden;
 
     /* Positioning */
     position: absolute;
     left: 50px;
-    bottom: 50px;
+    bottom: 75px;
-    z-index: 1;
+    z-index: 2;
 }
 
 .policy-popup p {
     font-family: 'Montserrat', sans-serif;
     font-weight: 200;
     color: white;
-    font-size: 15px;
+    font-size: 13px;
     padding: 0 20px;
 }
 
@@ -89,7 +91,7 @@ a {
 .policy-popup button {
     font-family: 'Montserrat', sans-serif;
     font-weight: 800;
-    font-size: 15px;
+    font-size: 13px;
 
     transition-duration: 0.4s;
     border-radius: 3px;
@@ -109,6 +111,208 @@ a {
 
 /* End policy popup */
 
+/* Begin media queries for elements size */
+@media (min-width: 0px) and (max-width:200px) {
+	
+	h4 {
+		font-size: 8px;
+	}
+	
+	.policy-popup {
+		/* centered */
+		left: 5px;
+		width: 100px;
+    	bottom: 50px;
+	}
+	
+	.policy-popup h4 {
+		padding: 15px 15px;
+	}
+	
+	.policy-popup p {
+		font-size: 7px;
+		padding: 0 15px;
+		margin: 0;
+	}
+	
+	.policy-popup button {
+		font-size:7px;
+		margin: 10px;
+    	padding: 5px 8px;
+	}
+}
+
+@media (min-width: 200px) and (max-width: 300px) {
+	
+	h4 {
+		font-size: 10px;
+	}
+	
+	.policy-popup {
+		/* centered */
+		left: 50%;
+		margin-left: -100px; /* this has to be half the width */
+		width: 200px;
+    	bottom: 50px;
+	}
+	
+	.policy-popup h4 {
+		padding: 15px 15px;
+	}
+	
+	.policy-popup p {
+		font-size: 8px;
+		padding: 0 15px;
+		margin: 0;
+	}
+	
+	.policy-popup button {
+		font-size: 8px;
+		margin: 10px;
+    	padding: 10px 15px;
+	}
+}
+
+@media (min-width: 300px) and (max-width: 400px) {
+	h4 {
+		font-size: 13px;
+	}
+	
+	.policy-popup {
+		/* centered */
+		left: 50%;
+		margin-left: -140px; /* this has to be half the width */
+		width: 280px;
+	}
+	
+	.policy-popup h4 {
+		padding: 15px 15px;
+	}
+	
+	.policy-popup p {
+		font-size: 8px;
+		padding: 0 15px;
+		margin: 0;
+	}
+	
+	.policy-popup button {
+		font-size: 8px;
+		margin: 10px;
+    	padding: 10px 15px;
+	}
+}
+
+@media (min-width: 400px) and (max-width: 500px) {
+	h4 {
+		font-size: 15px;
+	}
+	
+	.policy-popup {
+		/* centered */
+		left: 50%;
+		margin-left: -175px; /* this has to be half the width */
+		width: 350px;
+	}
+	
+	.policy-popup h4 {
+		padding: 15px 15px;
+	}
+	
+	.policy-popup p {
+		font-size:10px;
+		padding: 0 15px;
+		margin: 0;
+	}
+	
+	.policy-popup button {
+		font-size: 10px;
+		margin: 10px;
+    	padding: 10px 15px;
+	}
+}
+
+@media (min-width: 500px) and (max-width: 600px) {
+	h4 {
+		font-size: 18px;
+	}
+	
+	.policy-popup {
+		width: 400px;
+	}
+	
+	.policy-popup h4 {
+		padding: 15px 15px;
+	}
+	
+	.policy-popup p {
+		font-size: 11px;
+		padding: 0 15px;
+		margin: 0;
+	}
+	
+	.policy-popup button {
+		font-size: 11px;
+		margin: 10px;
+	}
+}
+
+@media (min-width: 600px) and (max-width: 700px) {
+	h4 {
+		font-size: 21px;
+	}
+	
+	.policy-popup {
+		width: 500px;
+	}
+	
+	.policy-popup h4 {
+		padding: 15px 15px;
+	}
+	
+	.policy-popup p {
+		font-size: 11px;
+		padding: 0 15px;
+		margin: 0;
+	}
+	
+	.policy-popup button {
+		font-size: 11px;
+		margin: 10px;
+	}
+}
+
+@media (min-width: 700px) and (max-width: 1000px) {
+	h4 {
+		font-size: 23px;
+	}
+	
+	.policy-popup h4 {
+		padding: 15px 15px;
+	}
+	
+	.policy-popup p {
+		font-size: 13px;
+		padding: 0 15px;
+		margin: 0;
+	}
+	
+	.policy-popup button {
+		margin: 10px;
+	}
+}
+
+/* 4K MONITORS */
+@media (min-width: 2100px) {
+	.policy-popup p {
+		font-size: 15px;
+	}
+	
+	.policy-popup button {
+		font-size: 15px;
+	}
+}
+/* End media queries */
+
 /* Begin fonts */
 @font-face {
     font-family: 'Oswald';

styles/home-style.css

@@ -35,6 +35,7 @@ h1 {
 	margin-top: auto;
 	padding-bottom: 20px;
 	text-transform: uppercase;
+	overflow: hidden;
 }
 
 .bottomnav a {

styles/pages-style.css

@@ -139,10 +139,6 @@ li {
 		font-size: 15px;
 		padding-top: 20px;
 	}
-	h4
-	{
-		font-size: 8px;
-	}
 	.content {
 		font-size: 10px;
 	}
@@ -168,10 +164,6 @@ li {
 		font-size: 16px;
 		padding-top: 25px;
 	}
-	h4
-	{
-		font-size: 10px;
-	}
 	.content {
 		font-size: 13px;
 	}
@@ -197,10 +189,6 @@ li {
 		font-size: 19px;
 		padding-top: 28px;
 	}
-	h4
-	{
-		font-size: 13px;
-	}
 	.content {
 		font-size: 16px;
 	}
@@ -226,10 +214,6 @@ li {
 		font-size: 22px;
 		padding-top: 31px;
 	}
-	h4
-	{
-		font-size: 15px;
-	}
 	.content {
 		font-size: 18px;
 	}
@@ -252,10 +236,6 @@ li {
 	h3 {
 		font-size: 25px;
 	}
-	h4
-	{
-		font-size: 18px;
-	}
 	.content {
 		font-size: 20px;
 	}
@@ -278,10 +258,6 @@ li {
 	h3 {
 		font-size: 30px;
 	}
-	h4
-	{
-		font-size: 20px;
-	}
 	.content {
 		font-size: 23px;
 	}