diff --git a/assets/css/style.css b/assets/css/style.css
index 2527600..59a051f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -6,12 +6,12 @@
--container: 1120px;
/* Typography system */
- --font-base: 16px;
- --font-small: 14px;
- --font-medium: 20px;
- --font-large: 28px;
+ --font-base: 20px;
+ --font-small: 15px;
+ --font-medium: 25px;
+ --font-large: 35px;
--font-xlarge: 40px;
- --line-height-base: 24px;
+ --line-height-base: 50px;
}
* {
@@ -21,64 +21,78 @@
@font-face {
font-family: "Montserrat";
src: url("Montserrat-Regular.woff2") format("woff2"),
- url("Montserrat-Regular.woff") format("woff");
+ url("Montserrat-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
-html, body {
- margin: 0;
+html,
+body {
padding: 0;
+ align-items: flex;
scroll-behavior: smooth;
justify-content: center;
}
-body, .main-text {
- background-color: rgb(10, 10, 10);
+body,
+.main-text {
+ padding: 0;
+ margin: 0;
+ background-color: rgb(12, 12, 12);
font-family: "Montserrat", Arial, Helvetica, sans-serif;
font-size: var(--font-base);
line-height: var(--line-height-base);
color: white;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ scroll-behavior: smooth;
}
/* Typography hierarchy */
h1 {
font-family: Cambria, Cochin, serif;
font-size: var(--font-xlarge);
- line-height: 48px;
- margin: 0 0 16px;
- text-shadow: black 0 0 40px;
+ line-height: 50px;
+ text-shadow: black 0 0 20px;
text-align: center;
}
h2 {
font-family: Cambria, Cochin, serif;
font-size: var(--font-large);
- line-height: 36px;
- margin: 0 0 12px;
+ line-height: 40px;
text-align: center;
}
h3 {
font-family: Cambria, Cochin, serif;
font-size: var(--font-medium);
line-height: 28px;
- margin: 0 0 8px;
text-align: center;
}
p {
font-size: var(--font-base);
line-height: var(--line-height-base);
- margin-bottom: 16px;
}
/* Containers */
.container {
- max-width: var(--container);
- margin-bottom: 0 auto;
- position: relative;
- padding: 20px;
- justify-content: flex-start;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ display: center;
+ height: auto;
+ width: 100%;
+}
+.container__cards {
+ padding-bottom: 20px;
+}
+.container__CrowdPic {
+ display: flex;
+ height: auto;
+ width: 100%;
+ padding: 0%;
+ margin: 0%;
}
-
/* Header & Navigation */
.site-header {
display: flex;
@@ -88,6 +102,8 @@ p {
}
.site-nav {
+ font-size: 15px;
+ justify-content: space-between;
padding: 5px;
display: flex;
align-items: left;
@@ -103,7 +119,7 @@ p {
color: rgb(238, 109, 16);
border: 1px solid;
border-radius: 999px;
- box-shadow: 2px 2px 1px 0 rgb(238, 109, 16);
+ box-shadow: 4px 3px 1px 1px rgb(238, 109, 16);
padding: 8px;
}
@@ -122,7 +138,6 @@ p {
justify-content: center;
align-items: center;
text-align: center;
- min-height: 100vh;
overflow: hidden;
}
.hero__overlay {
@@ -143,36 +158,45 @@ p {
font-style: italic;
color: #7cf321;
text-shadow: -2px -2px 0 #304ed3b3;
- margin-bottom: 32px;
}
.hero h2 {
color: #211994e9;
- text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
- 0 0 20px #d4f321, 0 0 35px #d4f321,
- 0 0 40px #d4f321, 0 0 50px #d4f321,
- 0 0 75px #d4f321;
- margin-bottom: 32px;
+ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #d4f321,
+ 0 0 35px #d4f321, 0 0 40px #d4f321, 0 0 50px #d4f321, 0 0 75px #d4f321;
}
.hero p {
max-width: 680px;
- margin: 0 auto 16px;
}
/* Sections */
.section {
- padding: 0;
+ padding: 0%;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ flex-wrap: wrap;
+ height: auto;
+ width: 100%;
}
-.section__title {
- font-family: Cambria, Cochin, serif;
- font-size: var(--font-large);
- color: black;
+
+.section__cards {
+ height: auto;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ display: center;
+ color: #7cf321;
+ text-shadow: #7cf321 0 0 20px;
text-align: center;
- margin: 0;
+ flex-wrap: wrap;
}
.section__title p {
font-size: var(--font-small);
color: black;
text-align: center;
+ flex-wrap: wrap;
text-shadow: #7cf321 0 0 20px;
}
.section__title .p2 {
@@ -180,39 +204,49 @@ p {
color: var(--charcoal);
text-shadow: #7cf321 0 0 20px;
text-align: center;
+ display: center;
+ justify-content: center;
+ align-items: flex;
}
.section--alt {
- background: var(--charcoal);
- color: greenyellow;
- font-size: 40px;
+ padding-top: 10px;
+ padding-bottom: 30px;
+ justify-content: center;
+ align-items: center;
+ height: auto;
+ width: auto;
+ background: white;
+ color: rgb(10, 8, 58);
+ font-size: 35px;
+ display: flex;
text-align: center;
line-height: 40px;
- margin: 0;
- padding: 40px 0;
}
.section--alt p {
+ text-align: center;
font-family: Cambria, Cochin, serif;
- font-size: 18px;
+ font-size: 25px;
color: rgba(255, 115, 0, 0.949);
+ padding: 0%;
}
-.section--alt p2{
+.section--alt p2 {
font-family: Cambria, Cochin, serif;
color: rgb(247, 163, 5);
- font-size: 35px;
+ font-size: 20px;
text-align: center;
}
/* Cards */
.cards {
- display: flex;
flex-wrap: wrap;
+ display: flex;
gap: 10px;
}
.card {
background: black;
border: 1px solid #fff;
border-radius: 8px;
- padding: 5px;
+ padding: auto;
}
.card h3 {
color: #7cf321;
@@ -223,10 +257,7 @@ p {
/* Lists */
details.services__all {
- margin-top: 16px;
-}
-.list {
- margin: 8px 0 0 16px;
+ align-items: center;
}
/* Forms */
@@ -236,9 +267,9 @@ details.services__all {
.field {
display: flex;
flex-direction: column;
- margin-bottom: 16px;
}
-input, textarea {
+input,
+textarea {
padding: 12px;
border-radius: 8px;
border: 1px solid #ddd;
@@ -254,7 +285,7 @@ input, textarea {
padding: 20px 20px;
color: rgb(238, 109, 16);
border-radius: 999px;
- box-shadow: 2px 2px 1px 1px rgb(238, 109, 16);
+ box-shadow: 2px 2px 1px 1px rgb(238, 109, 16);
text-decoration: none;
text-shadow: 2px 2px #20202e;
cursor: pointer;
@@ -269,22 +300,19 @@ input, textarea {
/* Footer */
.site-footer {
- background: black;
+ background: rgba(32, 30, 30, 1);
text-align: center;
font-size: var(--font-small);
-}
-.site-footer .skip-link {
- background-color: black;
color: #7cf321;
text-align: center;
+
}
.footer__grid {
- display: grid;
+ display: center;
color: #7cf321;
}
.social a {
display: inline-block;
- margin-right: 16px;
}
/* Misc */
@@ -305,6 +333,12 @@ input, textarea {
display: flex;
}
.cards {
+ position: flex;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ overflow: hidden;
grid-template-columns: repeat(2, 1fr);
}
.footer__grid {
@@ -314,12 +348,17 @@ input, textarea {
@media (min-width: 1024px) {
.hero {
- min-height: 780px;
+ min-height: 500px;
}
.cards {
- grid-template-columns: repeat(2, 1fr);
+ height: auto;
+ width: auto;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 40px;
}
.section__title {
font-size: 32px;
+ align-items: center;
}
}
diff --git a/index.html b/index.html
index 89669f1..0af6d6a 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@ (216) 954-4104