:root { --ae-dark-gray:#151515; --ae-light-gray:#999 ; --my-orange:#ff7300; --my-pink:#ff007a; --my-ease: cubic-bezier(0.99,0.01,0.01,0.99); } html{ background-color: var(--my-pink); } body { background-image: url('img/SkullButton_Transp.svg') ; background-size:1000px; /* Optional */ background-repeat:no-repeat; background-position-x: -500px; background-position-y: 50%; background-attachment:scroll; } html, body{ height: 100%; width: 100%; margin: 0; padding: 0; } p{ font-size: 14px; } h1{ font-size: 22px; } .pink{ color: var(--my-pink); } body { color: white; font-size: 5em; padding: 0px; overflow: hidden; } div{ justify-content: center; align-items: center; display:flex; flex-direction:row; transition: opacity 0.5s; transition-timing-function: var(--my-ease); } button, input[type=text]{ background-color: var(--ae-dark-gray); color: var(--ae-light-gray); /*color: white;*/ padding: .5em; border-radius: .75em; margin: .33em; font-size: 12px; transition: padding 1s, background-color 0.5s, color 1s; transition-timing-function: var(--my-ease); } button:hover,#tagWipBTN:hover,#tagDoneBTN:hover{ background-color: var(--my-pink)*.25; padding: 1em; color: white; } .fill-width{ width: 100%; } .anchorBottomRight { position: absolute; /* Positions relative to the .parent */ bottom: 5px; right: 15px; } .anchorTopLeft { position: absolute; /* Positions relative to the .parent */ top: 5px; left: 15px; } .container{ height:100%; width:100%; } .col{ display: flex; flex-direction: column; } .row{ display: flex; flex-direction: row; } input[type=text]{ box-sizing:content-box; border-radius: .5em; background-color: #151515; } .subContainer{ border-width: 2px; border-radius: 30px; border-style: solid; border-color: var(--ae-light-gray); padding: 30px; } .hidden{ display: none; } .shown{ display: block; } .fortyFive{ width: 45%; }