:root {
    --primary-color: #620099;
}

html,
body {
    background: var(--primary-color);
    font-family: "Liberation Mono";
}

hr {
  margin: 1em 0;
}

ul {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

.gspot-logo {
    background:white;
}

header {
}

.navbar {
    max-width: 80em;
    display:flex;
    margin: 1em auto;
}

.floating-snack {
    margin: 0 0 0 auto;
    max-width:50em;
    background: white;
    border-radius: 1em;
}
.floating-snack ul, li {
    display: inline-flex;
    margin: .4em 1em;
    font-family: "Liberation Mono";
    color: var(--primary-color);
    font-size: 1.2em;
}
.floating-snack a {
    color: white;
    padding: .2em 1em;
}

.floating-snack ul:nth-child(2) {
    background: var(--primary-color);
    border-radius: 1em;
}

.main {
    display: flex;
    margin: auto;
    flex-direction: column;
}
.main > div {
    display: flex;
    margin: auto;
}
.main > div:nth-child(2) {
    margin: 3em auto;
    gap: 1em;
}

.slogan {
    font-size: 5em;
    color: white;
    margin: auto;
}
.slogan p {
}
.app-frame {
}

.app-frame img {
    width:800px;
}

.GSPOT-button {
    font-size: 1.2em;
    border-radius: 1em;
    background: white;
    padding:1em;
    transition: 0.3s;
    color: var(--primary-color);
    cursor: pointer;
}
.GSPOT-button:hover {
    background: var(--primary-color);
    color: white;
}

button {
}