@font-face {
  font-family: "font-1";
  src: url(../fonts/Bodoni/Libre_Bodoni/LibreBodoni-VariableFont_wght.ttf);
}

:root {
  --darkColor: rgb(40, 40, 40);
}

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

  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-out;

    /* Remove the blue highlight when click in android chrome */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  cursor: pointer;

  /* Remove the blue highlight when click in android chrome */
  /* -webkit-tap-highlight-color: transparent; */
}

*:focus {
  outline: none !important;
}

  /* Remove the blue highlight when click in android chrome */
.noSelect {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.noSelect:focus {
  outline: none !important;
}

body {
  /* background-color: gray; */
  background-color: whitesmoke;
}

.container {
  width: 90vw;
  height: 90vh;

  margin: auto;
  margin-top: 5vh;
  margin-bottom: 5vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 6vw;
  font-family: "font-1";
  text-transform: uppercase;

  border: 1vw solid;
  border-color: var(--darkColor);
  border-radius: 25px;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.text {
  color: var(--darkColor);
}