@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap'); body { min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #171717; animation: fadeIn 2s; padding: 0; margin: 0; background: rgba(0, 0, 0, .5) url('../../media/branches.gif'); background-blend-mode: darken; background-size: cover; } .content { position: relative; } .image { margin: 0 auto; display: block; padding-bottom: 25px; width: 210px; -webkit-filter: drop-shadow(5px 5px 5px rgba(34, 34, 34, 0.3)); filter: drop-shadow(5px 5px 5px rgba(34, 34, 34, 0.3)); } .content h1 { padding-bottom: 10px; font-family: 'Open Sans', sans-serif; font-size: 48px; margin: 0 auto; text-align: center; color: #f5f5f5; } .content h3 { padding-bottom:35px; font-family: 'Open Sans', sans-serif; font-size: 16px; margin: 0 auto; text-align: center; font-weight: 600; max-width: 400px; color: #e3e3e3; } .links { text-align: center; } .link { background-color: #FFB954; font-family: 'Open Sans', sans-serif; font-weight: 600; color: white; text-decoration: none; padding: 5px 15px; border-radius: 5px; text-align: center; margin: 0 0.2em; display: block; width: 100px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); transition: 0.3s; display: inline-block } .link:hover { box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3); animation: pulse 2s infinite; } .pulse { margin:100px; display: block; width: 22px; height: 22px; border-radius: 50%; background: #3498db; box-shadow: 0 0 0 #3498db; animation: pulse 2s infinite; } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 #3498db; } 70% { -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 #3498db; box-shadow: 0 0 0 0 #3498db; } 70% { -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0); box-shadow: 0 0 0 10px rgba(204,169,44, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0); box-shadow: 0 0 0 0 rgba(204,169,44, 0); } } .github { background-color: #353535; } .discord { background-color: #7289DA; } .thunderstore { background-color: #0b82e4; } .nexus { background-color: #d98f40; } .stable { background-color: #3498db; } .torrents { background-color: #08aff1; } .beta { background-color: #d81713; } .stats { background-color: #404040; position: relative; display: block; margin: 0 auto; width: 16em; bottom: -5em; padding: 0.1em 0.1em; height: 1.6em; border-radius: 0.3em; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; } } body { } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }