/* Font imports */
@font-face {
	font-family: Gilroy;
	src: url("fonts/Gilroy-ExtraBold.ttf");
}
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); */

:root {
  --border-radius: 10px;
}

body {
	font-family: 'Lato', sans-serif;
	margin: 0;
  padding: 0;
  background-color: var(--background);
  color: var(--body);
}
::selection {
    background-color: rgb(255, 0, 140);
    color: #ffffff;
}

/* Font sizing */
h1, h1 a {
  font-size: calc(1.355rem + 1.26vw);
}
@media (min-width: 1200px) {
  h1, h1 a {
    font-size: 2.3rem;
  }
}

h2, h2 a {
  font-size: calc(1.295rem + 0.54vw);
}
@media (min-width: 1200px) {
  h2, h2 a {
    font-size: 1.7rem;
  }
}

h3, h3 a {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h3, h3 a {
    font-size: 1.5rem;
  }
}

h4, h4 a {
  font-size: 1.2rem;
}

h5, h5 a {
  font-size: 0.9rem;
}

h6 , h6 a {
    font-size: 1rem;
}

p, p a {
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 23px
}

p a {
    font-weight: 600;
}

/* Font family */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-family: Gilroy;
}

/* Font styling */
a {
    text-decoration: none;
    color: var(--body);
    box-shadow: inset 0 -5px 0 var(--link-underline);
    transition: 0.2s;
    padding: 0 2px;
    font-weight: 400;
}
a:hover {
    box-shadow: inset 0 -20px 0 var(--link-underline);
    color: #fcfcfc;
}

hr {
  width: 90%;
  margin: 30px auto;
  height: 1px;
  border: none;
  background-color: var(--body);
}

.mono {
    font-family: Space Mono;
    font-weight: 400;
}
.bold {
    font-weight: bold;
}
.italic {
  font-style: italic;
}
.center {
    text-align: center;
}
.no-link-effect {
  box-shadow: none;
}
.no-link-effect:hover {
  box-shadow: none;
  color: var(--body)
}

/* All images */
img {
    width: 100%;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
}

.width-restriction {
    width: 90%;
    margin: 0 auto
}

/* Columns and screen definitions*/
.col-container {
    width: 100%;
    display: inline;
}

.col-2 {
    width: 49%;
    display: inline-block;
    vertical-align: top;
}
.col-4 {
    width: 25%;
    display: inline-block;
    vertical-align: top;
}

.small-screen, .mid-screen, .large-screen {
    display: none;
}

@media screen and (max-width: 600px) {
    .small-screen {
        display: block;
    }
}

@media screen and (min-width: 601px) and (max-width: 850px) {
    .mid-screen {
        display: block;
    }
}

@media screen and (min-width: 851px) {
    .large-screen {
        display: block;
    }
}

/* Gradients defined */
.gradient {
  width: 80%;
  height: 7px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
.yellow-orange {
  background-image: linear-gradient(90deg, #fad961 0%, #ffb042 100%);
}
.orange-purple {
  background-image: linear-gradient(90deg, #ffb042 0%, #e046de 100%);
}
.purple-blue {
  background-image: linear-gradient(90deg, #e046de 0%, #52a0ff 100%);
}
.blue-fusia {
  background-image: linear-gradient(90deg, #52a0ff 0%, #ff4ab4 100%);
}
.fusia-yellow {
  background-image: linear-gradient(90deg, #ff4ab4 0%, #fff34a 100%);
}
.yellow-cyan {
  background-image: linear-gradient(90deg, #fff34a 0%, #0df5ff 100%);
}
.blue-green {
  background-image: linear-gradient(90deg, #0df5ff 0%, #48f583 100%);
}

/* Cards */
.card {
    width: 95%;
    border: none;
    padding: 30px 0px;
    margin: 0 auto;
    margin-top: 30px;
    background-color: var(--card-background);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}
.card .width-restriction {
    width: 85%
}
.card h6 {
    font-family: Lato;
    font-size: 0.9rem;
    margin: 10px 0px;
}
.card p {
    line-height: 23px;
    font-size: 0.9rem;
    color: var(--body);
    margin-top: 5px;
    margin-bottom: 10px;
}
.card .tags {
    display: inline-block;
    cursor: default;
}
.card .tags .tag {
    display: inline-block;
    padding: 0px 10px;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 7px;
    transition: 0.2s;
    background-color: var(--tag-background);
    border: 2px solid var(--tag-outline)
}
.card .tags .tag p {
    font-size: 0.7rem;
    margin-top: 0;
    margin-bottom: 0;
}
/* a {
    box-shadow: inset 0 -5px 0 rgb(255, 0, 140);
    transition: 0.2s;
    padding: 0 2px;
    font-weight: 400;
}
a:hover {
    box-shadow: inset 0 -20px 0 rgb(255, 0, 140);
} */

.card .progress-bar-container {
    width: 100%;
    border-radius: 10px;
    height: 15px;
    background-color: #969595;
}
.card .progress-bar {
    position: relative;
    top: 0;
    border-radius: 10px;
    height: 15px;
}