.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; } .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; } .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; } .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; height: 200vh; 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%; overflow-x:hidden; } ::-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; }