:root {
  --body-background: #f2f2f2;
  --border: 1px solid #cfcfcf;
  --download-button-color: red;
  --icons-color: rgb(94, 91, 91);
  --menu-mobile-background-color: white;
  --navbar-shallow-color: #e5e5e5;
  --primary-color: #277dce;
  --section-background-color: #fff;
  --text-color-gray: gray;
  --text-color-inverse: white;
  --text-color: black;
  --theme-color: white;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: ease-in-out 0.2s;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--body-background);
  color: var(--text-color);
  font-family: 'Montserrat', 'sans-serif';
  padding-top: 70px;
  text-align: justify;
}

/* Start Flex-box */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }

.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-start { align-items: flex-start; }

.justify-around { justify-content: space-around; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }

.gap-2 {gap: 2px;}
.gap-3 {gap: 3px;}
.gap-5 {gap: 5px;}
.gap-7 {gap: 7px;}
.gap-10 {gap: 10px;}
.gap-15 {gap: 15px;}
.gap-20 {gap: 20px;}
/* End Flex-box */

/* Start Border Options */
.bd-bottom {
  border-bottom: var(--border);
}
/* End Border Options */

/* Start Text-options */
.txt-bold { font-weight: bold; }
.txt-color-gray { color: var(--text-color-gray); }
.txt-medium { font-weight: 500;}
/* End Text-options */

@media print {
  @page {
    size: A4;
    margin: 10px;
  }

  * { border: none !important; }

  body {
    padding-top: 5px;
  }

  .cv {
    width: 100%;
    max-width: auto;
  }

  div.cv.flex-col.gap-7, div.cards-container.flex-col.gap-20, div#hero-info-container {
    gap: 0 !important;
  }

  .section {
    background-color: var(--theme-color);
    border-radius: 0px;
    padding: 5px;
}

  #tech-cards-container {
    flex-direction: row !important;
  }

  #navbar,
  #hero-img, 
  #courses, 
  #footer,
  img {
    display: none;
  }
  
}