@import url('main.css');

footer{
  align-items: end;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding: 2rem;
  padding-top: 0;
}

h1{
  font-size: 3rem;
  margin: 0;
}

header{
  align-items: center;
  display: flex;
  gap: 0.75rem;
  height: var(--top-bar-height);
  padding: 2rem;
}
header > img{
  width: 75px;
}

main{
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: calc(100vh - var(--top-bar-height) - 4rem);
}

nav{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 2rem;
}

.section-content{
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  height: 100px;
  padding: 1rem;
  width: 300px;
}
.section-content > div:last-child{
  font-size: 0.9rem;
}

.section-link{
  color: var(--text-color);
  text-decoration: none;
}

.section-title{
  align-items: center;
  display: flex;
  gap: 0.5rem;
}
.section-title > div{
  font-size: 2rem;
  font-weight: bold;
}
.section-title > svg{
  height: 35px;
  width: 35px;
}

.subtitol{
  font-size: 0.9rem;
  padding-left: 0.2rem;
}

#fons-aplicacions{
  background-color: var(--color-aplicacions);
}

#fons-jocs{
  background-color: var(--color-jocs);
}

#fons-educacio{
  background-color: var(--color-educacio);
}

#fons-novetats{
  background-color: var(--color-novetats);
}

#fons-contacte{
  background-color: var(--color-contacte);
}

#icon-aplicacions{
  stroke: var(--icon-aplicacions);
}

#icon-jocs{
  stroke: var(--icon-jocs);
}

#icon-educacio{
  stroke: var(--icon-educacio);
}

#icon-novetats{
  stroke: var(--icon-novetats);
}

#icon-contacte{
  stroke: var(--icon-contacte);
}