@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

:root {
  --primary-color: #9d0d0d;
  --primary-color-2: #ce0d14;
  --secondary-color: #6b6b6b;
}

html, body {
  font-family: 'Roboto', sans-serif;
}

header {
  text-align: center;
  padding: 3rem 1rem 1rem 1rem;
}

.page-title{
  font-family: 'MuseoModerno';
  background: linear-gradient(45deg, var(--primary-color), var(--primary-color-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.projects{
  margin: 0rem 4rem;
  padding: 2rem 0rem;
}

.shadow-inner{
  box-shadow: inset 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.shadow-outer{
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* .projects-title {} */

.projects-contents {
  margin: 2rem;
  gap: 1rem;
}

.project {
  width: 24rem;
}

.project-img {
  height: 16rem;
  object-fit: cover;
}

.project-title {
  height: 5rem;
}

.project-text {
  height: 8rem;
}

.open-sample-button-div {
  margin: 0rem;
}

.open-sample-button {
  background: linear-gradient(45deg, var(--primary-color), var(--primary-color-2));
  border: none;
  vertical-align: middle;
}

.social {
  padding: 0.8rem 0rem 0rem 0rem;
  gap: 1rem;
}

.icon-youtube {
  padding: 0.2rem;
  height: 4rem;
}

.icon-github {
  padding: 0.6rem;
  height: 4rem;
}

.icon-pdf {
  padding: 0.6rem;
  height: 4rem;
  filter: invert(10%) sepia(85%) saturate(6555%) hue-rotate(3deg) brightness(82%) contrast(112%); /* #B80000 converted by https://codepen.io/sosuke/pen/Pjoqqp */
}

.button-mail {
  width: 4rem;
  height: 3rem;
  margin: 1rem;
}

.icon-mail {
  width: 2rem;
  height: 2rem;
  filter: invert(0%) sepia(100%) saturate(7441%) hue-rotate(175deg) brightness(104%) contrast(112%);  /* #000000 converted by https://codepen.io/sosuke/pen/Pjoqqp */
}

a:hover {
  opacity: 0.5;
  transition: 0.3s;
}

footer {
  text-align: center;
  padding: 1rem 1rem 3rem 1rem;
}