minimal.css

/* minimal.css v1.0 by @mflxu */
/* custom font from google fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
/* root variables */
:root {
  --color-primary: #6441a5;
  --color-success: #1db954;
  --color-danger: #ff0000;
  --color-warning: #fffc00;
  --color-sky: #4ecdff;
  --color-darker: #171717;
  --color-light: #fafafa;
  --transition: all 0.3s ease;
  --shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  --borde-radius: 0.4rem;
}
/* reset default styling */
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-size: 62.5%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: var(--transition);
}
html{
  scroll-behavior: smooth;
}
/* font size is set to 62.5% so all the REM mesurment are based on 10px.
example : 1rem = 10px, 2.5rem = 25px, 5rem = 50px...
*/
body {
  font-family: 'DM Sans', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-darker);
  background-color: var(--color-light);
  height: 100vh;
  box-sizing: border-box;
}
/* ----- container ----- */
.container {
  margin: 0 auto;
  width: 1300px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}
@media (max-width: 1290px) {
  .container {
    width: 94%;
  }
}
.b-radius{
  border-radius: var(--borde-radius);
}
pre {
  border: 0;
  border-radius: var(--borde-radius);
  background: var(--color-darker);
  padding: 1rem;
  color: var(--color-light);
  font-family: Menlo, monospace;
}
pre code {
  font-family: Menlo, monospace;
  line-height: 1.2;
  font-size: 1.6rem;
}
/* ----- typography ----- */
h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
  margin-bottom: 1.6rem;
  font-weight: 900;
}
h1 {
  font-size: 3.4rem;
}
h2 {
  font-size: 3rem;
}
h3 {
  font-size: 2.6rem;
}
h4 {
  font-size: 2.2rem;
}
h5 {
  font-size: 1.8rem;
}
h6 {
  font-size: 1.4rem;
}
p{
  font-size: 1.6rem;
}
em {
  color: inherit;
  font-size: inherit;
}
b {
  text-transform: uppercase;
  color: inherit;
  font-size: 1.6rem;
  font-weight: 900;
}
s{
  font-size: 1.6rem;
  text-decoration: line-through;
}
p{
  margin-bottom: 0.6rem;
}
aside{
  font-size: inherit;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
mark {
  background: #eeff00;
  padding: 0 0.2rem;
  width: fit-content;
  font-size: inherit;
}
pre {
  border: 0;
  border-radius: var(--borde-radius);
  background: var(--color-darker);
  padding: 1rem;
  tab-size: 2;
  color: var(--color-light);
  font-family: Menlo, monospace;
}

pre code {
  font-family: Menlo, monospace;
  line-height: 1.2;
  font-size: 1.6rem;
}

/* ----- lists ----- */
ul,
ol {
  list-style-type: square;
  font-size: 1.6rem !important;
}
ul li ul {
  margin-bottom: 0;
}

ol li ol {
  margin-bottom: 0;
}
u{
  text-decoration: underline;
}
/* ----- links ----- */
a {
  font-size: 1.6rem;
  color: var(--color-primary);
}
a:hover {
  text-decoration: underline;
}
/* ----- buttons ----- */
button,
.btn-primary {
  display: inline-block;
  height: 3.8rem;
  padding: 0rem 3rem;
  color: var(--color-light);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 38px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--borde-radius);
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
  width: max-content;
  margin: 0.5rem 0rem;
  background-color: var(--color-primary);
  transition: var(--transition);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #5c3c97;
}

.btn-dark {
  background-color: var(--color-darker);
}
.btn-dark:hover,
.btn-dark:focus {
  background-color: #2e2e2e;
}
.btn-sky {
  background-color: var(--color-sky);
}
.btn-sky:hover,
.btn-sky:focus {
  background-color: #49c3f3;
}
.btn-clear {
  background-color: transparent;
  border: 0.1rem solid var(--color-darker);
  color: var(--color-darker);
}
.btn-clear:hover,
.btn-clear:focus {
  background-color: #eee;
}
.btn-danger {
  background-color: var(--color-danger);
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #eb0000;
}
.btn-success {
  background-color: var(--color-success);
}
.btn-success:hover,
.btn-success:focus {
  background-color: #1ca84d;
}
.btn-warning {
  color: var(--color-darker);
  background-color: var(--color-warning);
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: #f0ec00;
}
.btn-disabled {
  background-color: #eee;
  color: #4b4b4b;
  cursor: not-allowed;
}
.btn-disabled:hover {
  color: #eee;
}
.box {
  border-radius: 0;
}
.round {
  border-radius: 3.8rem;
}
.hov-1:hover {
  transform: scale(1.05);
}
.hov-2:hover {
  transform: translateY(-10%);
}
.shadow {
  box-shadow: var(--shadow);
}
/* ----- forms [ inputs & labels ] ----- */
label {
  font-size: 1.6rem;
  font-weight: 700;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-family: inherit;
  font-size: 1.4rem;
  width: 100%;
  height: 3.8rem;
  padding: 0.6rem 1.2rem; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid var(--color-darker);
  border-radius: var(--borde-radius);
  box-shadow: none;
  margin: 0.5rem 0rem;
}
textarea{
  height: max-content !important;
}
option{
  font-size: 1.6rem;
}
.i-error {
  border: 0.1rem solid var(--color-danger) !important;
}
.i-success {
  border: 0.1rem solid var(--color-success) !important;
}
/* ----- tables ----- */
table {
  width: 100%;
  text-align: left;
  border-radius: var(--borde-radius);
}
table tr th {
  font-weight: 900;
  padding: 0.4rem 0.8rem;
  background-color: var(--color-light);
}
table tr:nth-child(2n + 1) {
  background-color: #e7e7e75e;
} 
table tr td,
th {
  font-size: 1.8rem;
  padding: 0.4rem 0.8rem;
  border-bottom: 0.1rem solid var(--color-darker);
}
/* ----- width ----- */
.w-25 {
  width: 25%;
}
.w-50 {
  width: 50%;
}
.w-75 {
  width: 75%;
}
.w-100 {
  width: 100% ;
}
/* ----- height ----- */
.h-25 {
  height: 25%;
}
.h-50 {
  height: 50%;
}
.h-75 {
  height: 75%;
}
.h-100 {
  height: 100%;
}
/* ----- grid system ----- */
.grid {
  display: grid;
  grid-template-rows: auto;
}
.col-1 {
  grid-template-columns: 1fr;
}
.col-2 {
  grid-template-columns: 25% 75%;
}
.col-3 {
  grid-template-columns: repeat(3, 1fr);
}
.col-4 {
  grid-template-columns: repeat(4, 1fr);
}
.col-5 {
  grid-template-columns: repeat(5, 1fr);
}
.col-6 {
  grid-template-columns: repeat(6, 1fr);
}
.col-7 {
  grid-template-columns: repeat(7, 1fr);
}
.col-8 {
  grid-template-columns: repeat(8, 1fr);
}
.col-9 {
  grid-template-columns: repeat(9, 1fr);
}
.col-10 {
  grid-template-columns: repeat(10, 1fr);
}
.col-11 {
  grid-template-columns: repeat(11, 1fr);
}
.col-12 {
  grid-template-columns: repeat(12, 1fr);
}
.g-1 {
  gap: 1rem;
}
.g-2 {
  gap: 2rem;
}
.g-3 {
  gap: 3rem;
}
.g-4 {
  gap: 4rem;
}
.g-5 {
  gap: 5rem;
}
/* ----- flex system ----- */
.flex {
  display: flex;
}
.space-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}
.flex-col {
  flex-direction: column;
}
.flex-rev-row {
  flex-direction: row-reverse;
}
.flex-rev-col {
  flex-direction: column-reverse;
}

.vertical-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ----- display system ----- */
.block {
  display: block !important;
}
.inline {
  display: inline !important;
}
.inline-block {
  display: inline-block !important;
}
.hide {
  display: none !important;
}
/* ----- margins / paddings ----- */
/*----- margins ----- */
.m-1 {
  margin: 1rem;
}
.m-2 {
  margin: 2rem;
}
.m-3 {
  margin: 3rem;
}
.m-4 {
  margin: 4rem;
}
.m-5 {
  margin: 5rem;
}
/* -- margin top -- */
.mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}
.mt-4 {
  margin-top: 4rem;
}
.mt-5 {
  margin-top: 5rem;
}
/* -- margin bottom -- */
.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.mb-4 {
  margin-bottom: 4rem;
}
.mb-5 {
  margin-bottom: 5rem;
}
/* -- margin left -- */
.ml-1 {
  margin-left: 1rem;
}
.ml-2 {
  margin-left: 2rem;
}
.ml-3 {
  margin-left: 3rem;
}
.ml-4 {
  margin-left: 4rem;
}
.ml-5 {
  margin-left: 5rem;
}
/* -- margin right -- */
.mr-1 {
  margin-right: 1rem;
}
.mr-2 {
  margin-right: 2rem;
}
.mr-3 {
  margin-right: 3rem;
}
.mr-4 {
  margin-right: 4rem;
}
.mr-5 {
  margin-right: 5rem;
}
/*----- margins ----- */
.p-1 {
  padding: 1rem;
}
.p-2 {
  padding: 2rem;
}
.p-3 {
  padding: 3rem;
}
.p-4 {
  padding: 4rem;
}
.p-5 {
  padding: 5rem;
}
/* -- padding top -- */
.pt-1 {
  padding-top: 1rem;
}
.pt-2 {
  padding-top: 2rem;
}
.pt-3 {
  padding-top: 3rem;
}
.pt-4 {
  padding-top: 4rem;
}
.pt-5 {
  padding-top: 5rem;
}
/* -- padding bottom -- */
.pb-1 {
  padding-bottom: 1rem;
}
.pb-2 {
  padding-bottom: 2rem;
}
.pb-3 {
  padding-bottom: 3rem;
}
.pb-4 {
  padding-bottom: 4rem;
}
.pb-5 {
  padding-bottom: 5rem;
}
/* -- padding left -- */
.pl-1 {
  padding-left: 1rem;
}
.pl-2 {
  padding-left: 2rem;
}
.pl-3 {
  padding-left: 3rem;
}
.pl-4 {
  padding-left: 4rem;
}
.pl-5 {
  padding-left: 5rem;
}
/* -- padding right -- */
.pr-1 {
  padding-right: 1rem;
}
.pr-2 {
  padding-right: 2rem;
}
.pr-3 {
  padding-right: 3rem;
}
.pr-4 {
  padding-right: 4rem;
}
.pr-5 {
  padding-right: 5rem;
}
/* ----- responsive image ----- */
.r-img {
  max-width: 100%;
  height: auto;
}