* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Rubik", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: Rubik, sans-serif;
  font-weight: 500;
}

h1 > a {
  font-family: Rubik, sans-serif;
  font-weight: 500;
  color: black;
}

h1 > a:hover {
  text-decoration: underline;
}

h4 > span {
  font-weight: bold;
  color: #9cb84f;
}

.pill {
  z-index: 0;
  position: fixed;
  width: 816.74px;
  height: 269.04px;
  left: 340px;
  top: 650px;
  background: linear-gradient(
    270deg,
    #c7c148 2.59%,
    rgba(79, 180, 149, 0.856) 76.56%,
    rgba(35, 66, 180, 0.701) 76.57%
  );
  border-radius: 2000px;
  transform: rotate(-45deg);
}

.pill-2 {
  z-index: -1;
  position: fixed;
  width: 1216.74px;
  height: 269.04px;
  left: 540px;
  top: 350px;
  background: linear-gradient(
    270deg,
    #c7c148 2.59%,
    rgba(79, 180, 149, 0.56) 76.56%
  );
  border-radius: 2000px;
  transform: rotate(45deg);
}

.main-row {
  height: 100vh;
}

.about {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(100px);
  z-index: 3;
}

button.tag {
  background: rgb(206, 207, 206);
  transition: background 0.5s ease-out;
  -webkit-transition: background 0.5s ease-out;
  -o-transition: background 0.5s ease-out;
  -moz-transition: background 0.5s ease-out;
}

button.tag:hover {
  color: white;
  background: linear-gradient(
    90deg,
    rgb(145, 105, 105),
    rgb(170, 148, 108),
    rgb(124, 124, 124),
    rgb(113, 117, 113),
    rgb(118, 118, 192),
    rgb(199, 118, 199)
  ) !important;
}

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

.page-selector {
  background-color: rgb(231, 231, 231);
  color: grey;
}

.page.active {
  background-color: white;
}

.page.active:hover {
  background-color: white;
}

.page.active > a {
  color: black;
}

a.active {
  color: black;
}

.page {
  transition: background-color 0.2s ease-in;
  border-radius: 20px;
}

.page:hover {
  cursor: pointer;
  background-color: rgb(204, 204, 204);
}

.education {
  background-color: rgb(245, 245, 245);
}

a.uni-link,
.modal-body > a {
  text-decoration: underline;
  color: #7d792f;
}

.skills {
  margin-top: 15.5em;
}

.progress-line {
  position: relative;
  border-bottom: 1px solid grey;
}

.progress-box {
  position: absolute;
  top: -15px;
  background-color: white;
  border-radius: 10px;
  padding: 3px 10px;
  border: 1px solid black;
}

.progress-box.inactive {
  color: grey;
}

.footer {
  position: relative;
  background-color: rgb(111, 111, 111, 0.5);
  backdrop-filter: blur(100px);
}

.github {
  background-image: url("/img/github.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 50px;
  z-index: 3;
  filter: invert(100%) opacity(80%);
  transition: filter 0.5s ease;
}

.linkedin {
  background-image: url("/img/linkedin.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 50px;
  z-index: 3;
  filter: grayscale(100%) opacity(80%);
  transition: filter 0.5s ease;
  position: relative;
}

a.cover-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.gdev {
  background-image: url("/img/gdev.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 50px;
  z-index: 3;
  filter: grayscale(100%) opacity(80%) contrast(100%);
  transition: filter 0.5s ease;
}

.gdev:hover,
.linkedin:hover {
  filter: none;
  cursor: pointer;
}

.github:hover {
  filter: invert(100%) opacity(100%);
  cursor: pointer;
}

.contact {
  z-index: 2;
  color: white;
  margin-left: auto;
  text-align: right;
}

.contact > a {
  color: white;
  text-decoration: underline;
}

.card {
  background-color: rgb(245, 245, 245, 0.5);
  backdrop-filter: blur(100px);
}

.screenshot-description {
  color: grey;
  font-style: italic;
}

.modal-body > div {
  height: 500px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.profesori {
  background-image: url("/img/profesori.jpg");
}

.profesori-1 {
  background-image: url("/img/profesori1.jpg");
}

.profesori-2 {
  background-image: url("/img/profesori2.jpg");
}

.profesori-3 {
  background-image: url("/img/profesori3.jpg");
}

.profesori-4 {
  background-image: url("/img/profesori4.png");
}

.digit {
  background-image: url("/img/digit.png");
}

.digit-1 {
  background-image: url("/img/digit1.png");
}

.digit-2 {
  background-image: url("/img/digit2.png");
}

.digit-3 {
  background-image: url("/img/digit3.png");
}

.kg {
  background-image: url("/img/kg.png");
}

.kg-1 {
  background-image: url("/img/kg1.png");
}

.kg-2 {
  background-image: url("/img/kg2.png");
}

.raffleshop {
  background-image: url("/img/raffleshop.png");
}

.raffleshop-1 {
  background-image: url("/img/raffleshop1.png");
}

.raffleshop-2 {
  background-image: url("/img/raffleshop2.png");
}

.raffleshop-3 {
  background-image: url("/img/raffleshop3.png");
}

.raffleshop-4 {
  background-image: url("/img/raffleshop4.png");
}

.raffleshop-5 {
  background-image: url("/img/raffleshop5.png");
}

h5:hover {
  text-decoration: underline;
  cursor: pointer;
}

.card > img {
  transition: opacity 0.2s ease-in;
}

.card > img:hover {
  opacity: 70%;
  cursor: pointer;
}

.taglink:active {
  color: white;
}

@media (max-width: 576px) {
  .modal-body a {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .page {
    max-width: 100px;
  }
}

@media only screen and (max-width: 992px) {
  .skills {
    margin-top: 0;
    margin-bottom: 2.5em;
  }

  .education {
    padding-bottom: 2.5em;
  }

  .contact > svg {
    transform: translate(-15px);
  }

  .modal-body > div {
    height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media only screen and (max-width: 1500px) {
  .education {
    z-index: 1;
    background-color: rgb(245, 245, 245, 0.5);
    backdrop-filter: blur(100px);
  }
}