:root { --main-color: #3f51b5; /* R:63, G:82, B:181 */ --main-dark-color: #002984; /* R:0, G:41, B:132 */ --main-light-color: #757de8; /* R:117, G:125, B:232 */ --accent-color: #FFC107; /* R:255, G:193, B:7 */ } body { padding-top: 70px; padding-bottom: 40px; cursor: default; } .navbar.fixed-top { padding-top: 0; padding-bottom: 0; background-color: #3f51b5 !important; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-bottom: #002984 1px solid; } .nav-item { padding-top: 0.5rem; padding-bottom: 0.5rem; } @media screen and (min-width: 768px) { .navbar-nav .nav-item.active { padding-bottom: 0.25rem; border-bottom: white 0.25rem solid; } #btnTheme { margin-left: 0.5rem; } } @media screen and (max-width: 767px) { .navbar-nav .nav-item.active { padding-left: 0.75rem; border-left: white 0.25rem solid; } .navbar-nav .nav-item { padding-left: 1rem; } #social-menu { flex-direction: row; } #social-menu .nav-item:not(:first-child) { padding-left: 2rem; } } .navbar { padding-left: 0; } .navbar .navbar-brand { margin-top: 0.5rem; margin-bottom: 0.5rem; padding-left: 1rem; } .card, .jumbotron { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); } h1:not(.card-header):not(#title), h2:not(.card-header), h3:not(.card-header), h4:not(.card-header), h5:not(.card-header), h6:not(.card-header) { margin-top: 30px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } a:not(.nav-link):not(.navbar-brand) { color: #3f51b5; } a:hover:not(.nav-link):not(.navbar-brand) { color: #757de8; } li.col-md-6 { padding-left: 0px; } .cover { text-align: center; } .required { color: red; } .invalid-captcha { box-shadow: 0 0 1.5px 1px red; } .fa { font-size: 0.85rem; } .full-height { height: 100%; } /* Dark Mode */ .dark-mode { color: white; background-color: #343a40; } .dark-mode .jumbotron { background-color: #2b3136; } .dark-mode a:not(.navbar-brand):not(.nav-link) { color: #757de8 !important; } .dark-mode a:not(.navbar-brand):not(.nav-link):hover { color: #3f51b5 !important; } .dark-mode .card { background-color: #343a40; border-color: rgba(255, 255, 255, 0.125); } .dark-mode .form-control { background-color: rgb(81, 89, 107); border-color: rgb(60, 66, 80); } .dark-mode .form-control:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.5); } /* for transitioning to/from dark mode */ .transition { -webkit-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; }