@font-face {
  font-family: Opensans Variablefont Wdth Wght;
  src: url('../images/') format("truetype");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Opensans Variablefont Wdth Wght;
  src: url('../images/') format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-color: whitesmoke;
  --text-color: #686868;
  --black-color: #111818;
  --heading-font: Comfortaa, sans-serif;
  --text-font: "Opensans Variablefont Wdth Wght", Tahoma, sans-serif;
  --dark-blue-color: #3d9fd9;
  --light-blue-color: #63c5f0;
  --dark-green-color: #74bc43;
  --light-green-color: #bdd639;
}

.body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: Opensans Variablefont Wdth Wght, Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 300;
}

.page-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100svw;
  height: 100svh;
  display: flex;
}

.image {
  width: 75svw;
  max-width: 400px;
  margin-bottom: 40px;
}

.text-block {
  color: var(--black-color);
}


@font-face {
  font-family: 'Opensans Variablefont Wdth Wght';
  src: url('../images/') format('truetype');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Opensans Variablefont Wdth Wght';
  src: url('../images/') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}