@charset "utf-8";

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

   Calendar Style Sheet
   Author: Andrew Marks
   Date:   11/9/2025

   Filename:   lht_tables.css

*/

/* ===============================
   Mobile Styles: 0px to 640px 
   ===============================
*/

@media only screen and (max-width: 640px) {
}

table, tbody, tr, td, th, caption {
   display: block;
}

thead, h1 {
   display: none;
}

table caption {
   background: white, gray;
   font-size: 1.5em;
   line-height: 2em;
}

td::before {
   content: attr(data-label);
   position: relative;
   border: 1px dotted gray;
   color: rgb(11, 12, 145);
   padding: 40%;
   min-height: 40px;
}

tr:nth-of-type(odd) {
   background: rgb(255, 235, 178);
   border: 2px gray;
}

td::before {
   content: attr(data-date);
   position: absolute;
   width: 40%;
   padding: 5px;
}

table days {
   background: rgba(232, 214, 148, 0.6);
   box-shadow: gray;
}


table caption {
   display: top;
   display: center;
   padding-bottom: 10px;
   font-size: 1em;
   letter-spacing: 3px;
}

table {
   background: rgb(154, 64, 3);
   color: white;
}

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

@media only screen and (min-width: 641px) {
}

table.calendar {
   border: 6px double rgb(154, 64, 3);
   border-collapse: collapse;
   width: 80%;
}