* Global Styles */ html { font-size: 17px; /* Base font size for scaling */ scroll-behavior: smooth; } body { display: flex; flex-direction: column; align-items: center; font-family: 'Calibri', sans-serif; font-size: 1rem; /* Default font size based on 16px */ line-height: 1.5; margin: 0; padding: 0; background-color: #bdd4da; /* Sky Bloom */ } body h1 { text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ } /* |--↓-↓-↓ Start Header ↓-↓-↓--| */ header { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px; background-color: #bdd4da; /* Light teal */ border-bottom: 3px solid #96baa0; /* Pale green for contrast */ } header .logo { position: absolute; left: 3vw; top: 20px; width: auto; /* Maintains aspect ratio */ height: auto; /* Constrains the height to 80px */ max-width: 20vw; } header .logo img { display: block; width: 180px; height: auto; max-width: 100%; filter: drop-shadow(0 0 2px #f0c06d) drop-shadow(0 0 0px #014038); /* Yellow outline effect */ } header h1 { font-family: 'Georgia', serif; font-size: 2.8rem; color: #014038; /* Dark green for the title */ margin: 10px 0; text-align: center; } header p.tagline { font-family: 'Arial', sans-serif; font-size: 1.4rem; color: #96baa0; /* Pale green for the tagline */ margin: 0; text-align: center; } nav { margin-top: 20px; background-color: #f7f7f7; /* White for navigation background */ padding: 10px 20px; border-radius: 5px; width: 100%; /* Ensures the nav spans the width of the header */ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } button#shopping-cart{ position: absolute; top: 100px; right: 100px; padding: 20px; border-radius: 10px; background-color: #f7f7f7; color: #014038; cursor: pointer; z-index: 5; transition: background-color 0.3s ease, color 0.3s ease; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } button#shopping-cart:hover { background-color: #014038; color: #96baa0; border: solid #f7f7f7; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } nav ul { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; } nav ul li { margin: 0 20px; border-radius: 5px; } .current-page { font-size: 1.4em; font-weight: bold; color: #014038; background-color: #96baa0; border: none; text-decoration: underline; white-space: wrap; text-align: center; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } nav ul li a { font-family: 'Arial', sans-serif; font-size: 1rem; font-weight: bold; border: solid #f7f7f7; color: #014038; text-decoration: underline; padding: 8px 15px; border-radius: 10px; transition: background-color 0.3s ease, color 0.3s ease; } nav ul li a:hover { background-color: #f7f7f7; color: #014038; border: solid #014038; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } /* Title Large (Arial Bold 30px) */ h1 { font-family: 'Arial', sans-serif; font-weight: bold; font-size: 1.875rem; /* 30px for title */ } /* Title (Arial Bold 25px) */ h2 { font-family: 'Arial', sans-serif; font-weight: bold; font-size: 1.5625rem; } /* Subtitle (Comfortaa Normal 15px) */ h3 { font-family: 'Comfortaa', sans-serif; font-size: .9375rem ; /* 15px for subtitle */ } /* Body Large (Calibri Normal 20px) */ p.body-large { font-family: 'Calibri', sans-serif; font-size: 1.25rem; /* 20px for body large */ } /* Body Strong (Calibri Bold 16px) */ strong { font-family: 'Calibri', sans-serif; font-weight: bold; font-size: 1rem; /* 16px for body strong */ } /* Body (Calibri Normal 16px) */ p.body { font-family: 'Calibri', sans-serif; font-size: 1rem; /* 16px for regular body text */ } /* Captions (Arial Bold 11px) */ figcaption { font-family: 'Arial', sans-serif; font-weight: bold; font-size: .6875rem; /* 11px for captions */ } @media (max-width: 780px) { html{ font-size: 14px; } } main { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 20px; } #left-aside, #right-aside { flex: 1; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #featured-container { flex: 2; } #left-aside { display: flex; flex-direction: column; background-color: #f0c06d; border: solid #f7f7f7; padding: 5px 10px; margin-top: 10px; border-radius: 10px; } #left-aside h2 { border: solid #014038; background-color: #bdd4da; border-radius: 10px; } #perks-feature-container { background-color: #96baa0; color: #014038; border: solid #014038; border-radius: 10px; padding: 5px 10px; margin-top: 5px; text-align: center; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } .perk-item { background-color: #f7f7f7; color: #014038; border: solid #014038; border-radius: 10px; padding: 5px 10px; white-space: wrap; max-height: 250px; min-height: 250px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); text-align: } #perks-heading { font-family: 'Arial', sans-serif; font-weight: bold; font-size: 1.875rem; /* 30px for title */ box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #featured-container { display: flex; flex-direction: column; text-align: center; margin-right: 40px; margin-top: 10px; } #featured-container h2 { font-size: 1.875rem; text-align: center; text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ -0.5px -0.5px 1px #014038, /* Top-left base shadow */ -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ 0.5px -0.5px 1px #014038, /* Top-right base shadow */ 0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */ -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */ -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */ 0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */ 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ color: #f7f7f7; background-color: #96baa0; border: solid #f7f7f7; border-radius: 10px; padding-left: 20px; transform: translateX(30px); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #featured-container ul { list-style-type: none; display: flex; flex-direction: column; } #featured-image ul li { align-content: space-between; } #featured-images ul li a { color: #014038; background-color: #f7f7f7; border-radius: 10px; padding: 5px 10px; } #featured-images a { display: block; text-align: center; font-size: 1.4rem; color:#014038; } #featured-images img { display: block; margin: 0 auto; margin-bottom: 10px; margin-right: 45px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #testimonials-feature{ background-color: #96baa0; color: #014038; border: solid #014038; border-radius: 10px; padding: 5px 10px; margin-top: 10px; white-space: wrap; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #testimonials-feature h2 { font-size: 1.675rem; text-align: center; } .testimonial { background-color: #f7f7f7; color: #014038; border: solid #014038; border-radius: 5px; padding: 5px 10px; white-space: wrap; min-height: 250px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); text-align: center; } #right-aside { display: flex; flex-direction: column; align-items: center; background-color: #f0c06d; width: 100%; height: auto; padding: 5px 10px; margin-left: 40px; margin-top: 10px; border: solid #f7f7f7; border-radius: 10px; } #category-nav-container { background-color: #f7f7f7; color: #014038; border: solid #014038; border-radius: 10px; padding: 5px 10px; margin-top: 5px; text-align: center; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #right-aside h2 { font-size: 1.675rem; background-color: #bdd4da; color: #014038; border: solid #014038; border-radius: 10px; padding: 0 5px; white-space: nowrap; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } .categories ul { display: flex; flex-direction: column; align-items: center; list-style-type: none; } .categories ul li { border: solid #014038; border-radius: 10px; background-color: #96baa0; margin-top: 20px; margin-right: 35px; min-width: 100%; transition: background-color 0.3s ease, color 0.3s ease; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } .categories a { color: #014038; font-size: 1.3rem; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } .categories ul li:hover { background-color: #f7f7f7; color: #014038; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #footer { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #newsletter-container { display: inline-block; margin-bottom: 10px; text-align: center; } #email-input { display: inline-block; width: 55%; padding: 5px 10px; text-align: center; border-radius: 10px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } button#submit-btn { display: inline-block; padding: 5px 10px; border-radius: 10px; cursor: pointer; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); z-index: 5; } footer div label { font-size: 1.2rem; font-weight: bold; color: #014038 } #newsletter-form { display: inline-block; background-color: #f0c06d; border: solid #f7f7f7; border-radius: 10px; width: 60%; padding: 5px; text-align: center; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #footer-nav ul { position: relative; list-style-type: none; display: inline-block; flex-direction: row; margin-top: 20px; background-color: #f7f7f7; /* White for navigation background */ padding: 5px 20px; border-radius: 5px; width: 100%; /* Ensures the nav spans the width of the header */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds subtle shadow for depth */ } #footer-nav ul li { display: inline-block; align-items: center; padding: 5px 10px; margin: 0 20px; } #footer-nav ul li .current-page { font-size: 1.2em; font-weight: bold; color: #014038; background-color: #96baa0; text-decoration: underline; } #footer-nav ul li a { font-family: 'Arial', sans-serif; font-size: 1rem; font-weight: bold; color: #014038; /* Dark green for the links */ text-decoration: none; padding: 8px 15px; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; } #footer-nav ul li a:hover { background-color: #f7f7f7; color: #014038; border: solid #014038; border-radius: 10px; } #social-media { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; } #social-media p { text-align: center; } #social-media ul { position: relative; display: inline-block; list-style-type: none; text-align: center; } #social-media ul li { display: inline-block; margin: 0 10px; padding: 0 10px; color: #014038; } #social-media ul li a { font-family: 'Arial', sans-serif; font-size: 1rem; color: #014038; /* Dark green for the links */ text-decoration: none; padding: 8px 15px; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; } #social-media ul li a:hover { background-color: #f0c06d; color: #f7f7f7; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #copyright { text-align: center; margin-bottom: 20px; } /* Styles for the modal */ .modal { display: none; /* Initially hidden */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: #fff; padding: 20px; border-radius: 10px; width: 80%; max-width: 600px; text-align: center; } .modal-buttons button { margin: 10px; } .close-modal { position: absolute; top: 10px; right: 20px; font-size: 1.5rem; cursor: pointer; } .perk-item, .testimonial, .featured-item { display: none; /* Hide all by default */ } .perk-item.visible, .testimonial.visible, .featured-item.active { display: block; /* Show visible or active items */ } #featured-images { overflow: hidden; /* Hide anything outside the container */ text-align: center; /* Center align content if necessary */ width: 100%; /* Match the width of the container */ height: auto; /* Let the height adapt to content */ } #featured-images img { display: none; /* Hide all items initially */ max-width: 100%; /* Ensure images are responsive */ height: auto; /* Maintain aspect ratio */ background-color: #96baa0; border: solid #014038; border-radius: 5px; padding: 5px; } .visible { display: block; } /* |--↓-↓-↓ Start gallery.html ↓-↓-↓--| */ #main-gallery { display: flex; flex-direction: column; align-items: center; } #gallery-top { display: flex; flex-direction: row; align-items: center; width: 95vw; gap: 20px } #product-carousel-feature h2 { font-size: 1.875rem; text-align: center; text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ -0.5px -0.5px 1px #014038, /* Top-left base shadow */ -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ 0.5px -0.5px 1px #014038, /* Top-right base shadow */ 0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */ -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */ -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */ 0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */ 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ color: #f7f7f7; background-color: #96baa0; border: solid #f7f7f7; border-radius: 10px; padding-left: 20px; transform: translateX(30px); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #product-category-card { display: flex; flex-direction: row; align-items: center; text-align: center; width: 65vw; } #product-carousel { display: flex; /* Flexbox layout for horizontal row */ gap: 20px; /* Space between product cards */ overflow-x: auto; /* Enable horizontal scrolling */ scroll-behavior: smooth; /* Smooth scrolling for buttons */ padding: 10px; /* Optional padding inside the carousel */ white-space: nowrap; /* Prevent wrapping to a new row */ transform: translateX(4vw); } .product-card { display: inline-block; /* Ensure cards stay in a row */ min-width: 150px; /* Set the card size */ max-width: 200px; max-height: auto; flex: 0 0 auto; /* Prevent resizing of cards */ border: 1px solid #ddd; /* Optional border */ border-radius: 8px; padding: 10px; margin-left: 20px; align-items: center; text-align: center; white-space: wrap; background-color: #f7f7f7; /* Optional background */ } .product-card img { max-width: 100%; height: auto; display: block; border-radius: 8px; align-items: center; } #scroll-left, #scroll-right { cursor: pointer; /* Show pointer to indicate clickable buttons */ background-color: #014038; /* Dark green background */ color: white; border: none; padding: 10px; border-radius: 50%; font-size: 1.5rem; transform: translateX(4.5vw); } @media (max-width: 768px) { .product-card { min-width: 150px; max-width: 200px; } #product-carousel { gap: 5px; } } #main-gallery #right-aside { width: 25vw; } #main-gallery #right-aside h2 { font-size: 1.675rem; background-color: #bdd4da; color: #014038; border: solid #014038; border-radius: 5px; padding: 0 5px; white-space: nowrap; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #main-gallery .categories ul { display: flex; flex-direction: column; align-items: center; justify-content: space-between; list-style-type: none; } #main-gallery .categories ul li { border: solid #014038; border-radius: 5px; background-color: #96baa0; margin-top: 20px; margin-right: 35px; min-width: 100%; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #main-gallery .categories a { color: #014038; font-size: 1.3rem; } button#cart-details { background-color: #f7f7f7; border: solid #014038; border-radius: 15px; color: #014038; font-weight: bold; font-size: 1.4em; text-align: center; /* Align text horizontally */ height: 30px; /* Adjust height to fit text comfortably */ padding: 0 15px; /* Horizontal padding for spacing */ margin-top: 10px; margin-bottom: 10px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3); transform: translateX(-15vw) translateY(-5vh); transition: background-color 0.3s ease, color 0.3s ease; display: flex; /* Flexbox ensures content alignment */ align-items: center; /* Center text vertically */ justify-content: center; /* Center text horizontally */ } button#cart-details:hover { background-color: #014033; color: #f7f7f7; border: solid #f7f7f7; border-radius: 15px; } .product-card { box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.3); transition: background-color 0.3s ease, color 0.3s ease; } .add-to-cart-btn { cursor: pointer; background-color: #f7f7f7; border: solid #014038; color: #014038; font-weight: bold; border-radius: 5px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease, color 0.3s ease; } .add-to-cart-btn:hover { background-color: #014038; border: solid #f7f7f7; color: #f7f7f7; border-radius: 5px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } /* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */ /* |--↓-↓-↓ Start about.html ↓-↓-↓--| */ #about-page main { display: flex; flex-direction: column; align-items: center; } #main-top { display: flex; flex-direction: row; justify-content: space-between; width: 95vw; position: center; } #business-info { display: block; align-items: center; width: 25vw; background-color:#f0c06d; border: solid #f7f7f7; border-radius: 10px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #phone, #hours { background-color: #f7f7f7; border: solid #bdd4da; border-radius: 10px; margin: 5px 10px; } #business-info h3, #feedback-intro h1 { font-size: 1.875rem; text-align: center; text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ -0.5px -0.5px 2px #014038, /* Top-left base shadow */ -0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ 0.5px -0.5px 2px #014038; /* Top-right base shadow */ color: #f7f7f7; background-color: #96baa0; border: solid #f7f7f7; max-width: 75vw; border-radius: 10px; padding-left: 10px; transform: translateX(0px); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #business-info p { text-align: center; font-size: 14pt; } #business-info h4 { text-align: center; background-color: #bdd4da; border: solid #f7f7f7; border-radius: 15px; padding: 0 10px; width: 50%; margin-left: 22.5%; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } #story { display: flex; flex-direction: column; align-items: center; justify-content: left; width: 70vw; margin-left: 30px; } #story h1 { background-color: #96baa0; color: #f7f7f7; border: solid #f7f7f7; border-radius: 15px; text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ -0.5px -0.5px 2px #014038, /* Top-left base shadow */ -0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ 0.5px -0.5px 2px #014038; /* Top-right base shadow */ width: 50%; padding: 5px 10px; text-align: center; margin-right: 12.5%; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #story p { color: #014038; font-size: 1.25rem; font-weight: bold; } #feedback { display: flex; flex-direction: column; align-items: center; justify-content: space-between; background-color: #96baa0; border: solid #f7f7f7; border-radius: 15px; width: 90vw; margin-top: 30px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #feedback h1 { background-color: #a4ccd6; border: solid #f7f7f7; border-radius: 10px; width: 50vw; padding: 5px 10px; text-align: center; margin-left: 25vw; margin-right: 25vw; text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */ -0.5px -0.5px 2px #014038, /* Top-left base shadow */ -0.5px 0.5px 2px #014038, /* Bottom-left base shadow */ 0.5px -0.5px 2px #014038; /* Top-right base shadow */ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } #feedback h3 { color: #00231c; font-weight: bold; width: 85vw; text-align: center; margin-left: 7.5vw; margin-right: 7.5vw; } #feedback p { color: #00231c; width: 85vw; text-align: center; margin-left: 7.5vw; margin-right: 7.5vw; font-weight: bold; } #feedback-form form{ display: flex; flex-direction: row; gap: 20px; align-items: baseline; width: 95%; margin-top: 20px; /* Adds some spacing above the form */ } #customer-info { display: flex; flex-direction: column; align-content: center; width: 95%; /* Adjusted width */ gap: 25px; /* Adds spacing between input fields */ text-align: center; } #customer-info input { background-color: #f7f7f7; border: solid #014038; border-radius: 15px; width: 90%; /* Ensures the input fields fill the section width */ height: 30px; /* Adjusts height to match the textarea */ text-align: center; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); } #customer-message { display: flex; flex-direction: column; align-items: center; width: 90%; /* Adjusted width */ } #customer-message #message-field textarea { width: 50vw; /* Takes full width of the section */ height: 30vh; /* Adjust height as needed */ background-color: #f7f7f7; border: solid #014038; border-radius: 15px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); } #form-submit-btn { display: flex; justify-content: center; margin-top: 10px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); } #form-submit { padding: 10px 20px; background-color: #bdd4da; border: solid #f7f7f7; border-radius: 10px; color: #014038; font-size: 1rem; cursor: pointer; margin-bottom: 10px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); } #form-submit:hover { background-color: #f7f7f7; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); } /* | ↑-↑-↑ End About.html ↑-↑-↑--| */ /* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */ #community-page { display: flex; flex-direction: column; text-align: center; align-items: center; gap: 20px; width: 95vh; height: auto; } #community-page h1 { font-size: 1.6rem; background-color: #96baa0; border: solid #f7f7f7; border-radius: 15px; width: 50vw; color: #f7f7f7; text-decoration: underline; text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ -0.5px -0.5px 1px #014038, /* Top-left base shadow */ -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ 0.5px -0.5px 1px #014038; /* Top-right base shadow */ padding: 5px 10px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } #calendar-events-container { display: flex; flex-direction: column; align-items: center; gap: 20px; border: none; } .calendar iframe{ width: 80vw; height: auto; margin-bottom: 20px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } .events { background-color: #f0c06d; border: solid #014038; border-radius: 15px; padding: 10px; width: 95vw; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } .events h2 { background-color: #96baa0; border: solid #f7f7f7; border-radius: 15px; padding: 10px 15px; width: 50vw; text-decoration: underline; font-weight: bold; font-size: 1.4rem; text-align: center; margin-left: 20vw; transform: translateY(-6vh); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } .events h3 { background-color: #96baa080; border: solid #bdd4da; border-radius: 15px; padding: 5px 10px; width: 50vw; text-decoration: underline; font-weight: bold; font-size: 1.2rem; text-align: center; margin-left: 20vw; transform: translateY(-5vh); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } .events p { transform: translateY(-5vh); } .event-list ul { list-style-type: none; transform: translateY(-5vh); } .event-list li { background-color: #f7f7f7; border: solid #bdd4da; border-radius: 15px; text-align: center; padding: 5px 10px; margin-bottom: 10px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); } .events strong { color:#014038; font-size: 1.1rem; } /* | ↑-↑-↑ End Community.html ↑-↑-↑--| */