@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Widges";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../font/Widges-Demo.ttf") format("truetype");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 100%;
  font-family: "Roboto", sans-serif;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  width: 75vw;
  margin-left: auto;
  margin-right: auto;
}

.hr {
  height: 2px;
  background-color: #fce903;
  width: 50%;
  margin: 2rem auto;
}

.card{
  min-height: 21rem;
}

.bg-img {
  width: 100%;
  min-height: 25rem;
  background-image: url("../image/handwerker-mit-tablet.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}