/* universal selector in the <style> element */

/* css variable for fallback */
:root {
  --main-color: rgb(0, 0, 128); /* red, green, blue alpha values */
}

/* class selector */
.title {
  /* absolute unit cm */
  padding: 0.5cm 0.5cm 0.5cm 0.5cm; /* padding short */
  background-color: darkblue; /* color name */
  /* font color */
  color: #ffffff; /* hex code */
  text-decoration: underline; /* text decoration example */
  position: static; /* position static example */
}

/* Combining two selectors */
h1.title {
  text-align: center; /* text align example */
}

/* element selector */
h2 {
  /* padding long */
  padding-left: 3mm; /* absolute unit mm */
  padding-top: 3mm;
  padding-bottom: 3mm;
  background-color: var(--main-color, maroon); /* fallback */
  color: color-mix(
    in srgb,
    white 80%,
    darkblue 20%
  ); /*method to mix colors, values & percentages of color*/
}

img {
  display: block; /* display block example */
}

/* attribute selector */
video[controls] {
  /* sizing */
  width: 40%; /* width */
  height: 30%; /* height */
  max-width: 500px;
  min-width: 200px;
  margin-bottom: 10px;
}

/* id selector */
#details {
  border: 1px solid black;
  border-radius: 10px;
}

/* selector list */
ul,
ol {
  background-color: hsla(
    0,
    79%,
    72%,
    1
  ); /* hue, saturation, lightness, alpha values */
}

/* Pseudo-class and selector */
button:hover {
  cursor: pointer;
  background-color: darkgray;
}

/* pseudo class */
button:active {
  background-color: lightgreen;
}

/* Descendant combinator */
section p {
  font-size: medium;
}

/* Child combinator */
nav > ul {
  list-style-type: none;
  padding: 10px;
}

/* General sibling combinator */
summary ~ p {
  color: color(srgb 1 0.75 0.8); /* predefined color space, values for color space*/
}

/* Adjacent sibling combinator */
h3 + p {
  margin-top: 0; /* margin long */
}

/* :has() */
section:has(ol) {
  /* all border styling */
  border-style: dashed;
  border-width: 1px; /* absolute unit px */
  border-color: black;
  /* 3 relative units */
  border-radius: 1em; /* relative unit em */
  /* margin short */
  margin: 2rem 10% 2rem 10%; /* relative unit % and rem*/
}

/* nested selectors */
form {
  & label {
    font-weight: bold;
  }

  & input,
  & select,
  & textarea {
    margin-top: 0.25rem;
  }
}

.unfinished-business-text {
  /* display none example */
  display: none;
}

@media (min-width: 680px){
    .video-audio-section {
        display: flex; /* flexbox */
        /* 3 flexbox attributes */
        flex-direction: row;
        justify-content: center;
        gap: 5%;
    }

}

@media (min-width: 1000px){
    nav > ul{
        position: absolute; /* position absolute example */
    }
}

@media (max-width: 804px){
    #pictures-title{
        font-size: 15px;
    }
}

#media > div {
  /* grid */
  display: grid;
  /* grid attributes */
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  padding: 0 30px 0 30px;
}