:root {
  --main: darkgoldenrod;
  --main: deeppink;
  --main: firebrick;
  --main: teal;
  --main: indigo;
  --main: #ff6600;
  --main: #6dba9a; /* vert th */
  --main: #00BE6F;
  --main: #4C55e1;
  --bg: #ed8493; /* rose th*/
  --bg: purple;
  --bg: #eeeeee;
}

* {
    box-sizing: border-box;
}
    
@media (max-width: 575px) {
    html {
        font-size: 0.4rem;
    }
}

@media (min-width:576px) and (max-width: 767px) {
    html {
        font-size: 0.5rem;
    }
}

@media (min-width:768px) and (max-width: 991px) {
    html {
        font-size: 0.6rem;
    }
}

@media (min-width:992px) and (max-width: 1199px) {
    html {
        font-size: 0.7rem;
    }
}

@media (min-width:1200px) and (max-width: 1399px) {
    html {
        font-size: 0.8rem;
    }
}

@media (min-width:1400px) and (max-width: 1599px) {
    html {
        font-size: 0.9rem;
    }
}

@media (min-width:1600px) and (max-width: 1920px) {
    html {
        font-size: 1.0rem;
    }
}

@media (min-width:1921px) {
    html {
        font-size: 1.2rem;
    }
}

html {
    margin: 0;
    padding: 0;
    background-color: var(--bg);

    color: var(--main);
    font-family: serif;
}

body {
    padding: 1rem;

    text-align: left;
    line-height: 3.6rem;
}

div {
    display: inline;
    margin-right: 8rem;
}

div:hover > span {
    color: var(--bg);
}
div:hover > p {
    color: var(--main);
}

div > span { /* bublles */
    display: inline;
    padding: 1.1rem 3rem;
    border-radius: 100%;
    background-color: var(--main);
    white-space: nowrap;

    color: var(--main);
    vertical-align: 0.2rem;
    font-size: 2.4rem;
    font-family: sans-serif;

    /*
    text-transform: uppercase;
    font-size: 1.6rem;
    padding: 1.5rem 3rem;
    vertical-align: 0.6rem;
    */
}

div > span:hover {
    color: var(--bg);
    cursor: help;
}

div > p {
    display: inline;

    color: var(--main);
    color: var(--bg);
    font-size: 4rem;
    font-family: serif;
}

div > p > span { /* sublist for links */
    color: inherit;
    margin-right: 0rem;
}

div > p > span:after {
    content: ",";
}

div > p > span:last-child:after {
    content: "";
}
    
a {
    color: inherit;
    text-decoration: inherit;
    
}

a:hover {
    cursor: pointer !important;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

#os {
    display:none;
}

#booted {
    display: none;
}