/* fonts */
@font-face {
	font-family: 'GraphikRegular';
	src: url("../fonts/GraphikMedium.eot");
	src: url("../fonts/GraphikRegular.eot") format("embedded-opentype"), url("../fonts/GraphikRegular.woff2") format("woff2"), url("../fonts/GraphikRegular.woff") format("woff"), url("../fonts/GraphikRegular.ttf") format("truetype"), url("../fonts/GraphikRegular.svg#GraphikRegular") format("svg"); }
@font-face {
	font-family: 'GraphikMedium';
	src: url("../fonts/GraphikMedium.eot");
	src: url("../fonts/GraphikMedium.eot") format("embedded-opentype"), url("../fonts/GraphikMedium.woff2") format("woff2"), url("../fonts/GraphikMedium.woff") format("woff"), url("../fonts/GraphikMedium.ttf") format("truetype"), url("../fonts/GraphikMedium.svg#GraphikMedium") format("svg"); }

body {
  font-family: "GraphikRegular", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  color: #fff;
  background-color: #181F2C;
  margin: 0;
  box-sizing: border-box;
}

body *,
body *::before,
body *::after {
  box-sizing: inherit;
}

main {
  padding: 0 50px; 
  margin-top: 20px;
}

.grid-simple {
  display: flex;
  justify-content: space-evenly;
}

.grid-simple  .mejor-top-3 {
  width: 75%;
}

.grid-simple  .clasificacion {
  width: 25%;
  height: 716px;
  overflow: hidden;

}
h1 {
  font-family: "GraphikMedium", sans-serif;
}

.clasificacion {
  border: #FFFFFF dashed 1px;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-left: 50px;
}

.top-1 {
  margin-top: 55px;
  width: 320px;
}

.top-2 {
  width: 250px;
  margin-top: 210px;
}

.top-3 {
  width: 250px;
  margin-top: 210px;
}

.crown {
  margin: auto;
  width: 100%;
  padding-top: 40px;
  margin-top: -30px;
}

.center {
  position: relative;
  margin-top: -90px;
  margin: auto;
  top: -20px;
  width: 100%;
}

.name {
  position: relative;
  margin-top: -90px;
  margin: auto;
  top: -40px;
  width: 100%;
  text-align: center;
  font-weight: normal;
}

.top-1 .puntuacion {
  font-size: 60;
  color: #FF4745;
  font-weight:500;
  text-align: center;
  display: block;
  position: relative;
  top: -60px;
  font-family: "GraphikMedium", sans-serif;
}

.top-2 .puntuacion {
  font-size: 35px;
  color: #FF4745;
  font-weight:500;
  text-align: center;
  display: block;
  position: relative;
  top: -35px;
  font-family: "GraphikMedium", sans-serif;
}
.top-3 .puntuacion {
  font-size: 35px;
  color: #FF4745;
  font-weight:500;
  text-align: center;
  display: block;
  position: relative;
  top: -35px;
  font-family: "GraphikMedium", sans-serif;
}

.ranking {
  font-size: 22px;
  font-weight: normal;
  margin-bottom: 40px;
}

.ranking span {
  display: block;
  margin-left: 20px;
  color: #FF4745;
  line-height: 23px;
}

#drop-area.highlight {
  border: green 10px solid;
}

footer {
  position: absolute;
  bottom: 10px;
  margin-bottom: 25px;
}