@import url(https://db.onlinewebfonts.com/c/12420e8c141ca7c3dff41de2d59df13e?family=Beaufort+for+LOL+Bold);
@font-face {
  font-family: "Beaufort for LOL Bold";
  src: url("https://db.onlinewebfonts.com/t/12420e8c141ca7c3dff41de2d59df13e.eot");
  src: url("https://db.onlinewebfonts.com/t/12420e8c141ca7c3dff41de2d59df13e.eot?#iefix")format("embedded-opentype"),
  url("https://db.onlinewebfonts.com/t/12420e8c141ca7c3dff41de2d59df13e.woff2")format("woff2"),
  url("https://db.onlinewebfonts.com/t/12420e8c141ca7c3dff41de2d59df13e.woff")format("woff"),
  url("https://db.onlinewebfonts.com/t/12420e8c141ca7c3dff41de2d59df13e.ttf")format("truetype"),
  url("https://db.onlinewebfonts.com/t/12420e8c141ca7c3dff41de2d59df13e.svg#Beaufort for LOL Bold")format("svg");
}


body {
  font-family: "Beaufort for LOL Bold";
  text-align: center;
  margin: auto;
  background-image: linear-gradient(to left, #3699c3, #0AC8B9);
  overflow-x: hidden;

}

.champion-lane {
   margin-top: 20px;
}

.champion_display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
  
.champion_display img {
  width: 90px; 
  height: auto;
}

#regionSelector {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: #495057;
  line-height: 1.5;
  padding: .375rem .75rem;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#regionSelector:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}


.region-icon {
  width:50%; 
  height: 50%; 
  background-image: none;
}

.emote {
  width: 100px; 
  height: 100px; 
}

footer {
  position: fixed;
  bottom: 0;
}