@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --bg-dark: rgb(30, 30, 30);
}

* {
    padding: 0;
    margin: 0;
}

/* Position */
.position-absolute { position: absolute; }
.position-relative { position: relative; }

.top-0 { top: 0; }
.top-25 { top: 25%; }
.top-50 { top: 50%; }
.top-100 { top: 100%; }

.left-0 { left: 0; }
.left-50 { left: 50%; }
.left-100 { left: 100%; }

/* Borders */
.border { border: 1px solid black; }

.rounded-top-right { border-top-right-radius: 0.25rem; }

/* Background Colors */
.bg-red { background-color: red; }
.bg-blue { background-color: rgb(69, 137, 209); }
.bg-dark { background-color: var(--bg-dark); }

/* Dimensions */
.vh-100 { height: 100vh; }
.dvh-100 { height: 100dvh; }

/* Alignment */
.d-flex { display: flex; }

.align-items-top { align-items: top; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }

/* Behaviours */
.flex-fill { flex-grow: 1; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

/* Padding */
/* All sides */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

/* Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

/* Left (start) */
.ps-0 { padding-left: 0; }
.ps-1 { padding-left: 0.25rem; }
.ps-2 { padding-left: 0.5rem; }
.ps-3 { padding-left: 1rem; }
.ps-4 { padding-left: 1.5rem; }
.ps-5 { padding-left: 3rem; }

/* Right (end) */
.pe-0 { padding-right: 0; }
.pe-1 { padding-right: 0.25rem; }
.pe-2 { padding-right: 0.5rem; }
.pe-3 { padding-right: 1rem; }
.pe-4 { padding-right: 1.5rem; }
.pe-5 { padding-right: 3rem; }

/* X-axis */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

/* Y-axis */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

/* Basic radius */
.rounded      { border-radius: .25rem; }
.rounded-0    { border-radius: 0; }
.rounded-1    { border-radius: .2rem; }
.rounded-2    { border-radius: .25rem; }
.rounded-3    { border-radius: .3rem; }

/* Sides */
.rounded-top      { border-top-left-radius: .25rem; border-top-right-radius: .25rem; }
.rounded-end      { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
.rounded-bottom   { border-bottom-left-radius: .25rem; border-bottom-right-radius: .25rem; }
.rounded-start    { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }

/* Shapes */
.rounded-circle   { border-radius: 50%; }
.rounded-pill     { border-radius: 50rem; }