@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* 
https://colorhunt.co/palette/0820322c394b334756ff4c29
#082032 rgb(8, 32, 50)
#2C394B rgb(44, 57, 75)
#334756 rgb(51, 71, 86)
#FF4C29 rgb(255, 76, 41) 
*/

:root {
  --font-1: "Raleway", sans-serif;
  --font-2: "Montserrat", sans-serif;
  --font-3: "Open Sans", sans-serif;
  --font-4: "Poppins", sans-serif;
  /* https://colorhunt.co/palette/0820322c394b334756ff4c29 */
  --color1: #082032;
  --color2: #2c394b;
  --color3: #334756;
  --color4: #ff4c29;
  --color5: #e76161;
  --color6: #eaecee;
  --color7: #444b61;

  --color-text: #222;
  --color-grid-title: #c6c9d4;
  --color-grid-desc: #acb0be;
  --color-button1-text: #ddd;
  --color-button1-hover: #222;
  --color-copyright: #ddd;
  /*  */
  --back-text: #082032;
  /* #606e78; */
  /* #eee; */
  /* #292d3d; */
  /* #23252F; */

  /* #1c202a; */
  /* #23252f; */
  /* #1c1f29; */
  --back-header: #2c394b;
  /* #456990; */
  /* #262a38; */
  --back-headline: #eaecee;
  /* dae2ed; */

  --back-side: #334756;
  --back-grid-image: #262a38;
  --back-button1: #313647;
  --back-button1-hover: #d1d2d4;
  --back-arrow: #a4a5a9;
  --back-arrow-hover: #e8e8e9;
  /*  */
  --shadow-header: rgba(0, 0, 0, 0.1);
  /*  */
  --border-grid-wrapper: #d1d2d4;
  --border-grid-image: #262a38;
  --border-arrow: #262a38;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--back-text);
  /* padding: 1rem; */
  /*  */
  font-family: var(--font-1);
  font-size: 14px;
  line-height: 1.42857;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* Background Grid Lines */
  /* background-size: 100px 100px; */
  /* background-image: linear-gradient(rgb(213, 219, 210) 1px, transparent 1px),
    linear-gradient(to right, rgb(213, 219, 210) 1px, transparent 1px); */
  /* background-color: rgb(255, 255, 255); */
}

/* Hide the body scrollbar when the left-bar is opened */
body.side-open {
  overflow: hidden;
  /* border: 2px solid green; */
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  /* border: 1px dashed red; */
}

@media (min-width: 500px) {
  .container {
    max-width: 95%;
  }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.main-footer {
  margin-top: 1rem;
  margin-bottom: 5rem;
  text-align: center;
  font-family: var(--font-2);
  font-size: 0.8rem;
  color: var(--color-copyright);
  letter-spacing: 1px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* Scroll Bar */
/* - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* width */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* box-shadow: inset 0 0 5px grey;
        border-radius: 10px; */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #313649;
  border-radius: 15px;
}

/* Hover */
::-webkit-scrollbar-thumb:hover {
  background: gray;
}