@import url('https://fonts.googleapis.com/css2?family=Piazzolla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ceviche+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway+Dots&display=swap');
/* My Three Extra Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Barriecito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mystery+Quest&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap');

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

body,
html {
  width: 100%;
  min-height: 100%;
}

body {
  display: flex;
  padding: 100px;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  background-color: #282a56;
}

.container {
  display: flex;
  justify-content: center;
  gap: 90px;
  flex-wrap: wrap;
}

.word {
  max-width: max-content;
  display: flex;
  gap: 20px;
}

.word > span {
  position: relative;
  padding: 20px 30px;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90px;
  max-height: 90px;
  border: 6px solid grey;
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.8s ease-in-out;
}

/* Style 1 */
.word span:first-child {
  font-size: 96px;
  text-transform: uppercase;
  font-weight: bold;
  color: aqua;
  background-color: black;
  text-decoration: underline;
  font-family: 'Londrina Sketch', sans-serif;
}

/* Style 2 */
.word span:nth-child(2) {
  font-size: 48px;
  color: #f1c40f;
  background-color: white;
  text-decoration: overline;
  text-decoration-color: red;
  font-family: 'Barriecito', sans-serif;
}

/* Style 3 */
.word span:nth-child(3){
  font-size: 32px;
  font-weight: bold;
  color: rgb(255, 20, 147);
  background-color: bisque;
  font-family: 'Piazolla', sans-serif;
}

/* Style 4 */
.word span:nth-child(4){
  font-size: 66px;
  color:  rgb(105, 105, 105);
  background-color: darkgreen;
  font-family: 'Ceviche One', sans-serif;
}
/* Style 5 */
.word span:nth-child(5){
  font-size: 52px;
  font-weight: 400;
  color:  blue;
  text-decoration: line-through;
  text-decoration-color: red;
  background-color: #f1c40f;
  font-family: 'Raleway Dots', sans-serif;
}
/* Style 6 */
.word span:nth-child(6){
  font-size: 60px;
  font-weight: normal;
  color: #00e5ff;
  background-color: darkslategrey;
  font-family: 'Barriecito', sans-serif;
}
/* Style 7 */
.word span:nth-child(7){
  color: rgb(72, 209, 204);
  background-color: darksalmon;
  text-decoration: none;
  font-family: 'Raleway Dots', sans-serif;
}
/* Style 8 */
.word span:nth-child(8){
  font-size: 82px;
  color: burlywood;
  font-weight: 700;
  background-color: deeppink;
  font-family: 'Londrina Sketch', sans-serif;
}
/* Style 9 */
.word span:last-child {
  color: black;
  background-color: aqua;
}

/* Style 10 */
.hyphen,
.exclamation-mark{
  color: white !important;
}