/* 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 {
  margin: 0; /* This was the reason the topnav bar wouldn't reach the entire width of the page. */
  font-family: Arial, Helvetica, sans-serif;
  background: var(--background); /* Note: Multiple themes in use, do not change this variable. */
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition, might not want this if it chokes the browser. */
  background-size: cover;
  min-height: 100vh;
}

/* Multiple theme CSS spam. */
/* Default styles or 'light' theme variables */
/* Note: Please pardon the stupidly long CSS file,
  I originally wanted to use multiple CSS files for
  multiple themes, meaning each one would have their
  own, but Google told me it was a bad idea. https://imgur.com/a/g6TqS8i */
/* Temporary note: Trying to get the external CSS for themes working! */
/* Temporary note 2: Okay, it works again, just from a separate CSS file. */
#theme-select-button {
 margin-left: 740px; 
}
/* To *anyone* who sees the above CSS for #theme-select-button,
  if you can name a better way of putting it to the left of the username button
  without using a gigantic margin, I'd really love to hear it. */
/* Topnav bar CSS */
.topnav {
  overflow: hidden;
  background: linear-gradient(var(--primary-color-start), var(--primary-color-end));
  top: 0;
  bottom: 15px;
  height: 50px;
  position: sticky;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.active {
  color: black;
}

/* Create a right-aligned (split) link inside the navigation bar */
.split {
  float: right;
  /* background-color: #ddd;*/
  /* disabled background color*/
  color: gray;
}

#btn-id {
 color: #FF0000; 
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: none;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
  border-radius: 5px;
}

.buttontype1 {
  /* This section styles the buttons without anything hovering or clicking on it.*/
  background: linear-gradient(var(--primary-color-start), var(--primary-color-end));
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 3px;
  border: 1px solid #555555;
  box-shadow:0 0.4px 0.4px 0 rgba(0,0,0,0.3);
  font-family: "Arial Narrow", sans-serif;
  font-weight: bold;
}

.buttontype1:hover {
  /* How the buttons appear on hover*/
  background: linear-gradient(var(--primary-color-start), var(--primary-color-end));
  color: white;
  }
  
.buttontype1:active {
  /* the variable is "active," not "click."*/
  background: linear-gradient(#404040, #8c8c8c);
}

#image-button {
 display: flex;         /* Enables flexbox layout */
  align-items: center;   /* Vertically centers image and text */
  gap: 10px;             /* Adds space between the image and text */
  padding: 10px 20px;
  cursor: pointer;
  height: 75%;
  width: 10%;
  margin-right: auto;
  position: absolute;
  right: 5px;
}

#icon-image {
 width: 50px;           /* Adjust size as needed */
  height: auto;
}

.button-text {
 font-family: "arial narrow", sans-serif;
 font-size: 15px;
 text-align: center;
}

.icon-button {
  display: inline-flex;
  align-items: center;    /* Vertically centers the text and image */
  justify-content: center; /* Horizontally centers content if width is fixed */
  padding: 5px 5px;
  color: #000000;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  gap: 5px;              /* Creates space between image and text */
}
/* end Top Navbar CSS */
/* General page CSS */
main{
 margin-left: 20px;
 margin-right: 20px;
}
 
h1{
 text-align:center;
}
/* Basic styling */


h1 {
  text-align: center;
  font-family: "arial narrow", sans-serif;
  font-weight: bold;
}

p {
  text-align: center;
}

/* Container CSS */
.container {
  display: grid;
  /* Defines 2 columns of equal width */
  grid-template-columns: repeat(2, 1fr); 
  /* Defines 3 rows (adjust '100px' to '1fr' for flexible height) */
  grid-template-rows: repeat(3, 1fr);
  background: linear-gradient(rgba(245, 245, 245, 1), rgba(204, 204, 204, 0.2));
  padding: 5px;
  gap: 5px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
}

.container div {
  color: #000;
  padding: 10px;
  font-size: 30px;
  text-align: center;
  font-family: "arial narrow", sans-serif;
  font-weight: bold;
  /* border: 4px groove #ccc;  Simple beveled look; Disabled, doesn't do as intended. */
}

.banner-container {
 grid-column: 1 /span 2;
}

#top-banner {
  grid-column: 1 /span 2;
}
/* Apparently, I had to edit the grid column size for both the container and the grid space I was targeting. */
.recent-videos {
 grid-row: 2 ;
}

.recent-music {
 grid-row: 2; 
}

#box-3 {
 grid-row: 3;
}

#box-4 {
 grid-row: 3; 
}

#channel-banner {
 width: 40%;
 height: auto;
 align-items: center;
 margin: auto;
}
/* End container CSS */

/* Sub-container CSS */
/*.video-sub-container {
  font-family: "arial narrow", sans-serif;
  font-weight: bold;
  font-size: 14px;
} Disabled, won't work, kept for reference and research as to why. */

/* .video-sub-container div {
  font-family: "arial narrow", sans-serif;
  font-weight: bold;
  font-size: 14px;
} Also disabled. */

summary { /* Apparently, ".video-sub-container" wouldn't work. */
  font-family: "arial narrow", sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.note {
 font-family: "arial narrow", sans-serif;
 font-size: 20px;
 font-weight: bold;
}