*{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --primary-color: #ddd;
    --secondary-color: #111;
}

body {
    background-color: var(--primary-color);
    overflow: hidden;
    color: var(--primary-color);
}

#cardBartek {
  position: absolute;
  top: 5vh;
  left: 1vw;
  width: 30vh;
  height: 30vh;
  background-color: var(--secondary-color);
  overflow: hidden;
  border-radius: 2rem;
  transition: width 0.1s ease-in-out;
  transition: width 0.1s, background-color 1s;
}

#cardDawid {
  position: absolute;
  top: 36vh;
  left: 1vw;
  width: 30vh;
  height: 30vh;
  background-color: var(--secondary-color);
  overflow: hidden;
  border-radius: 2rem;
  transition: width 0.1s ease-in-out;
  transition: width 0.1s, background-color 1s;
}

#cardDamian {
  position: absolute;
  top: 67vh;
  left: 1vw;
  width: 30vh;
  height: 30vh;
  background-color: var(--secondary-color);
  overflow: hidden;
  border-radius: 2rem;
  transition: width 0.1s, background-color 1s;
}

.bufor {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 30vh;
    height: 30vh;
    border-radius: 2rem;
}

img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10vw;
  height: auto;
  transform: translate(-50%,-50%);
  overflow: hidden;
  border-radius: 10rem;
}
.teamName {
  position: absolute;
  left: 120%;
  top: 15%;
  font-size: xx-large;
  width: auto;
}
.teamDesc {
  position: absolute;
  left: 120%;
  top: 35%;
  font-size: x-large;
  background-color: #FF0000;
}

#theme {
  position: absolute;
  width: auto;
  height: auto;
  padding: 10px;
  font-size: 30px;
  border-radius: 1rem 0rem 0rem 1rem;
  right: 0%;
  bottom: 5%;
  background-color: var(--secondary-color);
  transition: background-color 1s;
}