@charset "UTF-8"; @import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab'); :root { /* generic */ --gutterSm: 0.4rem; --gutterMd: 0.8rem; --gutterLg: 1.6rem; --gutterXl: 2.4rem; --gutterXx: 7.2rem; --colorPrimary400: #7e57c2; --colorPrimary600: #5e35b1; --colorPrimary800: #4527a0; --fontFamily: "Dosis", sans-serif; --fontSizeSm: 1.2rem; --fontSizeMd: 1.6rem; --fontSizeLg: 2.1rem; --fontSizeXl: 2.8rem; --fontSizeXx: 3.6rem; --lineHeightSm: 1.1; --lineHeightMd: 1.8; --transitionDuration: 300ms; --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1); /* floated labels */ --inputPaddingV: var(--gutterMd); --inputPaddingH: var(--gutterLg); --inputFontSize: var(--fontSizeLg); --inputLineHeight: var(--lineHeightMd); --labelScaleFactor: 0.8; --labelDefaultPosY: 50%; --labelTransformedPosY: calc( (var(--labelDefaultPosY)) - (var(--inputPaddingV) * var(--labelScaleFactor)) - (var(--inputFontSize) * var(--inputLineHeight)) ); --inputTransitionDuration: var(--transitionDuration); --inputTransitionTF: var(--transitionTF); } *, *::before, *::after { box-sizing: border-box; } body{ background-image: url("../Area.jpg"); background-repeat:no-repeat; background-attachment: fixed; background-size: 100% 100%; text-align: center; } .navbar{ overflow:hidden; } .navbar a{ float:left; display:block; color:#f2f2f2; text-align:center; padding:14px 16px; text-decoration:none; font-size:17px; } .navbar a:hover{ background-color:rgb(78, 188, 92); /* color:#000; */ } .side-nav{ height:120%; width:0; position:absolute; z-index:1; top:0; left:0; background-color:rgb(108, 94, 133); opacity:0.9; overflow-x:hidden; padding-top:60px; transition:0.5s; } .side-nav a{ padding:10px 10px 10px 30px; text-decoration:none; font-family:'Roboto slab',serif; font-size:22px; color:#ccc; display:block; transition:0.3s; } .side-nav a:hover{ color:#fff; } .side-nav .btn-close{ position:absolute; top:0; right:22px; font-size:36px; margin-left:50px; } @media(max-width:568px){ .navbar-nav{display:none} } #title{ background: #913fb7; opacity: 0.9; } #title h1{ color: #000; font-size: 5em; font-weight: 400; font-family: 'Passion One', cursive; margin: 0; text-align: center; } /* Calculator box */ .calculator{ display:inline-block; -webkit-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61); -moz-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61); box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61); background-color: #913fb7; padding:25px 32px; height:50%; border-radius: 17px; width: 50%; position: relative; top: 150px; } #theme { position: relative; left: -250px; width: 95%; top: -45px; font-size: 1em; } #theme select{ width:15%; height: 25px; } Input[type=submit]{ display:inline-block; background-color: #f1924e; padding:15px 50px; margin:0 0.1em 0.1em 0; border:0.16em solid rgba(255,255,255,0); border-radius:2em; box-sizing: border-box; text-decoration:none; font-family: 'Roboto Slab', serif; font-size:20px; color:#ffff; text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35); text-align:center; transition: all 0.2s; } Input[type=submit]:hover{ border-color: rgba(255,255,255,1); } @media all and (max-width:30em){ input[type=submit]{ display:block; margin:0.2em auto; } } .Input { position: relative; } .Input-text { display: block; margin-top: 40px; padding: var(--inputPaddingV) var(--inputPaddingH); color: inherit; font-size: var(--inputFontSize); font-weight: inherit; line-height: var(--inputLineHeight); border: none; border-radius: 0.4rem; transition: box-shadow var(--transitionDuration); } .Input-text::placeholder { color: #B0BEC5; } .Input-text:focus { outline: none; box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600); } .Input-label { display: block; position: absolute; bottom: 50%; left: 1rem; color: #fff; font-family: 'Roboto slab',serif; font-size: var(--inputFontSize); font-weight: inherit; line-height: var(--inputLineHeight); opacity: 0; transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1); transform-origin: 0 0; transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), transform var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF); } .Input-text:placeholder-shown + .Input-label { visibility: hidden; z-index: -1; } .Input-text:not(:placeholder-shown) + .Input-label, .Input-text:focus:not(:placeholder-shown) + .Input-label { visibility: visible; z-index: 1; opacity: 1; transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor)); transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms; } .input-label { display: block; position: absolute; bottom: 10%; left: 1rem; color: #fff; font-family: 'Roboto slab',serif; font-size: var(--inputFontSize); font-weight: inherit; line-height: var(--inputLineHeight); opacity: 0; transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1); transform-origin: 0 0; transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), transform var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF); } .Input-text:placeholder-shown + .input-label { visibility: hidden; z-index: -1; } .Input-text:not(:placeholder-shown) + .input-label, .Input-text:focus:not(:placeholder-shown) + .input-label { visibility: visible; z-index: 1; opacity: 1; transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor)); transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms; } select { position: relative; top: 80%; bottom:45px ; left: 50%; transform: translate(-50%, -50%); } select { background-color: #f1924e; color: white; padding: 12px; width: 250px; border: none; font-size: 20px; font-family:'Roboto Slab',serif ; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); -webkit-appearance: button; appearance: button; outline: none; } select::before { content: "\f13a"; font-family: FontAwesome; position: absolute; top: 0; right: 0; width: 20%; height: 100%; text-align: center; font-size: 28px; line-height: 45px; color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.1); pointer-events: none; } select:hover::before { color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.2); } select { padding: 30px; }