/**** WEBSITE STYLING USING CSS ****/ /* Formatting the button */ .button { border: none; border-radius: 5px; /* Rounded corner feature (border-radius) shown on W3Schools */ color: white; background-color: #FF4655; text-align: center; cursor: pointer; padding: 15px 50px; white-space: nowrap; /* Prevents the text on the button from going across 2 or more lines */ font-family: din-next; font-size: 18px; font-weight: bold; } /* Changes the text colour when hovered over with the cursor, code adapted from W3Schools */ .button:hover,.small-interactive-button:hover { color: #111111; transition: 0.3s; } /* Formatting a small button */ .small-button { border: none; border-radius: 5px; color: white; background-color: #FF4655; text-align: center; padding: 5px; margin-left: 12px; margin-bottom: 12px; width: 40%; white-space: nowrap; font-family: din-next; font-size: 16px; } /* Formatting a small interactive button */ .small-interactive-button { border: none; border-radius: 5px; color: white; background-color: #FF4655; text-align: center; cursor: pointer; white-space: nowrap; padding: 5px 15px; margin-left: 60px; margin-top: 20px; font-family: din-next; font-size: 16px; font-weight: bold; } /* Formatting for the back to top of page button */ .to-top-button { display: none; position: fixed; right: 0; bottom: 80px; color: white; background-color: #606060; border: none; text-align: center; cursor: pointer; border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding: 0 10px; margin: 0; margin-top: 20px; font-size: 30px; font-weight: bold; font-family: din-next; } .to-top-button:hover { background-color: #FF4655; transition: 0.3s; } /* Formatting for the line across the page for content separation */ .page-line-with-spacing { align-content: center; width: 80%; margin: 40px auto; } /* Implementing custom fonts as shown on W3Schools */ /* Tungsten Bold font aquired from FontsFree.net */ @font-face { font-family: tungsten-bold; src: url(fonts/tungsten-bold.ttf); } /* Typo Grotesk font aquired from DaFont.com */ @font-face { font-family: typo-grotesk; src: url(fonts/typo-grotesk-demo.otf); } /* Din Next LT Pro Regular Font aquired from 8Font.com */ @font-face { font-family: din-next; src: url(fonts/din-next-lt-pro-regular.ttf); } /* Formatting all visible content using the tag */ body { overflow-x: hidden; /* To get rid of the horizontal scroll bar as it's unnecessary. Showcased on W3Schools*/ background-color: #EAEAEA; margin: 0; /* Gets rid of white lines along the edges of the page */ width: 100%; min-height: 100vh; /* Sets the height just high enough where a scrollbar is required */ } /*

tag text formatting */ p { font-family: din-next, sans-serif; } /* Heading formatting */ h1 { font-family: tungsten-bold, monospace, sans-serif; font-size: 150px; color: white; text-align: center; margin: 0; } h2 { font-family: tungsten-bold, monospace, sans-serif; font-size: 130px; color: #202124; margin-left: 120px; margin-right: 120px; margin-top: 120px; margin-bottom: 60px; } h3 { font-family: typo-grotesk, monospace, sans-serif; color: #202124; font-size: 24px; margin-left: 60px; white-space: nowrap; } h4 { font-family: typo-grotesk, monospace, sans-serif; color: #202124; font-size: 22px; white-space: nowrap; text-align: left; margin: 0; margin-left: 12px; margin-top: 12px; } /* Formatting for the contact form */ form { padding: 30px; border: 1px solid #CCCCCC; background-color: #606060; border-radius: 10px; } /* Formatting for form labels */ label { font-family: din-next, sans-serif; font-size: 18px; color: white; } /* Formatting for the drop-down menu items, under