@import url(normalize.css); @import url(flaticon.css); @import url(tables.css); @import url(https://fonts.googleapis.com/css?family=Karla|Montserrat|Inconsolata|Rubik); ul.topnav { list-style-type: none; margin: 0; padding: 20px; overflow: hidden; } ul.topnav li { float: left; } ul.topnav li a { display: inline-block; padding: 15px 26px; text-decoration: none; font-size: 15px; background-color: #fff; margin: 0 10px 0px 10px; border-radius: 5px; color: #2f3472; } ul.topnav li a:hover { background-color: #dee2ea; text-decoration: none; } ul.topnav li.icon { display: none; } input { padding: 10px; box-sizing: border-box; border: 1px solid #cedadf; border-radius: 4px; font-size: 1.5em; font-family: "Montserrat"; } input:focus { border: 1px solid #000; } button { background-color: #aca4bc; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; font-size: 1.5em; font-family: "Montserrat"; } body { background-color: #7aa2cb; font-family: 'Karla', sans-serif; font-size: 100%; } .flexcontainer { display: flex; flex-direction: column; } .flexpage, .intro-page, .info-page, .footer-page, .login-page, .panel-page { display: flex; justify-content: center; align-items: center; } .intro-page { background: linear-gradient(#070a15, #252b46); height: 100vh; flex-direction: column; } @media (max-width: 1200px) { .intro-page { height: 100%; } } .intro-page-logo { font-family: 'Montserrat', serif; font-size: 12em; text-transform: uppercase; color: #E08E79; text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84, 11px 11px 0px #e9bd84, 12px 12px 0px #e9bd84, 13px 13px 0px #e9bd84, 14px 14px 0px #e9bd84, 15px 15px 0px #e9bd84, 16px 16px 0px #e9bd84, 17px 17px 0px #e9bd84, 18px 18px 0px #e9bd84, 19px 19px 0px #e9bd84, 20px 20px 0px #e9bd84, 21px 21px 0px #e9bd84, 22px 22px 0px #e9bd84, 23px 23px 0px #e9bd84, 24px 24px 0px #e9bd84, 25px 25px 0px #e9bd84, 26px 26px 0px #e9bd84, 27px 27px 0px #e9bd84, 28px 28px 0px #e9bd84, 29px 29px 0px #e9bd84, 30px 30px 0px #e9bd84; } @media (max-width: 1200px) { .intro-page-logo { font-size: 3.5em; padding: 20px; text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84, 11px 11px 0px #e9bd84, 12px 12px 0px #e9bd84, 13px 13px 0px #e9bd84, 14px 14px 0px #e9bd84, 15px 15px 0px #e9bd84, 16px 16px 0px #e9bd84, 17px 17px 0px #e9bd84, 18px 18px 0px #e9bd84, 19px 19px 0px #e9bd84, 20px 20px 0px #e9bd84; } } .intro-page-welcome-text { font-family: 'Inconsolata', serif; font-size: 2em; text-transform: uppercase; color: #fff; } @media (max-width: 1200px) { .intro-page-welcome-text { font-size: 1em; padding-top: 10px; } } .fa-angle-double-down { color: #424769; margin-top: 50px; } @media (max-width: 1200px) { .fa-angle-double-down { margin: 0px; } } .info-page { background: linear-gradient(#F1D4AF, #eee9d9); flex-direction: row; height: 80vh; } @media (max-width: 1200px) { .info-page { flex-direction: column; height: 100%; } } .info-page h1 { font-family: 'Rubik'; color: #dab199; text-align: center; font-size: 3em; text-transform: lowercase; } .info-page-item { font-size: 0.9em; line-height: 1.6em; color: #8b6d5c; margin: 50px; } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-size: 10em; color: #fff; } @media (max-width: 1200px) { [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-size: 5em; } } .footer-page { background-color: #e2f2f0; flex-direction: column; height: 20vh; } @media (max-width: 1200px) { .footer-page { height: 100%; } } .footer-page a { color: black; } .footer-page-title, .footer-page h1, .footer-page h2 { font-family: 'Inconsolata'; color: #E08E79; font-weight: lighter; text-transform: lowercase; } .footer-page h1 { font-size: 1.5em; } .footer-page h2 { font-size: 1.2em; } @media (max-width: 1200px) { .footer-page h2 { font-size: 1em; margin: 20px; } } .login-page { background: linear-gradient(#070a15, #252b46); flex-direction: column; padding: 40px; } .login-page-logo { font-family: 'Montserrat', serif; font-size: 6em; text-transform: uppercase; color: #E08E79; text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84; } .login-page-form { background-color: #fff; padding: 100px; box-sizing: border-box; border-radius: 5px; border-top: 0; border-bottom: 3px solid #d2d5e7; border-right: 3px solid #d2d5e7; border-left: 0; } .panel-page { background: linear-gradient(#F1D4AF, #eee9d9); flex-direction: column; } /*# sourceMappingURL=main.css.map */