html{
    min-height: 100%;
    background-image: url("BG\ image\ dark.svg");
    background-size: cover;
    background-position: center center;
    font-family: 'Helvetica';
    user-select: none;
    overflow:auto;
}

#welcomemsg {
    text-align: center;
    color:white;
    text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.72);
    text-transform: uppercase;
    font-size: 18px;
    font-family: 'Helvetica';
}

#changename {
    display:inline;

}

.app{
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(0, 0, 0, 0.226);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    width:540px;
    margin:200px auto;
    padding: 10px 20px 20px 20px;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px;

}

.grid-container {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  @media only screen and (max-width: 540px) {
    .grid-container {
        display: grid;
        justify-content: space-evenly;
        grid-template-columns: auto auto;
        grid-column-gap: 5x;
        grid-row-gap: 5px;
      }
      .app {
          margin-top: 5%;
          width:90%;
          padding: 10px 5px 10px 5px;
      }
      .body {
          padding-left:5%;
          padding-right:5%;
          height: 100vh;

      }
}

.dictator-face {
    width:60px;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dictator-face:active {
    transform: translateY(4px);
}

h1{
    text-align: center;
    color:white;
    text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.72);
    text-transform: uppercase;
    font-size: 32px;
    font-family: 'Helvetica';
}

p{
    text-align: center;
    color:white;
    font-size: 14px;
    text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.72);
    font-family: 'Helvetica';
}

.reset-btn {
	background-color:#009900;
	border-radius:28px;
	border:3px solid #FF6600;
	display:block;
	cursor:pointer;
	color:#ffffff;
    font-weight: 600;
	font-size:18px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
    margin:0 auto;
    font-family: 'Helvetica';
}
.reset-btn:hover {
	background-color:#5cbf2a;
}
.reset-btn:active {
	position:relative;
	top:1px;
}