@font-face {
  font-family: "StoneSans";
  src: url("/font/StoneSansFraportII-Md.ttf") format("truetype");
  font-weight: thin;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "StoneSans";
  src: url("/font/StoneSansFraportII-MdIt.ttf") format("truetype");
  font-weight: thin;
  font-style: italic;
  font-display: swap;
}

@property --mainColor {
  syntax: "<color>";
  inherits: false;
  initial-value:#D80B7A;
}

@property --secondaryColor {
  syntax: "<color>";
  inherits: false;
  initial-value:#6F166F;
}


* {
  /* disable on touch highlights of html elements, especially on mobile! */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: "StoneSans";
  font-weight: normal;
  color: white;
}

* {
  touch-action: manipulation;
}

.font-large{
  font-size: 6vh;
}

.font-medium{
  font-size: 4vh;
}

.font-small{
  font-size:3vh;
}

.top {
  position: relative;
  width: 100%;
  height: 20%;
  background-color: rgba(242, 201, 0, 1);

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

.middle {
  position: relative;
  width: 100%;
  height: 80%;
  background-image: url(/img/background.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

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

.button-container {
  position: absolute;
  width: 100%;
  height: 13vh;
  display: flex;
  justify-content: center;
  bottom: 0;
}

#title{
  width: 80%;
  height: 90%;
  color: var(--mainColor);
  text-align: left;

  font-style: italic;
  text-transform: uppercase;
  line-height: 7vh;
  display: inline-flex;
  align-items: center;
}


.content{
  width: 80%;
  height: 60%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  color: white;
  gap: 5vh;

  font-style: italic;
}

.main-text,
.tags{
  width: 100%;
  height: auto;
}



.button{
  background-color: var(--secondaryColor);
  width: 85%;
  max-width: 700px;
  height: 6vh;
  border-radius: 300px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-style: italic;
  text-transform: uppercase;

  font-size: 3vh;
}