globals.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root {
  --max-width: 1100px;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;

  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;


  /* colors */
  --primary-color:rgb(25, 110, 201);
  --secondary-color:rgb(0, 126, 148);
  --light-color:rgb(238, 238, 238);
  --lighter-color:rgb(209, 209, 209);
  --base-color:rgb(250, 250, 250);
  --dark-color:rgb(15, 15, 15);
  --slight-dark-color:rgb(43, 43, 43);
  --container-color:rgb(205, 201, 255);
  --active-color: #00dc30;
  --disabled-color: #e5e7e9;
  --alert-color: #ff2b2b;
  --warning-color:rgb(255, 222, 37);
  --hover-opacity: 0.5;
  --hover-primary: rgb(109, 167, 230);
  --hover-txt-primary: rgba(0, 0, 0, 0.9);
  --hover-secondary: rgb(235, 235, 235);
  --hover-txt-secondary: rgba(126, 126, 126, 0.5);
  --border-color:#616161;
  --hover-alert-color: #ff00009c;
  --hover-warning-color:rgba(255, 217, 0, 0.644);



  --hue-color: 115;
  --navbar-bg: hsl(var(--hue-color),60%,99%);
  --body-color: hsl(var(--hue-color),60%,99%);




  /* fonts */
  --body-font: "Poppins";
  --font-medium: 400;
  --font-semi-bold: 600;

  --big-font-size: 3rem; /*48px*/
  --h1-font-size: 2.25rem; /*36px*/
  --h2-font-size: 1.5rem; /*24px*/
  --h3-font-size: 1.25rem; /*20px*/
  --large-font-size: 1.125rem; /*18px*/
  --normal-font-size: 1rem; /*16px*/
  --small-font-size: .875rem; /*14px*/
  --smaller-font-size: .813rem; /*13px*/
  --smallest-font-size: .75rem; /*12px*/
  /* --smallest-font-size: .688rem; */


  --primary-glow: conic-gradient(
    from 180deg at 50% 50%,
    #16abff33 0deg,
    #0885ff33 55deg,
    #54d6ff33 120deg,
    #0071ff33 160deg,
    transparent 360deg
  );
  --secondary-glow: radial-gradient(
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );

  --tile-start-rgb: 239, 245, 249;
  --tile-end-rgb: 228, 232, 233;
  --tile-border: conic-gradient(
    #00000080,
    #00000040,
    #00000030,
    #00000020,
    #00000010,
    #00000010,
    #00000080
  );

  --callout-rgb: 238, 240, 241;
  --callout-border-rgb: 172, 175, 176;
  --card-rgb: 180, 185, 188;
  --card-border-rgb: 131, 134, 135;


  /* padding */
  --pd-header-footer: 20px 100px;


}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;

    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(
      to bottom right,
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0.3)
    );

    --tile-start-rgb: 2, 13, 46;
    --tile-end-rgb: 2, 5, 19;
    --tile-border: conic-gradient(
      #ffffff80,
      #ffffff40,
      #ffffff30,
      #ffffff20,
      #ffffff10,
      #ffffff10,
      #ffffff80
    );

    --callout-rgb: 20, 20, 20;
    --callout-border-rgb: 108, 108, 108;
    --card-rgb: 100, 100, 100;
    --card-border-rgb: 200, 200, 200;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  /* color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb)); */
    font-family: var(--body-font);
    color:var(--slight-dark-color) ;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}


/* ============================================================================CUSTOM=============================================================== */

/* margins */
.m-10{
  margin: 10px;
}
.m-20{
  margin: 20px;
}
.m-30{
  margin: 30px;
}
.m-40{
  margin: 40px;
}
.m-50{
  margin: 50px;
}
.m-100{
  margin: 100px;
}


/* margin top */
.m-t-10{
  margin-top: 10px;
}
.m-t-20{
  margin-top: 20px;
}
.m-t-30{
  margin-top: 30px;
}
.m-t-40{
  margin-top: 40px;
}
.m-t-50{
  margin-top: 50px;
}
.m-t-100{
  margin-top: 100px;
}
.m-t-150{
  margin-top: 150px;
}
.m-t-200{
  margin-top: 200px;
}



/* margin bottom */
.m-b-10{
  margin-bottom: 10px;
}
.m-b-20{
  margin-bottom: 20px;
}
.m-b-30{
  margin-bottom: 30px;
}
.m-b-40{
  margin-bottom: 40px;
}
.m-b-50{
  margin-bottom: 50px;
}
.m-b-100{
  margin-bottom: 100px;
}
.m-b-150{
  margin-bottom: 150px;
}
.m-b-200{
  margin-bottom: 200px;
}




.error{
  color: var(--alert-color);
  font-size: var(--small-font-size);
}

.container {
  padding: 20px 100px;
}

.wrapRecentPosts{
  margin-top: 50px;
}

.parallaxImg{
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  /* height: 100vh; */
  aspect-ratio: 2/0.6;
}

/* .parallaxImg::after{
  content: "";
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
} */

.titleHero{
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.layer{
  /* background-color: rgba(48, 48, 48, 0.466); */
  background-image: linear-gradient(to bottom right, rgba(14, 14, 26, 0.87) , rgba(3, 0, 80, 0.295));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
}


.wrapperHero{
  /* border: 1px solid red; */
  display: flex;
  /* align-items: center; */
  justify-content: center;
  gap:20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  margin-bottom: 50px;

}

.imgHero{
  width: max(50%,500px);
  height: auto;
  object-fit: cover;
}

.wrapperCard{
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  padding-inline: 5vw;
}

.divider{
  /* color: var(--border-color); */
  margin: 20px 0 30px 0;  
  /* border-bottom: 3px solid rgba(155, 155, 155, 0.25); */
  border-bottom: 3px solid #eee;
}

.section_title{
  font-size: var(--h1-font-size);
  text-align: center;
  font-weight: bold;
  color: var(--border-color);
}

.heroBg{
  /* height: 300px; */
  width: 100vw;
  aspect-ratio: 2/0.6;
  object-fit: cover;
}

.carousel{
  overflow-x: auto;
  display: flex;
  gap: 15px;
}

.carouselItem{
  width: 350px;
}




/* =======================BUTTON========================= */
.button {
  border: none;
  text-decoration: none;
  margin: 3px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(160, 160, 160, 0.4);
  text-transform: capitalize;
  background-color: var(--base-color);

  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.button:hover {
  background-color: var(--disabled-color);
  color: black;
  /* transform: scale(1.1); */
}


/* ---------------- style -----------------------*/
.btn--primary--solid {
  background-color: var(--primary-color);
  color: white;
}
.btn--primary--solid:hover {
  /* background-color: var(--hover-primary);
  color: var(--hover-txt-primary); */
  /* border: 1px solid var(--primary-color); */

  background-color: var(--hover-primary);
  color: white;

  /* color: var(--primary-color);
  background-color: var(--base-color); */
}

.btn--primary--outline {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background-color: var(--base-color);
}
.btn--primary--outline:hover {
  background-color: var(--hover-primary);
}


.btn--alert--solid {
  background-color: var(--alert-color);
  color: black;
}
.btn--alert--solid:hover {
  background-color: var(--hover-alert-color);
  color: var(--hover-txt-primary);
}
.btn--warning--solid {
  background-color: var(--warning-color);
  color: black;
}
.btn--warning--solid:hover {
  background-color: var(--hover-warning-color);
  color: var(--hover-txt-primary);
}

/* ---------------- end style -----------------------*/


/* ---------------- size -----------------------*/
.btn--small {
  padding: 5px 15px;
  font-size: 12px;
}
.btn--medium {
  padding: 8px 20px;
  font-size: 14px;
}

.btn--large {
  padding: 11px 30px;
  font-size: 14px;
}

/* ---------------- end size -----------------------*/


/* =======================END BUTTON========================= */



/* sm mobile */
@media (max-width: 576px) {
  .container {
    padding: 20px 30px;
  }

  .section_title{
    font-size: var(--h3-font-size);
  }

  .wrapperCard{
    flex-direction: column;
    padding-inline: 0;
  }

  .btn--large {
    padding: 8px 20px;
    font-size: 14px;
  }
  .btn--medium {
    padding: 5px 15px;
    font-size: 12px;
  }
  .parallaxImg{    
    aspect-ratio: 2/1;
  }
  .titleHero{
    font-size: var(--small-font-size);
    width: 95%;
  }

  .page-item{
    padding: 5px;
    font-size: var(--smallest-font-size);
  }
  
  .pagination{
    flex-wrap: wrap;
  }

  .carouselItem{
    width:400px ;
  }

}

/* tablet / ipad */
@media (min-width: 577px) and (max-width: 991px) {
  .container {
    padding: 20px 40px;
  }

  .section_title{
    font-size: var(--h2-font-size);
  }

  .wrapperCard{   
    padding-inline: 0;
  }
  .btn--large {
    padding: 8px 20px;
    font-size: 14px;
  }
  .btn--medium {
    padding: 5px 15px;
    font-size: 12px;
  }
  .parallaxImg{    
    aspect-ratio: 2/1;
  }
  .titleHero{
    width: 95%;
  }
}




/* ===============PAGINATION============= */

.pagination__link--active{
  background-color:var(--primary-color) ;
}
.pagination__link--disabled{
  /* visibility: hidden; */
  display: none;
  background-color:rgba(228, 228, 228, 0.678);
  color: grey;
}

/* ul */
.pagination{
  border:1px solid #dee2e6;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  list-style: none;
  
  /* box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
  /* background-color: rgb(255, 255, 255); */
  padding-inline: 0.75rem;
  padding-block: 0.375rem;
}

/* li */
.page-item{
  border:1px solid rgb(195, 195, 255);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}


.page-item:not(:first-child) 
.page-link{margin-left:-1px}

.page-item:first-child 
.page-link{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.page-item:last-child 
.page-link{
  border-top-left-radius:0.375rem;
  border-bottom-left-radius:0.375rem;
}
/* a */
.page-link{
  /* border:1px solid green; */
  text-decoration: none;
  position:relative;
  display:block;
  padding: 0.25rem 0.5rem;

  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.page-item:hover{
  background-color: rgb(196, 196, 196);
}


/* ============================FORMS============================= */


.form-group{
  /* border: 1px solid red; */
  margin-bottom: 20px;
}

.form-input{
  display: block;
  width: 100%;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid rgb(119, 119, 119);
  border-style: solid;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  margin-top: 10px ;
}
.form-input-area{
  padding: 5px;
  width: 100%;
  height: auto;
  resize: none;
  border-radius: 3px;
  border: 1px solid rgb(119, 119, 119);
  border-style: solid;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  margin-top: 10px ;
}

.radio-group{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.radio{
  display: block;
}

.form-input-radio{
  margin-right: 5px;
}

.combobox{
  display: block;
  margin-top: 10px;
  padding: 5px;
}

/* ============================== LISTS ================================= */

/* Vertical */

.pd-lg-liV{
  padding: 5px 100px;
}
.pd-liV{
  padding: 5px 40px;
}
.pd-sm-liV{
  padding: 5px 30px;
}

.liV{
  list-style: none;
  cursor: pointer;
}

.liV:hover{
  background-color: var(--hover-primary);
}

.ulV .liV a,
.itemListV{
  text-decoration: none;
}


/* Horizontal */




/* ==================== TABLES ================== */

.tableWrap{
  /* border: 1px solid blue; */
  
  width: 75vw;
  overflow-x: scroll;
  /* display: block; */
  /* white-space: nowrap; */

}

table{
  /* border: 1px solid red; */
  /* table-layout: fixed; */
  width: 100%;
  margin-top: 30px;
}


thead tr th {
  background-color: var(--primary-color);
}

th{
  text-align: center;
  color: var(--base-color);
}

td, th {
  border: 1px solid #dddddd;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.colActions{
  display: flex;
  gap: 10px;
}

.titlePostTable,
.bodyPostTable{  
   white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


}