@charset "utf-8";

/*
   New Perspectives on HTML and CSS, 8th Edition
   Tutorial 6
   Case Problem 2

   Calendar Style Sheet
   Author: Drew Owens
   Date:   11-10-2025

   Filename:   lht_tables.css

*/

/* ===============================
   Mobile Styles: 0px to 640px 
   ===============================
*/
@media screen and (max-width: 640px)
table,
  tbody,
  tr,
  td,
  th,
  caption {
    display: block;
  }

  thead h1 {
    display: none;
  }

  caption {
    background-color: #666; /* medium gray */
    color: white;
    font-size: 1.5em;
    line-height: 2em;
    text-align: center;
    padding: 0.5em 0;
  }
body{
   font-size: 16px;
}
td {
  border: 1px dotted gray;           /* (a) dotted gray border */
  color: rgb(11, 12, 145);           /* (b) text color */
  position: relative;                /* (c) relative positioning */
  padding-left: 40%;                 /* (d) left padding */
  min-height: 40px;                  /* (e) minimum height */
}
tr:nth-of-type(odd) {
  background-color: rgb(255, 235, 178);  /* light yellow background */
  border: 2px solid gray;                /* solid gray border */
}

td::before {
  content: attr(data-date);     /* Inserts the value of the data-date attribute */
  position: absolute;           /* (a) Absolute positioning */
  top: 0;                       /* (a) Y-coordinate */
  left: 0;                      /* (a) X-coordinate */
  width: 40%;                   /* (b) Width of the inserted text block */
  padding: 5px;                 /* (c) Padding space */
}

/* =============================================
   Tablet and Desktop Styles: greater than 640px
   =============================================
*/