@font-face {
  font-family: "UltraLight";
  src: url("fonts/UltraLight.ttf?#iefix") format("truetype");
}

@font-face {
  font-family: "Light";
  src: url("fonts/Light.ttf?#iefix") format("truetype");
}

@font-face {
  font-family: "Regular";
  src: url("fonts/Regular.ttf?#iefix") format("truetype");
}

@font-face {
  font-family: "Bold";
  src: url("fonts/Bold.ttf?#iefix") format("truetype");
}

/* Tiled background */

.background {
  z-index:0;
  overflow:hidden; /* hide the overflow here not on the pseudo element */
}

.background::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */
  width: 141%;
  height:141%;
  /**/
  /* to center*/
  left: 50%;
  top: 50%;
  /* */
  background: url("tile.png");
  background-size: 10px 10px; /* size of the image*/
  transform:translate(-50%,-50%); /* center the element then rotate */
  opacity: 0.5;
}

body {
  font-family: "Regular";
  
  margin: 0;
  padding: 0;
  
  background: #0097A7;
  color: black;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin: 1rem;
  padding: 1rem;
}

.container .content {
  font-family: "Regular";
  text-align: center;
  
  background: #BBDEFB;
  border-style: solid;
  border-radius: 0.5rem;
  
  width: 50dvw;
  min-width: 50dvw;
  max-width: 100dvw;

  min-height: calc(min-content + 1dvh);
  max-height: calc(max-content + 1dvh);
  
  margin: 1rem;
}

iframe {
  width: 100%;
}

ul {
  background: none;
  list-style: none;
  
  margin: 0;
  padding: 0;
}

a {
  font-family: "Bold";
  color: black;
}