#welcomeContainer { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } #welcomeContent { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; top: -10%; position: relative; } #welcomeImageSeal { border-radius: 50%; border: 0.125rem solid #cad7e1; background: rgba(1, 2, 1, 0.5); height: 8rem; width: 8rem; box-shadow: 0 0 0.6rem 0 rgb(0, 0, 0); margin-bottom: 5%; margin-top: 10%; } #welcomeHeader { font-family: 'Avenir Medium'; text-align: center; color: white; margin-bottom: 1.5rem; letter-spacing: 0.06rem; font-size: 1.25rem; text-shadow: white 0 0 0; } #welcomeDescription { text-align: justify; font-size: 0.8rem; font-weight: 100; text-shadow: rgba(255, 255, 255, 0.75) 0 0 1.25rem; } #welcomeDescCTA { text-align: center; font-size: 0.87rem; font-weight: 100; text-shadow: rgba(255, 255, 255, 0.75) 0 0 1.25rem; } /* Login button styles. */ #welcomeButton { background: none; font-weight: bold; letter-spacing: 0.125rem; border: none; padding: 0.9rem 0.3rem; margin: 0.625rem 0; cursor: pointer; position: relative; right: -1.25rem; transition: 0.5s ease; margin-top: 5%; margin-bottom: -5%; font-size: 0.87rem; } #welcomeButton:disabled { color: rgba(255, 255, 255, 0.75); pointer-events: none; } #welcomeButton:hover, #welcomeButton:focus { text-shadow: 0 0 1.25rem #fff; outline: none; } #welcomeButton:active { color: #c7c7c7; text-shadow: 0 0 1.25rem #c7c7c7; } #welcomeSVG { -webkit-transform: translate3d(0, 0, 0); overflow: visible; transform: rotate(90deg); margin-left: 1.25rem; transition: 0.25s ease; width: 1.25rem; height: 1.25rem; } #welcomeButton:hover #welcomeSVG, #welcomeButton:focus #welcomeSVG { filter: drop-shadow(0 0 0.125rem #fff); -webkit-filter: drop-shadow(0 0 0.125rem #fff); } #welcomeButton:active #welcomeSVG .arrowLine { stroke: #c7c7c7; } #welcomeButton:active #welcomeSVG { filter: drop-shadow(0 0 0.125rem #c7c7c7); -webkit-filter: drop-shadow(0 0 0.125rem #c7c7c7); } #welcomeButton:disabled #welcomeSVG .arrowLine { stroke: rgba(255, 255, 255, 0.75); } #welcomeButtonContent { display: flex; align-items: center; }