#particles-js { position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; } body { line-height: 0.5; width: 100vw; height: 100vh; background-color: black; background-size: cover; text-align: center; color: white; } .container-fluid { background-size: cover; display: list-item; align-items: center; justify-content: center; height: 100vh; padding: 1vw; width: 100vw; position: fixed; } h1 { text-align: center; font-size: 8vw; margin: 0px; } h2 { text-align: center; font-size: 4vw; font-size-adjust: inherit; margin: 0px; } .row { height: auto; width: auto; } .outer-div { padding: 10px; display: table; max-width: 700px; align-self: center; max-height: 700px; position: relative; top: 1vw; left: 0; text-align: center; } .inner-div { -webkit-text-fill-color: white; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black; background-color: orange; opacity: 0.8; align-content: space-around; left: 40%; position: relative; border: 5vw; height: 15vh; font-size: 7vw; margin: 3vw; size: initial; text-align: center; max-width: 80%; letter-spacing: 3px; line-height: 1.8; cursor: pointer; } .copyright { position: fixed; left: 3vw; bottom: 0; max-width: 50%; text-align: justify; height: 60px; line-height: 60px; font-size: 10px; } @font-face { font-family: "Aldo the Apache"; src: url("font/AldotheApache.woff") format("woff"); } @font-face { font-family: "eyelevation6"; src: url("font/eyelevation6.woff") format("woff"); } /* The Overlay (background) */ .overlay { /* Height & width depends on how you want to reveal the overlay (see JS below) */ height: 100%; width: 0; position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; background-color: rgb(0, 0, 0); /* Black fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/opacity */ overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ } /* Position the content inside the overlay */ .overlay-content { position: relative; top: 10%; /* 25% from the top */ width: 100%; /* 100% width */ align-content: center; /* Centered text/links */ margin-top: 20 px; /* 30px top margin to avoid conflict with the close button on smaller screens */ } /* The navigation links inside the overlay */ .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; /* Display block instead of inline */ transition: 0.3s; /* Transition effects on hover (color) */ } /* When you mouse over the navigation links, change their color */ .overlay a:hover, .overlay a:focus { color: #f1f1f1; } /* Position the close button (top right corner) */ .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 40px; } /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ @media screen and (max-width: 600px) { .overlay a { font-size: 20px; } .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } .carousel { object-fit: contain; block-size: auto; } .carousel-inner img { width: 78vw; max-height: 78vh; } #Contact { background-color: black; display: flex; flex-wrap: wrap; flex-direction: column; } i { font-size: 3vw; color: white; } ul { list-style: none; text-align: left; } #mapContainer { height: 200px; align-content: center; } #contactDetails { display: block; width: auto; max-height: 40vh; } #map { width: auto; max-height: 40vh; } i { margin-right: 10px; } canvas { display: block; z-index: 1000; }