/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); */

body {
  /* font-family: "Noto Sans", sans-serif; */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #2a2a2a;
  color: #aaa;
}

.content {
  max-width: 600px;
  margin: auto;
}

#language {
   position: relative;
   top: -7px;
   cursor: pointer;
   padding: 4px 4px;
}

#language:hover {
   background-color: #555;
   border-radius: 3px;
}

.backdrop {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
}


.languages {
   display: grid;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #222;
   padding: 10px;
   box-shadow: 0 0 10px #000;
   border: 1px solid #777;
   border-radius: 5px;
   grid-template-rows: repeat(13, 30px);
   grid-template-columns: repeat(2, 250px);
   grid-auto-flow: column;
   align-items: center;
 }

 .languages a {
   width: 220px;
   padding: 10px;
   text-decoration-line: none;
 }

 .languages a:hover {
   background-color: #333;
   border-radius: 3px;
 }

 .languages a span:nth-child(2) {
   float: right;
 }

 


.footer {
  margin-top: 30px;
}

a {
  color: #aaa;
}