* {
  box-sizing: border-box;
}

body {
  background-image: url(Star.jpg);
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

img {
  border-radius: 1vw;
}

p {
  font-size: 0.8vw;
}

h1 {
  font-size: 50px;
  word-break: break-all;
  color: floralwhite;
}

h2 {
  color: floralwhite;
}

h3 {
  font-size: 1vw;
}

h4 {
  font-size: 0.7vw;
  font-weight: bolder;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: floralwhite;
  border-radius: 1vw;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: floralwhite;
  cursor: pointer;
}

.btn:hover {
  background-color: #111;
  color: white;
}

.btn.active {
  background-color: blueviolet;
  color: black;
}

.container {
  position: relative;
  font-family: Arial;
}

.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
}

.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: white;
}

.callout-container {
  padding: 15px;
  background-color: #ccc;
  color: black
}

.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.closebtn:hover {
  color: lightgrey;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 99%;
  width: 100%;
  opacity: 0;
  transition: .1s ease;
  background-color: black;
  border-radius: 1vw;
}

.container:hover .overlay {
  opacity: 50%;
  cursor:grab;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.rating-block {
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2vw;
  width: 5vw;
  height: 2vw;
  top: 0.5vw;
  right: 0.5vw;
  background-color: Black;
  color: white;
}

.finished-block {
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2vw;
  width: 5vw;
  height: 2vw;
  top: 0.5vw;
  left: 0.5vw;
  background-color: #46BF37;
  color: white;
}

.playing-block {
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2vw;
  width: 5vw;
  height: 2vw;
  top: 0.5vw;
  left: 0.5vw;
  background-color: #B137BF;
  color: white;
}

.paused-block {
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2vw;
  width: 5vw;
  height: 2vw;
  top: 0.5vw;
  left: 0.5vw;
  background-color: #E3BE1C;
  color: white;
}
  
.dropped-block {
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2vw;
  width: 5vw;
  height: 2vw;
  top: 0.5vw;
  left: 0.5vw;
  background-color: #E84545;
  color: white;
}