wf-radio/frontend/src/styles/app.css

/* Impports */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root {
  font-family: 'IBM Plex Mono';
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #0c0c0c;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-width: 320px;
  margin: 0;
}

* {
  transition: 200ms;
}


a {
  text-decoration: none;
}

/* Logo */

.logo.img {
  position: absolute;
  top: 1.6rem;
  left: 2rem;
  height: 6em;
  
  padding: 1.5em;
  
  user-select: none;
}

.logo.text {

  position: absolute;
  left: 10rem;
  top: 3.8rem;

  margin: 0;

  color: #eaeaea;
  font-family: Inter;
  font-weight: 600;
  font-size: 3em;

  user-select: none;
}

.logoSmall.img {
  position: absolute;
  top: 1.5rem;
  left: .5rem;
  height: 6em;
  
  padding: 1.5em;
  
  user-select: none;
}

.logoSmall.text {

  position: absolute;
  left: 8rem;
  top: 4.1rem;

  margin: 0;

  color: #eaeaea;
  font-family: Inter;
  font-weight: 600;
  font-size: 2.5em;

  user-select: none;
}

h1 {
  position: absolute;
  left: 0rem;
  top: -3rem;

  color: #eaeaea;
  font-family: Inter;
  font-weight: 600;

  padding: 1.5em;

  font-size: 3em;
}


.content-container {

  position: absolute;
  top: 11rem;
  right: 4rem;
  left: 43rem;
  bottom: 4rem;

  min-height: 20rem;
  min-width: 50rem;

  /* background-color: #1a1a1a; */
  color: #eaeaea;

  /* border: #3a3a3a solid; */
  border-width: .1em;
  border-radius: .5rem;
}

.container {
  position: absolute;
  top: 11rem;
  right: 4rem;
  left: 22rem;
  bottom: 4rem;

  padding: 3rem;

  background-color: #1a1a1a;
  color: #eaeaea;

  border: #3a3a3a solid;
  border-width: .1em;
  border-radius: .5rem;

}

/* Page transitions */

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-out; /* Adjust duration and easing */
}

.page-enter {
  opacity: 0;
}

.page-enter-active {
  opacity: 1;
}

.page-exit {
  opacity: 1;
}

.page-exit-active {
  opacity: 0;
}