body {
	font-family: "Alegreya Sans", sans-serif;
	font-size: 1em;
	color: #fff;
	background-color: #122136;
}

.insert-quote {
	font-size: 3em;
	font-weight: 500;
	padding: 0 30px;
	margin: 10px 0;
}

.long-quote {
	font-size: 2em;
}

.short-quote {
	font-size: 3em;
}

#messageContainer {
	font-size: 2vw;
}

#quote-box {
	width: 60vw;
	margin: 10vh auto 0;
	padding: 30px 30px 100px;
	border-radius: 10px;
	background-color: #3EBB68;
	position: relative;
	overflow: hidden;
	transition: all 1s;
}

.controls {
	position: absolute;
	width: 100%;
	padding: 20px;
	bottom: 0;
	left: 0;
	background-color: rgba(56, 56, 56, 0.20);
}

.insert-author {
	display: inline-block;
	width: 85%;
	font-size: 2em;
	margin: 0;
}

a {
	display: inline-block;
	position: relative;
}

i {
	color: white;
	transition: 500ms;
}

i:hover {
	color: #00B8F3;
}

button {
	background-color: rgba(56, 56, 56, 0.30);
	padding: 10px;
	border: none;
	border-radius: 8px;
	transition: 0.3s;
	overflow: hidden;
	outline: none;
	width: 15%;
	color: white;
	font-size: 1.4em;
	position: absolute;
	bottom: 40%;
	left: 42.5%;
}

button:hover {
	background-color: rgba(113,115,208,0.50);
}

.next {
	display: inline-block;
	position: relative;
	margin: 0;
	bottom: 10px;
}

.refresh {
	display: inline-block;
	content: " ";
	width: 0;
	height: 0;
	border-radius: 50%;
	border: 20px solid white;
	border-top-color: #C24789;
	position: relative;
	/*left: -10%;*/
	top: 3px;
	transition: all 1s;
}

.rotate{
	transform: rotate(360deg);
	border-top-color: white;
	border-bottom-color: #493DB8;
}


/**************************Media queries*************************/
@media (max-width: 1260px) {
  button {
    font-size: 6vw;  /* Scaled using viewport width */
    width: 30%;
    left: 35%;
    bottom: 15%;
    position: relative;
    margin-top: 1em;
  }
  .refresh {
    border: 2vw solid white;  /* Scaled using viewport width */
    display: none;
  }
  #quote-box {
    font-size: 6vw;  
  }	  
  #messageContainer {
    font-size: 2em;
}
  .insert-author {
    font-size: 3vw;
  }
}

@media (max-width: 1039px) {
  #quote-box {
    width: 90vw;  /* Increased width */
  }
}

@media (max-width: 778px) {
  #quote-box {
    padding: 2vw;  /* Scaled using viewport width */
  }
  .insert-quote {
    font-size: 4vw;  /* Scaled using viewport width */
  }
  .insert-author {
    font-size: 2vw;  /* Scaled using viewport width */
  }
  button {
    width: 40%;  /* Increased width */
    font-size: 3vw;  /* Scaled using viewport width */
  }
}

@media (max-width: 620px) {
  .insert-quote {
    font-size: 5vw;  /* Scaled using viewport width */
  }
  .insert-author {
    font-size: 3vw;  /* Scaled using viewport width */
  }
}

@media (max-width: 480px) {
  button {
    width: 50%;  /* Increased width */
    font-size: 4vw;  /* Scaled using viewport width */
  }
}

#github-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 2em;
  color: black;
}