@font-face {
  font-family: "Averia Serif Libre";
  src: url('font.ttf') format('truetype');
}



* {
  margin:10;
  padding:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #000 url('../elements/bg.jpg') no-repeat center center/cover;
  height: 100vh;
  color: #fff;
  font-family: "Averia Serif Libre";
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.letter {
  font-size:30px;
  display: block;
  font-family: "Averia Serif Libre";
  color: #fff;
  margin:0;
  text-align: center;
  
}

.number {
  font-size:15px;
  color: #fff;
  display:inline-block;
  float: right;
  vertical-align:top;
  text-align: right;
}

.name {
  font-size:11px;
  color: #fff;
  display:inline-block;

  float: center;
}


table {

  table-layout: fixed;
  width: 75%;
  height: 100%;
}

#element-info {

  text-align: left;
  width: 75%;

}

.content {

  text-align: left;
  font-size: 20px;
  line-height: 1.75;

}

h1 {

  text-decoration: underline;
}




.element, .more, .selected-element {
  transition: all 0.2s;
  font-family: "Averia Serif Libre";
  color: #fff;
  margin:0;
  background:green;
  border:3px solid #fff;
  background: #46a08c; /* Old browsers */
background: -webkit-linear-gradient(130deg, #46a08c 0%, #1C3F1D 100%, #303030 90%);
background: -moz-linear-gradient(130deg, #46a08c 0%, #1C3F1D 100%, #303030 90%);
background: -o-linear-gradient(130deg, #46a08c 0%, #1C3F1D 100%, #303030 90%);
background: linear-gradient(130deg, #46a08c 0%, #1C3F1D 100%, #303030 90%);
   box-shadow:inset 0px 2px 2px rgba(50,50,50,.6);  
   padding:1px 2px;
}

.stats {
  text-align: center;
}

.selected-element {

  height: 175px;
  width: 10%;
}

model-viewer{
  width:275px;
  height:250px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}



.selected-letter {

  font-size: 55px;
  display: block;
  font-family: "Averia Serif Libre";
  color: #fff;
  margin:0;
  text-align: center;
}

.selected-number {

  font-size: 20px;
  color: #fff;
  display:inline-block;
  float: right;
  vertical-align:top;
  text-align: right;
}

.selected-name {

  font-size: 20px;
  display:inline-block;
  float: left;
}


.element:hover {

  transform: scale(1.5);

}

.element.active {

  transform: scale(1.5);

}


.more:hover {

  transform: scale(1.5);

}


tr[data-hidden="true"] {
  display: none;
}



@media only screen and (max-width: 1024px) {

.element {

  height: 25%;

}

table, .table-container{

  overflow-x: auto;
  width: 185%;
}

.letter {
  font-size: 25px;
}

.name {
  font-size: 12px;
}

.number {
  font-size: 10px;
}


#element-info {
  width: 175%;
}

model-viewer{
  width:275px;
  height:250px;
}

.selected-element {

  height: 175px;
  width: 20%;
}

.links {

  display: none;
}

  .center {
    padding-left: 45%;
  }


}