/* CSS files add styling rules to your content */

body {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  margin: 2em;
  background-color: rgb(10, 10, 10);
  color: #c6c6f4;
}

h1 {
  color: #b548b5; 
}

.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 7001;
max-width: 600px;
margin: auto;
width: 50%;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.526);
}

a{
text-decoration: underline;
background-color: rgba(0, 0, 0, 0.609); 
color: #b548b5; 
}

button{
background-color: rgba(0, 0, 0, 0);
border: none;
color: white;
text-align: center;
text-decoration: underline;
cursor: pointer; 
font-size: 16px; 
}

button:hover{
background-color: #b548b5; ;
}

@media screen and (width >= 80rem) {
  .container {
    margin: 1em 2em;
  }
}