div,
h1,
p
{
all: unset
}

div
{
    display:block;
}

@font-face {
  font-family: "Press Start 2P";
  src: url("/rom/PressStart2P-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

html {
    background-color: black;
    color: lime;
    font-family: "Press Start 2P", serif;
    min-height: 100vh;
}
body
{

}

main
{
    margin-bottom:150px;
        padding-top:150px;
}
h1
{
    display:block;
    width:100%;
    margin:0 auto;
    max-width:90%;
    text-align:center;
    font-size:62px;
}


.dialogue,
.player-list,
.gems
{
    display:block;
    width:1000px;
    margin:0 auto;
    max-width:90%;
    text-align:center;
}

.dialogue
{
        padding-top:155px;
        font-size:25px;
}
.dialogue .text
{
    display:block;
    width:100%;
    text-align:left;
    line-height:200%;
}

.player-list
{
    font-size:24px;
    padding-top:80px;

}

.player-list .item
{
  display: flex;
  justify-content: space-between; /* pushes left/right apart */
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.player-list .index
{
    padding-right:15px;
}

.player-list .name
{
  flex: 1;
  margin-left: 8px;
  text-align: left;

}
.player-list .score
{
  text-align: right;
  font-weight: bold;
  color: #55ff99;
}

.player-lit .main-menu
{
    padding-right:15px;
}

.gems
{
margin-top:120px;
display:flex;
width:150px;
padding-top:25px;
flex-wrap: wrap;
}

.gem
{
    width:10px;
    height:10px;
    background-color:rgb(255, 10, 80);
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;

}


@media (max-width: 1100px) {

    h1{
        font-size:50px;
    }

    .dialogue
    {
        font-size:19px;
    }
}


@media (max-width: 950px) {

    h1{
        font-size:45px;
    }

    .dialogue
    {
        font-size:16px;
    }
}

@media (max-width: 750px) {

    h1{
        font-size:35px;
    }

    .dialogue
    {
        font-size:14px;
    }

    .player-list
    {
        font-size:18px;
    }
}

@media (max-width: 600px) {

    .dialogue
    {
        padding-top:45px;
    }

    main
    {
        padding-top:35px;
    }
    h1{
        font-size:35px;
    }

    .player-list
    {
        font-size:14px;
    }
}

#cursor {
    display: inline-block;
    width: 8px;
    animation: blink 0.8s step-end infinite;
}

    @keyframes typing {
        from { width: 0; }
        to { width: 100%; }
    }
@keyframes blink {
    50% { opacity: 0; }
}