:root { /* Dark theme */ --dark-background: #fafafa; --dark-foregeound: #666666; /* Light theme */ --light-background: #fafafa; --light-foregeound: #666666; /* Defaults */ --current-background: var(--light-background); --current-foreground: var(--light-foregeound); } @media (prefers-color-scheme: dark) { :root { --current-background: var(--dark-background); --current-foreground: var(--dark-foregeound); } } body { background-color: var(--current-background); color: var(--current-foreground); } html { font-size: 14px; } .bg-purple { background-color: #432257; } @media (min-width: 768px) { html { font-size: 16px; } } /*////////////////////////////////////////////////////////////////// [ Background ]*/ .bg-img1 { background-position: center; background-repeat: no-repeat; background-size: cover; } /*================================================================== SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE ==================================================================*/ /*////////////////////////////////////////////////////////////////// [ Size ]*/ .size1 { width: 100%; min-height: 100vh; } /*////////////////////////////////////////////////////////////////// [ Border ]*/ .bor1 { border-radius: 18px; } .bg1 { background-color: rgba(255,255,255,0.8); } .wsize1 { max-width: 100%; width: 880px; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } html { position: relative; min-height: 100%; } body { margin-bottom: 60px; }