@media only screen and (max-aspect-ratio: 1.165/1) { .LoginField{ min-width: 90%; min-height:5vh; padding: 1vh 5vh; backdrop-filter: blur(15px); border-radius: 2.5vh; margin-bottom: 1vh; flex-direction: column-reverse; display: flex; justify-content: center; align-items: center; align-content: center; } .IconText{ font-family: "Arial", serif; font-size: 1vh !important; user-select: none; } .whiteText{ padding-bottom: 1vh; text-align: center; text-shadow: #0e4044 0.15vh 0.35vh 1vh; font-family: "Arial", serif; color: white; font-size: 2vh; } .PopUpWrapper{ pointer-events: all; z-index: 100 !important; display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: column; width: 95vw; height: 85vh; left: 50vw; top: 50vh; position: absolute; transform: translate(-50%,-50%); } .WindowTitle{ font-family: "Arial", serif; font-size: 1.35vh !important; color: white; text-shadow: #0e4044 0.15vh 0.35vh 1vh; margin-left:0.25vh; } } @media only screen and (min-aspect-ratio: 1.165/1) { .LoginField{ min-width: 90%; min-height:5vh; padding: 1vh 5vh; backdrop-filter: blur(15px); border-radius: 2.5vh; margin-bottom: 1vh; display: flex; justify-content: left; align-items: center; align-content: center; } .WindowTitle{ font-family: "Arial", serif; font-size: 2.35vh; color: white; text-shadow: #0e4044 0.15vh 0.35vh 1vh; margin-left:0.25vh; } .PopUpWrapper{ pointer-events: all; z-index: 100 !important; display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: column; width: 50vw; height: 85vh; left: 50vw; top: 50vh; position: absolute; transform: translate(-50%,-50%); } .IconText{ font-family: "Arial", serif; font-size: 1.35vh !important; user-select: none; } .whiteText{ text-shadow: #0e4044 0.15vh 0.35vh 1vh; font-family: "Arial", serif; color: white; font-size: 3.35vh; } } .windowIcon{ user-select: none; z-index: 55 !important; position: absolute; transition: 0.0s !important; width: 9.5vh; height: 9.5vh; display: flex; justify-content: center; flex-wrap: nowrap; align-items: center; flex-direction: column; border-radius: 5%; } Button{ background: transparent; border: none; } .DraggableWrapper{ pointer-events: all; z-index: 50; /*!important;*/ padding: 0; Position:Absolute; left: 0; top: 0; } .WindowTitleBar{ backdrop-filter: blur(2px); padding-top: 0; padding-bottom: 0; padding-left: 2vh; padding-right: 2vh; display: flex; margin: 0; box-sizing: border-box; width: 100%; height: 5vh; /*z-index: 10;*/ user-select: none; justify-content: space-between; align-items: center; text-align: center; cursor:grab; flex-wrap: nowrap; background-image: linear-gradient(to bottom, rgba(200,200,255,0.3),rgba(200,200,255,0.1),rgba(200,200,255,0.0),rgba(200,200,255,0.2)); border: 0.5vh white solid; border-radius: 2vh; box-shadow: 0 1vh 1vh #1d4746; } .WindowTitleBar:active{ cursor: grabbing; } .ExitButton{ transition: 0.25s; background-image: url("../GeneralAssets/ExitButton.png"); } .ExitButton:hover{ transform: scale(1.2); background-image: url("../GeneralAssets/ExitButtonHover.png"); } .MinimiseButton{ background-image: url("../GeneralAssets/MinimiseButton.png"); margin-right: 0.25vh; } .MinimiseButton:hover{ background-image: url("../GeneralAssets/MinimiseButtonHover.png"); } .appTitleButton{ background-size: contain; background-repeat: no-repeat; height: 3.5vh; width: 3.5vh; } .appTitleButton:hover{ cursor: pointer; } .appTitleButton:active{ cursor: grabbing; } .WindowThumbnail{ background-size: contain; background-repeat: no-repeat; height: 3vh; width: 3vh; } .WindowTitleBarContainer{ padding: 0; margin: 0; display: flex; justify-content: left; align-items: center; text-align: center; flex-wrap: nowrap; height: 100%; } .WindowBody{ justify-content: center; align-content: start; align-items: center; font-family: "Arial", serif; /*z-index: 5;*/ box-sizing: border-box; height: 100%; width: 100%; filter: drop-shadow(1vh 1vh 1vh #121e29); backdrop-filter:brightness(0.9) blur(5px); text-shadow: #223342 0 0 2vh; background-image: linear-gradient(to bottom,rgba(22, 184, 224,0.1) ,rgba(22, 184, 224,0.25),rgba(22, 184, 224,0.15),rgba(42, 184, 224,0.05)),linear-gradient(to bottom, rgba(200,200,255,0.5),rgba(200,200,255,0.1),rgba(200,200,255,0.0),rgba(200,200,255,0.2)); border-radius: 5vh; display: flex; flex-wrap: wrap; box-shadow: 1vh 1vh 1vh #121e29; padding:1vh; transition: 0.6s; margin-bottom: 3vh; } .WindowBody.Dragging{ box-shadow: 2vh 3vh 3vh #121e29; } .FormBoxWrapper{ margin: 3vh; min-width: 90%; } .minimised{ top: 200vh !important; transition: 0.5s !important; } .animationTransition{ transition: 0.5s !important; } .hyperlink:hover{ transform: scale(1.2); cursor: pointer; color: white !important; } .hyperlink{ transition: 0.25s; color: #8cefff !important; font-family: "Arial", serif; } .ButtonArea{ align-items: flex-start !important; margin-top: 5vh; flex-direction: column; } .LogInButton:hover{ width: 17vw; transform: scale(1.3) translateY(1vh)!important; } input:hover{ height:5vh; min-width: 5vh; } input{ transition: 0.25s; box-shadow: 0 0 1vh #8cefff; margin-right: 5vh; transform: scale(1.2); border: none; height:3vh; min-width: 3vh; border-radius: 1.5vh; border-bottom: #8cefff 0.5vh solid; background: transparent !important; background-image: linear-gradient(to bottom, rgba(25,50,75,0.5), rgba(50,100,155,0.25), rgba(50,100,155,0.15), rgba(50,100,155,0.15)) !important; } .showpassword{ backdrop-filter: none !important; } .LogInButton{ border-radius: 2vh !important; width: 15vw; transform: scale(1.2) translateY(1vh); background: transparent !important; 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)) !important; }