@font-face {
  font-family: "Propple";
  src: url("./assets/fonts/propple.ttf");
}
* {
  font-family: "Open Sans", sans-serif;
}
.logo {
  border-radius:20px;
  display:block;
  width:50vw;
  max-width:95vw;
  margin-top:20px;
  margin-bottom:10px;
  margin-left: auto;
  margin-right: auto;
  
}

.steam {
  width: 600px;
  max-width: 100vw;
  height: 190px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}
.infobox {
  margin-left:auto;
  margin-right:auto;
  max-width: 80vw;
  background-color: #1f0000;
  border-radius: 2.5vw;
  padding: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.invinfobox {
  max-width: 100vw;
  background-color: #2f0000;
  border-radius: 2.5vw;
  padding: 1vw;
  margin-top: 5px;
  margin-bottom: 5px;
}

.text-center {
  text-align: center;
}

.row-box {
  display: flex;
  justify-content: center;
}
.row-box div {
  text-align: center;
  margin: 10px;
  width:20vw;
}

.column-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.menubar {
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
}
.menubar div {
  text-align: center;
  margin:1vw;
  padding:0.5vw;
  width:10vw;
  min-width:min(100px,40vw);
  background-color: #2f0000;
  border-radius: 2.5vw;
}


body {
  background-color: #3f0000;
  color: #ffdddd;
}
html, body {
  margin:0;
}
iframe {
  border:none;
}


.hovergrow {
  transition: transform 0.3s ease-in-out;
  display:inline-block;
}

.hovergrow:hover {
  transform: scale(1.2);
}


/* Unvisited link */
a:link {
  color: pink;
  text-decoration: none; /* Removes underline */
}
/* Visited link */
a:visited {
  color: pink;
  text-decoration: none;
}
/* Mouse over link */
a:hover {
  color: white;
  text-decoration: none; /* Adds underline on hover */
  transform: scale(1.2);
}
/* Active link (while being clicked) */
a:active {
  color: white;
  text-decoration: none;
}

a:hover path {
  fill:white;
}