Initial Commit

StyleSheets/MainStyle.css

@@ -0,0 +1,213 @@
+
+.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;
+}
+.ContentWindow{
+    backdrop-filter: blur(15px) brightness(80%);
+    border: 0.35vh solid rgba(250,250,250,0.2);
+    padding-top: 1vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.ContentPage{
+    transition: background 0.5s linear;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    height: 100vh;
+}
+.GameDisplayImage{
+    border-radius: 2vh;
+    cursor:pointer;
+    opacity: 0.65;
+    transition: 0.5s;
+}
+.GameDisplayImage:hover {
+    Z-index: 10;
+    opacity: 1;
+    transform: scale(1.2);
+    transition: 0.5s;
+}
+.HotbarContainer{
+    top: 0;
+    left: 0;
+    position: fixed;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 10vh;
+    width: 100vw;
+    transition: 0.5s;
+    .HotbarBackgrounds{
+        height: 10vh;
+    }
+    .backgroundBlur{
+        height: 10vh;
+    }
+    .HotbarContent{
+        height: 10vh;
+    }
+}
+.HotbarBackgrounds{
+    backdrop-filter: blur(5px) brightness(80%);
+    overflow: clip;
+    border-bottom: 3px solid rgba(250,250,250,0.1);
+    box-shadow: 0px 10px 10px rgba(250,250,250,0.025);
+    transition: 0.5s;
+     top: 0;
+    left: 0;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100vw;
+}
+.IHBanner{
+    transition: 0.5s;
+    height: 100%;
+    width: auto;
+    transform: translateX(0);
+}
+.HotbarContainer:hover{
+    transition: 0.5s;
+    height: 13vh;
+    .IHLogo{
+        width: 13vh;
+        height: 13vh;
+    }
+    .Title{
+        font-size: 3.5vh;
+    }
+    .HotbarButton{
+        font-size: 2.5vh;
+    }
+    .HotbarBackgrounds{
+        backdrop-filter: blur(15px) brightness(90%);
+        height: 15vh;
+        box-shadow: 0px 10px 10px rgba(250,250,250,0.1);
+        .IHBanner{
+            transform: translateX(15vh);
+        }
+    }
+    .backgroundBlur{
+        height: 15vh;
+    }
+    .HotbarContent{
+        height: 15vh;
+    }
+    .RightHotbar{
+        transition: 0.5s;
+        margin-right: 7vh;
+    }
+}
+body{
+    background-color: rgba(20,5,35);
+    margin: 0;
+    padding: 0;
+}
+.Content{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: -1;
+    overflow-x: clip;
+    position: absolute;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+@media only screen and (min-aspect-ratio: 16/8) {
+    .BGImage {
+        width: 100% !important;
+        height: auto !important;
+    }
+}
+@media only screen and (max-aspect-ratio: 16/9) {
+    .BGImage {
+        width: auto!important;
+        height: 100vh!important;
+    }
+}
+.BGImage{
+    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
+}
+.WhiteContentFont{
+    color: white;
+    font-family: "Lexend", sans-serif;
+    font-size: 2.5vh;
+}
+.Title{
+    transition: 0.5s;
+    color: white;
+    font-family: "Boldonse", system-ui;
+    font-size: 3vh;
+}
+.HotbarButton:hover{
+    border-bottom: 0.75vh solid white;
+    transform: scale(1.1);
+}
+.HotbarButton{
+    border-bottom: 0 solid white;
+    cursor: pointer;
+    color: white;
+    font-family: "Boldonse", system-ui;
+    font-size: 2vh;
+}
+.LeftHotbar{
+    margin-left: 1vh;
+}
+.RightHotbar{
+    transition: 0.5s;
+    margin-right: 5vh;
+}
+.IHLogo {
+    transition: 0.5s;
+    height: 10vh;
+    width: 10vh;
+}
+.LeftContent{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+.RightContent{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+.HotbarContent{
+    overflow: clip;
+    border-bottom: 0.35vh solid rgba(250,250,250,0.1);
+    transition: 0.5s;
+    top: 0;
+    left: 0;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100vw;
+}