:root {
  --primaryColor: #131415;
  --secondaryColor: #1f5d7d;
  --tertiaryColor: #76b5c5;
  --quaColor: #303236;
}

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

button:focus {
  outline: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter';
  transition: all 0.1s linear;
  background-color: var(--primaryColor);
}

img {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a:hover {
  text-decoration: none;
  color: unset !important;
}

br {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media only screen and (min-width: 640px) {
  .section {
    padding-top: 3%;
    padding-bottom: 3%;
  }
  .blackText {
    font-size: 55px;
  }
  .sectionGrid {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto;
    grid-gap: 6%;
  }

  .sectionGridItemRight {
    justify-self: end;
  }
}

@media only screen and (max-width: 640px) {
  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .blackText {
    font-size: 40px;
  }
  .sectionGridItemRight {
    padding-top: 1em;
  }
  .sidebar {
    background-color: var(--primaryColor);
  }
}

nav {
  /*background-color: var(--primaryColor);*/
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.blackText {
  font-weight: 800;
  line-height: 1.2em;
}

.extraBoldText {
  font-weight: 800;
  font-size: 35px;
}

.boldText {
  font-weight: 500;
  font-size: 25px;
}

.regularTextBold {
  font-weight: 600;
  font-size: 23px;
}

.regularTextIta {
  font-weight: 400;
  font-size: 20px;
}

.regularText {
  font-weight: 500;
  font-size: 20px;
}

.normalTextBold {
  font-weight: 600;
  font-size: 16px;
}

.normalText {
  font-weight: 500;
  font-size: 16px;
}

.smallTextBold {
  font-weight: 600;
  font-size: 16px;
}

.smallText {
  font-weight: 400;
  font-size: 16px;
}

.gradientBg {
  background-image: linear-gradient(
    to right,
    var(--secondaryColor),
    var(--tertiaryColor)
  );
}

.blackBg {
  background-color: #000;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s linear;
}

.secBg {
  background-color: transparent;
  transition: all 0.3s linear;
}

.secBg:hover {
  background-color: #fff;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s linear;
}

.blackBg:hover {
  background-color: #fff;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s linear;
}

.coloredBg:hover {
  background-color: var(--secondaryColor);
}

.gradientColor {
  background: linear-gradient(
    to right,
    var(--secondaryColor),
    var(--tertiaryColor)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradientUnderlineWH {
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: var(--secondaryColor);
}

.gradientUnderline:hover {
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: var(--secondaryColor);
}

.whiteUnderline:hover {
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: white;
}

.customHr {
  border: 1px solid var(--quaColor);
  opacity: 70%;
}

.card {
  border-top: 1px solid var(--quaColor);
}

.cardWBg {
  background-color: #2c2c30;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.sidebar {
  border-right: 1px solid var(--quaColor);
}

.blackBgActive {
  background-color: #fff;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s linear;
  color: #000;
}

.blackBgActive {
  background-color: #fff;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s linear;
}