/* 
--------------------------------------
VARIABLES
--------------------------------------
*/
:root {
  --color-yellow: #fce77e;
  --color-pink: #ff06fe;
  --color-blue: #b5d5ff;
  --color-onawhim: #0e0e4d;
}
/*
--------------------------------------
FONTS
--------------------------------------
*/  
@font-face {
	font-family: main-font;
	src: url('/img/AveriaLibre-Regular.ttf') format('truetype');	
}
@font-face {
  font-family: title-font;
  src: url('/img/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
}
/* 
--------------------------------------
GLOBAL
--------------------------------------
*/  
html {
  font-size: 20px;
}
body, textarea {
	font-family: main-font, sans-serif;      					
  margin: 0;
  padding: 0; 
}
h2 {
  font-size: 1.75rem;
  margin-top: 0;
  margin-bottom: 0rem;
}
p {
  line-height: 1.5rem; 
  margin: 1.5rem 0; 
}
p.by {
  margin-top: 0.2rem;
}
a {  
  text-decoration: none;
}
a:hover {  
  text-decoration: underline;
}
.hidden {
  display: none;
}
.success {
  color: green;
}
.error {
  color: red;
}
/* 
--------------------------------------
SPECIAL
--------------------------------------
*/  
span.onawhim {
  color: var(--color-onawhim);
  font-weight: bold;
  font-style: italic;
}
span.pink {
  color: var(--color-pink);
  font-weight: bold; 
}
/* 
--------------------------------------
LAYOUT
--------------------------------------
*/
div#container {
  min-width: 600px;  
}
main {
  padding: 0;
}
div#welcome > div {
  padding: 20px;
}
footer {
  align-items: center;
  display: flex;
  padding: 40px 0;
  white-space: nowrap;  
  max-width: 1200px;
}
footer > div {
  padding: 0 40px;
  text-align: left;
}
/* 
--------------------------------------
HEADER
--------------------------------------
*/  
header {   
  background: white;
  min-height: 7rem; 
  padding-left: 20px;   
}
header img {    
  height: 200px;
}
header h1 {
  font-size: 3.75rem;
  font-family: title-font, serif;
  margin: 0;
}
header nav {
  float: right;
  padding: 20px;
}
nav span.divider {
  color: #ccc; 
}
nav span.current {
  color: var(--color-onawhim);
  border-bottom: 2px solid var(--color-onawhim);
}
/* 
--------------------------------------
BOOK
--------------------------------------
*/  
div.book-card {
  padding: 40px;
  display: grid;  
  gap: 5rem;
  grid-template-columns: 0fr 1fr;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);  
}
div.book-image img {
  width: 500px;
}
div.book-details {    
  max-width: 350px;
}
@media (max-width: 1000px) {
  div.book-card {
    grid-template-columns: 1fr; /* stack vertically */
  }
  div.book-details {
    max-width: 100%;
  }
}
/* 
--------------------------------------
PRICES
--------------------------------------
*/  
table {
  border-collapse: collapse;   
  margin: 0;
  padding: 0;
}
td, th {
  text-align: left;  
}
th {
  font-size: 0.8rem;  
  font-weight: normal;
  padding: 0 10px;
}
td {
  border-top:1px solid #bbb;  
  padding: 10px;
  white-space: nowrap;
}
/* 
--------------------------------------
CONTACT
--------------------------------------
*/  
form.contact {  
  margin: 20px;
  align-items: start;
  display: grid;
  grid-template-columns: 0fr 1fr;
  grid-gap: 1rem;
}
form.contact input {
  font-size: 1rem;
  padding: 10px;  
}
form.contact label {
  padding: 10px;
  text-align: right;    
}
form.contact textarea {
  font-size: 1rem;
  height: 10rem;    
  padding: 10px;
  resize: vertical;
}
form.contact button {
  font-size: 1rem;
  grid-column: 2;
  padding: 10px;
  max-width: 10rem;
}