/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


   

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Verdana', sans-serif;
  background-color: #fff;
}

/* Background */
.background {
  background: linear-gradient(to bottom right, #FFA53D, #FFE2C6);
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

}

/* Main window */
.frame {
  width: 900px;
  margin: 40px auto;
  border: 5px groove #ccc;
  box-shadow: 0 0 15px #FFA53D;
  border-radius: 8px;
  padding: 20px;
  background: url('IMG_3541.jpeg') center/cover no-repeat;
  position: fixed; top: 70; left: 70;
   width: 50%; height: 50%; z-index: -1;
}

/* Glossy Frame */
.main-frame {
  width: 90%;
  max-width: 1000px;
  background: linear-gradient(#ffffff, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
  padding: 20px;
  border: 5px solid #ff6a00;
}
.ashton-button {
  background: linear-gradient(to bottom, #4F90D8, #3778B5);
  border: 2px solid #2C5A8A;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 12px;
  font-family: 'Comic Sans MS', cursive;
  box-shadow: 2px 2px #999;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.ashton-button:hover {
  transform: scale(1.05);
  background: linear-gradient(to bottom, #5aa0ec, #4d84ca);

}

/* Navigation */
nav {
  text-align: center;
  margin-bottom: 20px;
}

nav button {
  background: linear-gradient(to bottom, #4F90D8, #3778B5);
  border: 2px solid #2C5A8A;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 12px;
  font-family: 'Comic Sans MS', cursive;
  box-shadow: 2px 2px #999;
  cursor: pointer;
}

nav button:hover {
  background: linear-gradient(to bottom, #64A8FF, #4F90D8);
}

/* Content */
.section-title {
  text-align: center;
  color: #FFA53D;
  margin-bottom: 10px;
}

/* Video */
.video-wrapper {
  background: #f0f0f0;
  padding: 10px;
  border: 3px inset #ccc;
  margin-bottom: 20px;
}

/* Comments */
.comments {
  background: #fff;
  border: 2px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.comments h3 {
  margin-top: 0;
  color: #4F90D8;
}

.comment {
  padding: 5px 0;
  border-bottom: 1px dotted #ccc;
}

.comments form {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.comments input[type="text"] {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.comments button {
  padding: 8px 12px;
  background-color: #FFA53D;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

/* Socials */
.socials h3 {
  margin-bottom: 10px;
  color: #4F90D8;
}

.social-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.social-btn {
  background: linear-gradient(to bottom, #FFA53D, #FF8700);
  color: white;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 2px 2px #999;
}

.social-btn:hover {
  background: linear-gradient(to bottom, #FFD599, #FFA53D);
}

/* Footer */
footer {
  text-align: center;
  font-size: 12px;
  color: #777;
  margin-top: 20px;
}


.framed-image-container {
  position: fixed;
  bottom: 10px;
  right: 20px;
  width: 260px;
  height: 100px;
  padding: 15px;
  background: linear-gradient(145deg, #ff7f11, #ffffff);
  border-radius: 20px;
  border: 4px solid #d0d0d0;
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(255, 125, 0, 0.4);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.framed-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 20px; /* 👈 This pushes the image down a little */

}
.music-player-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 260px;
  height: 100px;
  padding: 15px;
  background: linear-gradient(145deg, #ff7f11, #ffffff);
  border-radius: 20px;
  border: 4px solid #d0d0d0;
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(255, 125, 0, 0.4);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Music player styling */
.music-player-container audio {
  width: 90%;
  accent-color: orange;
  filter: drop-shadow(0 0 3px gray);
}

 .host-section {
  position: absolute;
  top: -35px;
  right: -500px;
  width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom right, #ffffff, #fca311);
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 900;
}

.host-image {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Text styling */
.host-text {
  color: #333;
  font-family: 'Verdana', sans-serif;
  font-size: 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.85);
  padding: 10px;
  border-radius: 12px;
  line-height: 1.6;
}

.host-text h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #ff6600;
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
}



.host-image {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Text styling */
.host-text {
  color: #333;
  font-family: 'Verdana', sans-serif;
  font-size: 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.85);
  padding: 10px;
  border-radius: 12px;
  line-height: 1.6;
}
.ashton-title-image {
  width: 80%;
  max-width: 700px;
  margin: 30px auto 20px auto;
  text-align: center;
}

.ashton-title-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 10px rgba(255, 255, 255, 0.2);
  border: 3px solid #FF6A00;
  background: white;
}

.host-text h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #ff6600;
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
}
.chat-button {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(145deg, #ff7f11, #ffffff);
  border: 3px solid #d0d0d0;
  border-radius: 12px;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  box-shadow:
    inset 0 0 5px rgba(255, 255, 255, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(255, 125, 0, 0.3);
  transition: all 0.2s ease;
}

.chat-button:hover {
  background: #e76d00;
  color: white;
  cursor: pointer;
}