/* padding around the description paragraph */
.intro {
    padding-left: 10%;
    padding-right: 10%;
}

/* show tournament as selected on nav bar */
li.tournament a {
    background-color: var(--selected);
    border-radius: 10px;
}

/* input fields styling */
input {
    border-radius: .5em;
    padding: .5em;
    box-shadow: 5px 5px 3px 2px rgba(44, 43, 43, 0.4);
}

/* skill level selector box styling */
select {
    border-radius: .5em;
    padding: .5em;
    box-shadow: 5px 5px 3px 2px rgba(44, 43, 43, 0.4);
}

/* Submit button styling */
.clicky {
    display: inline-block;
    padding: .5em 1.5em;
    font-size: 1.5em;
    background-color: rgb(171, 206, 219);
    cursor: pointer;
}

/* Submit button color change when hovering over it */
.clicky:hover {
    background-color: rgb(68, 174, 209);
}

.videos {
  width: 100%;       /* Makes it fill its container */
  max-width: 500px;  /* Prevents it from getting massive on a giant desktop screen */
  max-height: 500px;      /* Keeps the proportions perfect so it doesn't distort */
  margin-top: 10px;  /* Optional: adds a little breathing room above the video */
  border: 1px solid rgb(33,139,61); /* Frog green border */
  border-radius: 8px;        /* Slightly rounded corners */
  padding: 4px;              /* Space between video and border */
  background-color: #111111; /* Dark background padding */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtle drop shadow */
}

/* Modifier specifically for 9:16 portrait/vertical videos */
.videos.portrait {
  max-width: 280px;   /* Constrains the width so the height scales down nicely */
  display: block;
  margin-left: auto;  /* Optional: centers the smaller video container */
  margin-right: auto;
}

/* Reduces space only for an h3 that is immediately followed by a video */
h3 + .videos {
  margin-top: 0px;
}

@media only screen and (max-width: 460px) {
    .intro {
        padding-left: 5%;
        padding-right: 5%;
    }

    .videos.portrait {
        max-width: 150px;
    }
}