/* Variables */
:root {
  --main-fg-color: #e2fbff;
  --main-bg-color: #00021d;
  --spacing: 0.25rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  background: var(--main-bg-color);
  color: var(--main-fg-color);
}

body {
  font: normal normal 112.5% 'Open Sans',sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flow-root;
  width: 100%;
  min-height: 100%;
}

#wrap {
	display: grid;
	grid-template-rows: 20px 1fr 20px;
	align-items: center;
	justify-items: center;
	gap: calc(var(--spacing) * 16);
	min-height: 100vh;
}

#wrap main {
	grid-row-start: 2;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

#wrap img {
	max-width: 100%;
}

.logo-title {
	font-family: "Anta", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	text-align: center;
	letter-spacing: 4px;
	text-transform: uppercase;
	flex-shrink: 0;
	width: 100%;
	background: radial-gradient(circle, #dcf6ff, #3266f8);
    -webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1;
}