| @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"); |
| |
| html, |
| body { |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| overflow: hidden; /* Prevent page scrolling */ |
| } |
| |
| body { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .background { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| } |
| |
| .bush { |
| position: fixed; |
| top: 3%; |
| width: 100%; |
| height: 100%; |
| z-index: 7; |
| filter: blur(5px); |
| } |
| |
| .bush-left-overlay { |
| left: -3%; |
| background-image: url("./../assets/bush_left.png"); |
| background-size: cover; |
| background-position: center bottom; |
| } |
| |
| .bush-right-overlay { |
| left: 3%; |
| background-image: url("./../assets/bush_right.png"); |
| background-size: cover; |
| background-position: center bottom; |
| } |
| |
| .blahaj-overlay { |
| background-image: url("./../assets/blahaj.png"); |
| background-size: cover; |
| background-position: calc(50% - 50px) bottom; |
| z-index: 6; |
| } |
| |
| .boat-overlay { |
| background-image: url("./../assets/boat.png"); |
| background-size: cover; |
| background-position: calc(50% + 250px) bottom; |
| z-index: 5; |
| } |
| |
| .cloud-left-overlay { |
| background-image: url("./../assets/cloud_left.png"); |
| background-size: cover; |
| background-position: calc(50% + 250px) bottom; |
| top: -10px; |
| z-index: 4; |
| } |
| |
| .cloud-right-overlay { |
| background-image: url("./../assets/cloud_right.png"); |
| background-size: cover; |
| background-position: calc(50% + 250px) bottom; |
| top: -20px; |
| z-index: 4; |
| } |
| |
| .lake-overlay { |
| background-image: url("./../assets/lake.png"); |
| background-size: cover; |
| background-position: calc(50% + 250px) bottom; |
| z-index: 3; |
| } |
| |
| .mountains-overlay { |
| background-image: url("./../assets/mountains.png"); |
| background-size: cover; |
| background-position: calc(50% + 250px) bottom; |
| z-index: 2; |
| } |
| |
| .sky-overlay { |
| background-image: url("./../assets/sky.png"); |
| background-size: cover; |
| background-position: calc(50% + 250px) bottom; |
| z-index: 1; |
| } |
| |
| .canvas-overlay { |
| position: relative; |
| top: 100px; |
| left: -250px; |
| z-index: 1; |
| filter: blur(5px); |
| } |
| |
| .discord { |
| background-color: #5865f2; |
| } |
| |
| .revolt { |
| background-color: rgb(255, 70, 84); |
| } |
| |
| .reddit { |
| background-color: #ff4300; |
| } |
| |
| .image-button { |
| display: inline-block; |
| padding: 13px; |
| border-radius: 5px; |
| color: white; |
| border: none; |
| font-size: px; |
| text-align: left; |
| text-decoration: none; |
| margin-bottom: 10px; |
| font-family: "Poppins", "San Francisco", sans-serif; |
| font-weight: 400; |
| text-align: center; |
| width: 90%; |
| } |
| |
| |
| .button-icon { |
| display: inline-block; |
| vertical-align: middle; |
| width: 20px; |
| height: 20px; |
| margin-right: 13px; |
| } |
| |
| .container { |
| position: absolute; |
| right: 50px; |
| background-color: #a789a8a2; |
| padding: 50px 50px; |
| border-radius: 5px; |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
| transition: background-color 2s ease-out; |
| max-width: 300px; |
| flex-direction: column; |
| align-items: center; |
| z-index: 9; |
| } |
| |
| h1 { |
| margin-top: 0; |
| font-family: "Poppins", "San Francisco", sans-serif; |
| font-weight: 600; |
| color: rgb(236, 236, 236); |
| text-shadow: 0 0 10px rgba(43, 43, 43, 0.5); |
| font-size: 40px; |
| } |
| |
| h2 { |
| margin-top: -35px; |
| font-family: "Poppins", "San Francisco", sans-serif; |
| font-weight: 500; |
| color: rgb(236, 236, 236); |
| text-shadow: 0 0 10px rgba(43, 43, 43, 0.5); |
| font-size: 25px; |
| } |
| |
| p { |
| margin-top: -20px; /* Adjust the margin as needed */ |
| padding-bottom: 7px; |
| font-family: "Poppins", "San Francisco", sans-serif; |
| font-weight: 400; |
| color: rgb(236, 236, 236); |
| text-shadow: 0 0 10px rgba(43, 43, 43, 0.5); |
| font-size: 17px; |
| } |
| |
| p.indent { |
| font-weight: 400; |
| margin-top: -10px; |
| margin-left: 25px; |
| } |
| |
| .blur { |
| backdrop-filter: blur(7px); |
| } |
| |
| @media only screen and (max-width: 700px) { |
| .container { |
| right: auto; |
| padding: 50px 30px; |
| max-width: 400px; |
| } |
| |
| h1 { |
| font-size: 30px; |
| } |
| |
| p { |
| margin-top: -25px; |
| font-size: 15px; |
| } |
| |
| .image-button { |
| font-size: 15px; |
| } |
| |
| .button-icon { |
| width: 15px; |
| height: 15px; |
| } |
| |
| .discord { |
| padding: 10px; |
| } |
| |
| .revolt { |
| padding: 10px; |
| } |
| |
| } |