861 lines
16 KiB
CSS
861 lines
16 KiB
CSS
:root {
|
|
--nice-padding: 6rem;
|
|
--roundness: 0.75rem;
|
|
--accent1: #d81713;
|
|
--accent2: #d81713;
|
|
--accent2_transp: #05b30555;
|
|
--background1: #212529;
|
|
--background2: #16191b;
|
|
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
span {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
}
|
|
|
|
body {
|
|
font-family:'Space Grotesk', sans-serif;
|
|
background-color: var(--background1);
|
|
color: white;
|
|
margin:0px;
|
|
}
|
|
|
|
|
|
#more {
|
|
padding-top:5rem;
|
|
margin-top: -5rem;
|
|
}
|
|
#discord {
|
|
padding-top:5rem;
|
|
margin-top: -5rem;
|
|
}
|
|
#about {
|
|
padding-top:5rem;
|
|
margin-top: -5rem;
|
|
}
|
|
#join {
|
|
padding-top:5rem;
|
|
margin-top: -5rem;
|
|
}
|
|
|
|
|
|
.banner {
|
|
display: flex;
|
|
position: fixed;
|
|
background-color: #ff000099;
|
|
width: 100%;
|
|
height: 3rem;
|
|
z-index: 10;
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
justify-content: center;
|
|
backdrop-filter: blur(15px);
|
|
align-content: center;
|
|
padding-top: .4rem;
|
|
}
|
|
|
|
|
|
|
|
.headline {
|
|
margin-top: 2rem;
|
|
color: #fff;
|
|
font-size:3rem;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.desktop_navbar {
|
|
position:fixed;
|
|
display: flex;
|
|
height: 4rem;
|
|
width: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom:0;
|
|
background-color: #00000022;
|
|
backdrop-filter: blur(15px);
|
|
z-index: 5;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.desktop_navbar_logo_img {
|
|
width: 5rem;
|
|
padding-left: 2rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.desktop_navbar_link {
|
|
font-size: 1.2rem;
|
|
padding: .8rem;
|
|
transition: all .5s;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.desktop_navbar_link:hover {
|
|
color: var(--accent1);
|
|
}
|
|
|
|
.desktop_navbar_link2 {
|
|
padding:.5rem;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
.desktop_navbar_link2_div {
|
|
font-size: 1.2rem;
|
|
padding: .8rem;
|
|
transition: all .5s;
|
|
margin-left: auto;
|
|
margin-right: 2rem;
|
|
font-weight: 700;
|
|
border: solid 1px var(--accent1);
|
|
border-radius: var(--roundness);
|
|
text-align: center;
|
|
}
|
|
.desktop_navbar_link2_div:hover {
|
|
border: solid 1px var(--accent2);
|
|
background-color: var(--accent2);
|
|
transform: scale(1.05)
|
|
}
|
|
|
|
.mobile_navbar {
|
|
display: none;
|
|
overflow: hidden;
|
|
background-color: #00000033;
|
|
backdrop-filter: blur(15px);
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 5;
|
|
flex-direction: row;
|
|
min-height: 53px;
|
|
}
|
|
|
|
.mobile_navbar_logo_img {
|
|
position: absolute;
|
|
display: block;
|
|
height: 42px;
|
|
padding-left: .5rem;
|
|
top: 0;
|
|
left: 0;
|
|
padding-top: 3.5px;
|
|
}
|
|
|
|
.mobile_navbar #mobile_navbar_links {
|
|
display: none;
|
|
margin-top: 53px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
background-color: #00000011;
|
|
}
|
|
|
|
.mobile_navbar_link {
|
|
padding:.5rem;
|
|
}
|
|
|
|
.mobile_navbar a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-size: 17px;
|
|
display: block;
|
|
}
|
|
|
|
.mobile_navbar .icon {
|
|
background-color: #00000044;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
padding: 16px;
|
|
}
|
|
|
|
.mobile_navbar_logo_img_a {
|
|
display: block;
|
|
background-color: #00000022;
|
|
}
|
|
|
|
|
|
|
|
.mainflex {
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main1 {
|
|
padding-top: calc(var(--nice-padding) + 2rem);
|
|
display:flex;
|
|
width: 100%;
|
|
align-self: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, .5) url('./Background.png');
|
|
background-blend-mode: darken;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
}
|
|
|
|
.credits-background {
|
|
padding-top: calc(var(--nice-padding) + 2rem);
|
|
display:flex;
|
|
width: 100%;
|
|
align-self: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, .5) url('./credits.png');
|
|
background-blend-mode: darken;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
}
|
|
|
|
.main1_logo_a {
|
|
margin-bottom: var(--nice-padding);
|
|
cursor: default;
|
|
}
|
|
|
|
.main1_logo {
|
|
display: block;
|
|
align-self: center;
|
|
margin-left:auto;
|
|
margin-right: auto;
|
|
transition: all .5s;
|
|
max-width: 40rem;
|
|
}
|
|
.main1_logo:hover {
|
|
transform: scale(1.05)
|
|
}
|
|
|
|
.main1_description {
|
|
text-align: center;
|
|
font-size:3rem;
|
|
margin-bottom: var(--nice-padding);
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.main1_actcent {
|
|
font-weight: 800;
|
|
color:var(--accent1);
|
|
}
|
|
|
|
.main1_ipcopier {
|
|
padding: 1rem;
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
font-size: 2rem;
|
|
background-color: #d81713;
|
|
border: 0px;
|
|
border-radius: var(--roundness);
|
|
color: white;
|
|
transition: all .5s;
|
|
cursor:pointer;
|
|
position: relative;
|
|
}
|
|
.pulse {
|
|
margin:100px;
|
|
display: block;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: #d81713;
|
|
box-shadow: 0 0 0 #d81713;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-box-shadow: 0 0 0 0 #d81713;
|
|
}
|
|
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 #d81713;
|
|
box-shadow: 0 0 0 0 #d81713;
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
|
|
.main1_ipcopier:hover {
|
|
background-color: #d81713;
|
|
transform: scale(1.05);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.main1_ipcopier_text1 {
|
|
font-size:2rem;
|
|
font-weight: 800;
|
|
color: #ffff
|
|
}
|
|
|
|
.main1_ipcopier_text2 {
|
|
font-size:1.5rem;
|
|
}
|
|
|
|
.main1_popup {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -0%);
|
|
text-align: center;
|
|
background-color: rgba(0, 175, 0, 0.1);
|
|
border:solid rgba(0, 175, 0, 1) 1px;
|
|
color: #fff;
|
|
border-radius: var(--roundness);
|
|
z-index: 9999;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
margin-top: -10.5rem;
|
|
}
|
|
|
|
.main1_downarrow {
|
|
opacity: 50%;
|
|
height: 1.5rem;
|
|
padding:2rem;
|
|
transition: all .5s;
|
|
}
|
|
|
|
.main1_downarrow:hover {
|
|
opacity: 100%;
|
|
transform: scale(1.05)
|
|
}
|
|
|
|
.main2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
padding-bottom: 1rem;
|
|
background-color: var(--background2);
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
|
|
.main2_features_div {
|
|
padding-top: 2rem;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.main2_feature {
|
|
display: flex;
|
|
background-color: var(--background1);
|
|
height: 24rem;
|
|
width: 18rem;
|
|
margin: 1rem;
|
|
border-radius: var(--roundness);
|
|
transition: all .5s;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main2_feature:hover {
|
|
background-color: #00000099;
|
|
transform: scale(1.05)
|
|
}
|
|
|
|
@media (max-width: 1599px) {
|
|
.main2_features_div {
|
|
margin-left: 10rem;
|
|
margin-right: 10rem;
|
|
}
|
|
}
|
|
@media (max-width: 1279px) {
|
|
.main2_features_div {
|
|
margin-left: 0rem;
|
|
margin-right: 0rem;
|
|
}
|
|
}
|
|
|
|
|
|
.main2_feature_img {
|
|
width: 100%;
|
|
height: 50%;
|
|
object-fit: cover;
|
|
border-radius: var(--roundness);
|
|
}
|
|
|
|
.main2_feature_headline {
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
font-size:1.5rem;
|
|
font-weight: 700;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.main2_feature_text {
|
|
margin:1rem;
|
|
text-align: center;
|
|
font-size:1.2rem;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
|
|
.main4 {
|
|
min-height: 10rem;
|
|
width:100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.main4_dc_widget {
|
|
border-radius: var(--roundness);
|
|
border: 0;
|
|
}
|
|
|
|
.main4_dc_div {
|
|
margin: 2rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: var(--background2);
|
|
border-radius: var(--roundness);
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.main4_dc_description_div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main4_dc_description_title {
|
|
margin: 2rem;
|
|
text-align: center;
|
|
font-size:1.5rem;
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
|
|
.main4_dc_description {
|
|
margin-left:1.5rem;
|
|
margin-right:1.5rem;
|
|
margin-bottom:1.5rem;
|
|
font-size:1.2rem;
|
|
}
|
|
.main4_dc_button_a{
|
|
text-decoration: none;
|
|
color: #fff;
|
|
text-align: center;
|
|
border: solid var(--accent1) 1px;
|
|
border-radius: var(--roundness);
|
|
margin-top: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 1.5rem;
|
|
transition: all .5s;
|
|
}
|
|
.main4_dc_button_a:hover{
|
|
border: solid 1px var(--accent2);
|
|
background-color: var(--accent2);
|
|
transform: scale(1.05)
|
|
}
|
|
.main4_dc_button {
|
|
padding:.5rem;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
.main5 {
|
|
background-color: var(--background2);
|
|
min-height: 10rem;
|
|
width:100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.main5_admin_div{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 1rem 1rem .5rem 1rem;
|
|
}
|
|
.main5_admins_div{
|
|
display: flex;
|
|
max-width: 46rem;
|
|
min-height: 18rem;
|
|
background-color: var(--background1);
|
|
border-radius: var(--roundness);
|
|
margin-top: 1rem;
|
|
margin-right: 1rem;
|
|
margin-left: 1rem;
|
|
}
|
|
.main5_admins_dev_type1 {
|
|
flex-direction:row;
|
|
padding-right: 2rem;
|
|
}
|
|
.main5_admins_dev_type2 {
|
|
flex-direction: row-reverse;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.main5_admins_img {
|
|
border-radius: var(--roundness);
|
|
max-width: 45%;
|
|
max-height: 100%;
|
|
align-self: center;
|
|
}
|
|
.main5_admins_description_div {
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
max-width: 60%;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
flex-direction: column;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.main5_admins_description_rank {
|
|
text-align: center;
|
|
font-size:1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.main5_admins_description_rank_owner {
|
|
color: #3498db;
|
|
}
|
|
.main5_admins_description_rank_co-owner {
|
|
color: #010b29;
|
|
}
|
|
.main5_admins_description_rank_admin {
|
|
color: #02b383;
|
|
}
|
|
.main5_admins_description_title {
|
|
text-align: center;
|
|
font-size:1.5rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
transition: all .5s;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.main5_admins_description_title:hover {
|
|
color: var(--accent1);
|
|
transform: scale(1.05)
|
|
}
|
|
|
|
.main5_admins_description {
|
|
margin-bottom: auto;
|
|
font-size:1.2rem;
|
|
}
|
|
|
|
|
|
.main5_supporter_div {
|
|
display: flex;
|
|
max-width: 825px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction:row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.main5_supporters_div {
|
|
width: 23.5rem;
|
|
min-height: 16rem;
|
|
background-color: var(--background1);
|
|
border-radius: var(--roundness);
|
|
margin: .5rem;
|
|
display: flex;
|
|
}
|
|
|
|
.main5_supporters_img {
|
|
border-radius: var(--roundness);
|
|
max-width: 25%;
|
|
max-height: 100%;
|
|
align-self: center;
|
|
margin: 1rem;
|
|
}
|
|
.main5_supporters_description_div {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 1rem 1.5rem 1rem 1rem;
|
|
flex-direction: column;
|
|
}
|
|
.main5_supporters_description_rank {
|
|
text-align: center;
|
|
font-size:1.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.main5_supporters_description_rank_supporter {
|
|
color: #00f8ff;
|
|
}
|
|
.main5_supporters_description_title {
|
|
text-align: center;
|
|
font-size:1.3rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
transition: all .5s;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.main5_supporters_description_title:hover {
|
|
color: var(--accent1);
|
|
transform: scale(1.05)
|
|
}
|
|
|
|
.main5_supporters_description {
|
|
font-size:1.2rem;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.main5_beta_div {
|
|
display: flex;
|
|
max-width: 825px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction:row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.main5_beta_div {
|
|
width: 23.5rem;
|
|
min-height: 16rem;
|
|
background-color: var(--background1);
|
|
border-radius: var(--roundness);
|
|
margin: .5rem;
|
|
display: flex;
|
|
}
|
|
|
|
.main5_beta_img {
|
|
border-radius: var(--roundness);
|
|
max-width: 25%;
|
|
max-height: 100%;
|
|
align-self: center;
|
|
margin: 1rem;
|
|
}
|
|
.main5_beta_description_div {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 1rem 1.5rem 1rem 1rem;
|
|
flex-direction: column;
|
|
}
|
|
.main5_beta_description_rank {
|
|
text-align: center;
|
|
font-size:1.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.main5_beta_description_rank_supporter {
|
|
color: #dbce0e;
|
|
}
|
|
.main5_beta_description_title {
|
|
text-align: center;
|
|
font-size:1.3rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
transition: all .5s;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.main5_beta_description_title:hover {
|
|
color: var(--accent1);
|
|
transform: scale(1.05)
|
|
}
|
|
|
|
.main5_beta_description {
|
|
font-size:1.2rem;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
|
|
|
|
.main3 {
|
|
background-color: var(--background1);
|
|
min-height: 10rem;
|
|
width:100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction:column;
|
|
}
|
|
|
|
.main3_join_div_div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
flex-wrap: wrap-reverse;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.main3_join_div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 20rem;
|
|
height: 8rem;
|
|
background-color: var(--background2);
|
|
border-radius: var(--roundness);
|
|
margin: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.main3_join_title {
|
|
text-align: center;
|
|
font-size:1.5rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
transition: all .5s;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.main3_join_content_div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: var(--background1);
|
|
height: 100%;
|
|
border-radius: var(--roundness);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.main3_join_categories {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: right;
|
|
font-size:1.4rem;
|
|
line-height: 1.5;
|
|
border-right: 3px solid var(--background2);
|
|
padding-right: .75rem;
|
|
}
|
|
.main3_join_values {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
font-size:1.4rem;
|
|
line-height: 1.5;
|
|
border-left: 3px solid var(--background2);
|
|
padding-left: .75rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Copyright Text */
|
|
|
|
.copyright {
|
|
color: #ffffff99;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.copyright_div {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
width:auto;
|
|
background-color: #000;
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.desktop_navbar{
|
|
display:none;
|
|
}
|
|
.mobile_navbar{
|
|
display:flex;
|
|
}
|
|
.headline {
|
|
font-size:1.9rem;
|
|
margin-right: 1rem;
|
|
margin-left: 1rem;
|
|
}
|
|
.main1_logo {
|
|
max-width: 16rem;
|
|
}
|
|
.main1_description {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.main1_ipcopier {
|
|
display: none;
|
|
}
|
|
.main5_admins_img {
|
|
align-self: center;
|
|
padding-top: 1rem;
|
|
}
|
|
.main5_admins_div{
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
.main5_admins_description_div {
|
|
max-width: 100%;
|
|
padding: 2rem;
|
|
}
|
|
.main4_dc_div {
|
|
flex-direction: column;
|
|
}
|
|
.main4_dc_widget {
|
|
height: 20rem;
|
|
width: 100%;
|
|
}
|
|
.main3_join_div {
|
|
min-width: 20rem;
|
|
min-height: 9rem;
|
|
}
|
|
.main3_join_content_div {
|
|
padding:1rem;
|
|
}
|
|
.main5_admins_dev_type1 {
|
|
padding-right: 0;
|
|
}
|
|
.main5_admins_dev_type2 {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 360px) {
|
|
.main3_join_categories {
|
|
font-size:1rem;
|
|
}
|
|
.main3_join_values {
|
|
font-size:1rem;
|
|
}
|
|
.main3_join_div {
|
|
min-width: 10rem;
|
|
padding: .5rem;
|
|
}
|
|
.main3_join_div_div {
|
|
margin: .25rem;
|
|
}
|
|
} |