body {
  text-align: center;
  color: black;
  font-family: Times, times, serif;
  margin: 20px;
  padding-top:30px;
  background-image: url("img/digital-beach.jpg");
  background-repeat: no-repeat; /* Prevents image from repeating */
  background-size: cover; /* Scales image to cover the entire element */
  background-position: center center; /* Centers the image */
 
}

header {
  padding: 30px;
}

h1 {
  font-size: 12pt;
  font-style: italic;
  color: lightyellow;
}

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

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

li {
  padding: 15px;
  font-weight: bold;
  font-style: italic;
  color: lightyellow;
}

a:link {
  font-weight: bold;
  font-style: italic;
  color: lightyellow;
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: lightyellow;
}

a:hover {
 text-decoration: underline;
}


p {
  text-align: left;
  border: 20px;
  border-color: royalblue;
}

.smaller {
  height:150px;
}

main {
  display: flex;
  justify-content: center;
}

.textbox {
  display: flex;
  flex: 0 0 650px; /* Fixed width of 750px */
  background: honeydew;
  padding: 25px;
  border : 5px solid royalblue;
  margin-left: 60px;
  margin-right: 60px;

}

.bigbox {
  display: flex;
  margin: 0px 60px;
}
p.center {
  position: relative;
  text-align: center;
  color: #126101;
  font-weight: bold;
  border-radius: .8em;
  padding: 10px;
  border: 2px solid #5C4033;
}

p.center:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 17px solid transparent;
	border-top-color: #5C4033;
	border-bottom: 0;
	margin-left: -40px;
	margin-bottom: -17px;
}


.button {
  padding: 15px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: black;
  background-color: #FED09B;
  border-color: #673200;
}

.button:hover {background-color: #F99589}

.button:active {
  transform: translateY(4px);
}

.button-zone {
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: center;
  align-items: center;
}

a.button {
  color: black;
  font-size: 11pt;
  font-family: arial;
  font-style: normal;
  font-weight: normal;
  box-sizing: border-box;
  border:2px solid #673200;
  margin: 5px;
  width:250px;

  text-align: center;
 
}

p.speech-bubble {
	position: relative;
	background: lightyellow;
	border: 2px solid #5C4033;
	border-radius: .8em;
	text-align: center;
  color: #126101;
  font-weight: bold;
  padding: 10px;
}

p.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 17px solid transparent;
	border-top-color: #5C4033;
	border-bottom: 0;
	margin-left: 15px;
	margin-bottom: -17px;
}

.mixtape {
  animation: wiggle 2s infinite alternate; /* Applies the 'bounce' animation */
}

@keyframes wiggle {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }

.artists {
  display: flex;
  justify-content: center;
  padding-left: 80px;
  padding-right: 80px;
}

.column {
  flex: 33.33%;
  padding: 5px;
}