515 lines
15 KiB
CSS
515 lines
15 KiB
CSS
.lexend{
|
|
font-family: "Lexend", sans-serif;
|
|
font-optical-sizing: auto;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
.dotgothic16-regular {
|
|
font-family: "DotGothic16", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
.boldonse-regular {
|
|
font-family: "Boldonse", system-ui;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
.coralPixels{
|
|
user-select: none;
|
|
font-family: "Coral Pixels", serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
color: white;
|
|
font-size: 5vh;
|
|
filter: invert(100%);
|
|
}
|
|
.HotbarWrapper:hover {
|
|
height: 12vh;
|
|
background-image: linear-gradient(to bottom,rgba(52, 184, 254,0.2) ,rgba(52, 184, 254,0.35),rgba(22, 144, 254,0.15),rgba(12, 64, 124,0.35));
|
|
}
|
|
.ContentContainer:hover {
|
|
border-bottom: #8cefff 0.5vh solid;
|
|
border-right: #8cefff 0.5vh solid;
|
|
border-left: rgba(32,120,155,1) 0.5vh solid;
|
|
border-top: rgba(32,120,155,1) 0.5vh solid;
|
|
box-shadow: rgba(200,250,250,0.5) 0vh 0vh 3vh;
|
|
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.4),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.3),rgba(22, 144, 254,0.15),rgba(12, 64, 124,0.25));
|
|
transform: scale(1.09);
|
|
cursor: pointer;
|
|
}
|
|
.SoftDev{
|
|
background-image: linear-gradient(to bottom, rgba(8,46,49, 0.9), rgba(8,46,49, 0.3) , rgba(8,46,49, 0.0), rgba(8,46,49, 0.1)), linear-gradient(to bottom right, rgba(8,46,49, 0.5), rgba(8,46,49, 0.3) , rgba(8,46,49, 0.5), rgba(8,46,49, 0.7)), url('../Assets/Software.png');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position-x: center;
|
|
}
|
|
.SoftPub{
|
|
background-image: linear-gradient(to bottom, rgba(8,46,49, 0.9), rgba(8,46,49, 0.3) , rgba(8,46,49, 0.0), rgba(8,46,49, 0.1)), linear-gradient(to bottom right, rgba(8,46,49, 0.5), rgba(8,46,49, 0.3) , rgba(8,46,49, 0.5), rgba(8,46,49, 0.7)), url('../Assets/GameDev.png');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position-x: center;
|
|
}
|
|
.ContentCreation{
|
|
background-image: linear-gradient(to bottom, rgba(8,46,49, 0.9), rgba(8,46,49, 0.3) , rgba(8,46,49, 0.0), rgba(8,46,49, 0.1)), linear-gradient(to bottom right, rgba(8,46,49, 0.5), rgba(8,46,49, 0.3) , rgba(8,46,49, 0.5), rgba(8,46,49, 0.7)), url('../Assets/Art.png');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position-x: center;
|
|
}
|
|
.ContentImage{
|
|
border-radius: 2vh;
|
|
width: 90%;
|
|
height: 80%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
body{
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
}
|
|
@media only screen and (max-aspect-ratio: 1.165/1) {
|
|
.EntireContentWrapper{
|
|
min-height: 100vh;
|
|
overflow-y: hidden;
|
|
}
|
|
.FadeIndex{
|
|
position: absolute;
|
|
height: 360vh;
|
|
top: 0 !important;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
.StaticSizeableContainer{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
.StaticContentContainer{
|
|
padding: 0;
|
|
filter: drop-shadow(0 0.5vh 3vh #8cefff);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-right: rgba(32,120,155,1) 0.3vh solid;
|
|
border-bottom: rgba(32,120,155,1) 0.3vh solid;
|
|
text-shadow: #223342 0 0 2vh;
|
|
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.2) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.15)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
|
|
border-radius: 10vw;
|
|
transform: translateY(3vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: left;
|
|
align-items: flex-start;
|
|
background-color: rgba(190,240,240,.1);
|
|
transition: 0.5s;
|
|
}
|
|
.ContentContainer{
|
|
padding: 0;
|
|
filter: drop-shadow(0 0.5vh 3vh #8cefff);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-right: rgba(32,120,155,1) 0.3vh solid;
|
|
border-bottom: rgba(32,120,155,1) 0.3vh solid;
|
|
text-shadow: #223342 0 0 2vh;
|
|
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
|
|
border-radius: 5vh;
|
|
transform: translateY(3vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 92vw;
|
|
height: 70vh;
|
|
margin-top: 1vh;
|
|
margin-bottom: 1vh;
|
|
transition: 0.5s;
|
|
}
|
|
.LandingWrapper{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 200vh;
|
|
padding-bottom: 3vh;
|
|
}
|
|
.FooterFont{
|
|
cursor: pointer;
|
|
font-family: 'Lexend',serif; color:white; padding-left: 1vw !important;
|
|
font-size: 2vh !important;
|
|
}
|
|
.ShortcutButton{
|
|
font-size: 1vh !important;
|
|
margin: 0.5vh !important;
|
|
max-width: 21vw !important;
|
|
min-height: 7vh !important;
|
|
transform: translateY(-4.5vh);
|
|
border-radius: 5vw !important;
|
|
}
|
|
.InfoBoxButton{
|
|
min-width: 75vw !important;
|
|
min-height:6vh;
|
|
transform: translateY(-4.5vh);
|
|
}
|
|
.IntroWrapper{
|
|
margin-top: 15vh;
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
align-content: center;
|
|
}
|
|
.ShortcutButtonWrapper{
|
|
display: flex; flex-direction: row; justify-content: center; width: 100%; flex-wrap: wrap;
|
|
}
|
|
.FrontPageTextBox{
|
|
margin-top: 1vh;
|
|
margin-bottom: 1vh;
|
|
position: relative;
|
|
width: 94vw;
|
|
}
|
|
.WelcomeTitle{
|
|
height: 10vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.InfoBox{
|
|
height: 23vh;
|
|
flex-direction: row;
|
|
}
|
|
.ShortcutBox{
|
|
min-height: 24vh;
|
|
flex-direction: row;
|
|
}
|
|
.HotbarWrapper{
|
|
justify-content: flex-start !important;
|
|
flex-direction: column;
|
|
height: 13vh !important;
|
|
}
|
|
.TerrainGenBG{
|
|
margin-top: 5vh;
|
|
top:57vh;
|
|
height: 52.174vw;
|
|
width: 96vw;
|
|
aspect-ratio: 1.84;
|
|
}
|
|
.LargeWhiteFont{
|
|
font-size: 2.25vh !important;
|
|
}
|
|
.Title {
|
|
text-align: center;
|
|
font-size: 4vh !important;
|
|
}
|
|
.Logo{
|
|
height: 6vh !important;
|
|
width: 6vh !important;
|
|
}
|
|
.HotbarSection{
|
|
flex-wrap: wrap !important;
|
|
justify-content: center !important;
|
|
}
|
|
.HotbarButton{
|
|
margin: 0.1vh;
|
|
font-size: 1.85vh !important;
|
|
width: 22vw !important;
|
|
height: 5vh !important;
|
|
}
|
|
}
|
|
@media only screen and (min-aspect-ratio: 1.165/1) {
|
|
.FadeIndex{
|
|
height: 220vh !important;
|
|
}
|
|
.StaticSizeableContainer{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.StaticContentContainer{
|
|
padding: 0;
|
|
filter: drop-shadow(0 0.5vh 3vh #8cefff);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-right: rgba(32,120,155,1) 0.3vh solid;
|
|
border-bottom: rgba(32,120,155,1) 0.3vh solid;
|
|
text-shadow: #223342 0 0 2vh;
|
|
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.2) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.15)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
|
|
border-radius: 5vh;
|
|
transform: translateY(3vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: left;
|
|
align-items: flex-start;
|
|
background-color: rgba(190,240,240,.1);
|
|
transition: 0.5s;
|
|
}
|
|
.ContentContainer{
|
|
padding: 0;
|
|
filter: drop-shadow(0 0.5vh 3vh #8cefff);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-right: rgba(32,120,155,1) 0.3vh solid;
|
|
border-bottom: rgba(32,120,155,1) 0.3vh solid;
|
|
text-shadow: #223342 0 0 2vh;
|
|
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.2),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.15),rgba(22, 144, 254,0.075),rgba(12, 64, 124,0.125));
|
|
border-radius: 5vh;
|
|
transform: translateY(3vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 22vw;
|
|
height: 70vh;
|
|
transition: 0.5s;
|
|
}
|
|
.LandingWrapper{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 80vh;
|
|
padding-bottom: 3vh;
|
|
}
|
|
.FooterFont{
|
|
cursor: pointer;
|
|
font-family: 'Lexend',serif; color:white; padding-left: 2vh;
|
|
font-size: 3vh;
|
|
}
|
|
.ShortcutButtonWrapper{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
width: 100%
|
|
}
|
|
.ShortcutButton{
|
|
margin-left: 1vh;
|
|
height: 10vh !important;
|
|
transform: translateY(-4.5vh) !important;
|
|
}
|
|
.InfoBoxButton{
|
|
width: 80% !important;
|
|
height:10vh;
|
|
transform: translateY(-4.5vh) !important;
|
|
}
|
|
.IntroWrapper{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.WelcomeTitle{
|
|
top: 11vh;
|
|
height: 10vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.InfoBox{
|
|
top: 26vh;
|
|
height: 34vh;
|
|
flex-direction: row;
|
|
}
|
|
.ShortcutBox{
|
|
top: 63vh;
|
|
height: 24vh;
|
|
flex-direction: row;
|
|
}
|
|
.FrontPageTextBox{
|
|
position: absolute;
|
|
left: 3vh;
|
|
width: 45vw;
|
|
}
|
|
.HotbarWrapper{
|
|
flex-direction: row;
|
|
}
|
|
.TerrainGenBG{
|
|
position: absolute;
|
|
top:26vh;
|
|
height: auto;
|
|
width: 50vw;
|
|
aspect-ratio: 1.84;
|
|
left: 50vw;
|
|
}
|
|
}
|
|
.HotbarWrapper{
|
|
z-index: 100;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: clip;
|
|
width: 100vw;
|
|
height: 10vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: #121e29 0 0 5vh;
|
|
backdrop-filter: blur(5px);
|
|
background-image: linear-gradient(to bottom,rgba(52, 184, 254,0.15) ,rgba(52, 184, 254,0.25),rgba(22, 144, 254,0.125),rgba(12, 64, 124,0.25));
|
|
border-bottom: #8cefff 0.3vh solid;
|
|
transition: 0.5s;
|
|
}
|
|
.HotbarButton:active{
|
|
cursor: grabbing !important;
|
|
height: 9vh;
|
|
background: white;
|
|
filter: drop-shadow(0 0 2vh #8cefff);
|
|
transform: scale(1.1) translateY(1%);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
.HotbarButton:hover {
|
|
cursor: pointer;
|
|
height: 8vh;
|
|
filter: drop-shadow(0 0 2vh #8cefff);
|
|
transform: scale(1.1) translateY(1%);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
.RightFloat.Long{
|
|
width: 100vh;
|
|
|
|
}
|
|
.RightFloat{
|
|
margin-right: 1vw;
|
|
min-width: 75vh;
|
|
max-width: 100vw;
|
|
}
|
|
.LargeWhiteFont{
|
|
font-family: "Lexend", system-ui;
|
|
font-size: 3vh;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.HotbarButton{
|
|
margin-right: 1vh;
|
|
font-family: "Lexend", system-ui;
|
|
font-size: 4vh;
|
|
width: 22vh;
|
|
height: 7vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5vh;
|
|
color:white;
|
|
text-shadow: #8cefff 0vh 0vh 0vh;
|
|
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35));
|
|
border-bottom: #8cefff 0.3vh solid;
|
|
border-right: #8cefff 0.3vh solid;
|
|
user-select: none;
|
|
transition: .25s;
|
|
}
|
|
.FooterContainer{
|
|
margin: 2vh 2vw 5vh;
|
|
padding-bottom: 5vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
.halbearnetFooter{
|
|
border-top: white solid;
|
|
z-index: 35;
|
|
max-width: 100vw;
|
|
min-height: 12vh;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding-left: 5vw;
|
|
padding-right: 5vw;
|
|
backdrop-filter: blur(5px);
|
|
background-image: linear-gradient(to bottom, rgba(180,220,255,0.125), rgba(180,220,255,0.225), rgba(180,220,255,0.0525), rgba(100,200,255,0.0725));
|
|
|
|
}
|
|
.Copyright{
|
|
border-radius: 5vh;
|
|
backdrop-filter: blur(15px);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
}
|
|
.Title{
|
|
user-select: none;
|
|
font-family: "Lexend", sans-serif;
|
|
color: white;
|
|
font-size: 7vh;
|
|
}
|
|
Button{
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
.Logo{
|
|
user-select: none;
|
|
width: 10vh;
|
|
height: 10vh;
|
|
background-image: url('../Assets/Logo.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
.HotbarSection{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
.BackgroundFade {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
width: 100vw;
|
|
background-image: linear-gradient(to bottom, RGBA(3, 29, 46, 0.0), RGBA(3, 29, 46, 0.1) , RGBA(3, 29, 46, 1.0), RGBA(3, 29, 46, 1.0));
|
|
}
|
|
.LandingWrapper{
|
|
//background-image: linear-gradient(to bottom right, RGBA(6, 54, 87,0), RGBA(6, 54, 87,0.5), RGBA(6, 54, 87,0.5),RGBA(3, 29, 46,1.0));
|
|
backdrop-filter: blur(5);
|
|
}
|
|
.TerrainGenBG{
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
z-index: -2;
|
|
}
|
|
body{
|
|
//background-image: linear-gradient(to bottom right, #063657,#031d2e );
|
|
//background-image: url("../Assets/Programming.PNG");
|
|
background-color: black;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 1.5vh;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(0,0,0,0.5 );
|
|
border-radius: 2vh;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-image: linear-gradient(to bottom right, rgb(50, 100, 100), rgb(70, 120, 120));
|
|
border-radius: 2vh;
|
|
border: 0.4vh solid rgb(90, 150, 150);
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
cursor: grab;
|
|
border: 0.4vh solid rgb(190, 250, 250);
|
|
background-image: linear-gradient(to bottom right, rgb(70, 140, 140), rgb(100, 180, 180));
|
|
}
|
|
::-webkit-scrollbar-thumb:active{
|
|
cursor: grabbing;
|
|
} |