/* variables Friday */

:root {
  --links : coral;
  --hoverlinks: #0c1852;
  --lighterhoverlinks: rgb(20, 40, 193);
  --listsbackground: rgba(255, 0, 0, 0.0);
  --listingspadd: 15px;
}

/* Andy Bell reset, advanced */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  background-color: black;
  color:cornsilk;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  max-width:1024px;
  min-width:530px;
  margin: 10px auto;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
  color:cornsilk;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

a {
  color: var(--links);
  font-size: 1.2rem;
  text-decoration: none;
  font-weight: 700;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/* Friday */

main {
    display:grid;
    grid-template-areas:    "listings picture"
                            "site-design site-design";
    margin: 0 auto;
}

main a {
  font-size:1.2rem;
  
}

header{
    background-color: var(--hoverlinks);
    padding:20px;
    padding-bottom: 0px;
    border-radius: 5px;
    margin-bottom: 10px;

    height: 220px;
}

header > nav {
  margin-left:-45px;
}

section > h1, header > h1 {
  line-height: 0.5;
  font-size:3rem;
}

header > h2 {
  font-size:1rem;
}

section > h2 {
  font-size: 1.2rem;
}

nav > ul {
  list-style: none;
}

.navlink {
  list-style: none;
  display:block;
  float:left;
  color: var(--links);
  border:2px var(--hoverlinks) solid;
  padding:10px;
  margin-left: 5px;
  border-radius:10px;
 }

.navlink[aria-current="page"] {
  list-style: none;
  display:inline-block;
  background-color: var(--links);
  color:var(--hoverlinks);
  padding:10px;
  border-radius:10px;
  border:2px  var(--links) solid;
  transition:ease-in-out;
}

.navlink:not([aria-current="page"]):hover {
  border:2px  var(--links) solid;
}

section#listings {
  grid-area: listings;
  width:100%;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
	margin-right:10px;
	margin-bottom:10px;
	background-color:#222;
	border-radius:25px;
}

#listings ul {
  list-style-type: none;
}

.freetext {
	text-align:justify;
}

.freetext a {
  font-size: 1rem;

}

.freetext a:hover {
  text-decoration: underline;
}


#picture {
  grid-area: picture;
  width: 100%;
  margin-bottom: 10px;
}

#picture > img {
  border-radius: 20px;
  width: 96%;
  min-width:60px;
  max-width:380px;
  margin-left: 10px;
}

section#availability {
  grid-area: availability;
}

#site-design {
  grid-area: site-design;
  color: cornsilk;
  font-size:0.8rem;
  font-weight:bold;
  background-color:purple;
  padding: 10px;
  padding-bottom: 20px;
  line-height: 1;
  vertical-align: middle;
  text-align:center;
  border-radius:5px;
}

#listings ul li {
  margin-bottom: 8px;

  
}

#listings ul li a {
  border: 2px solid var(--listsbackground);
  margin-left: calc(-1 *  var(--listingspadd) );
  border-radius: 5px;
  padding-right: var(--listingspadd);
  padding-left: var(--listingspadd);
}

#listings ul li a:hover {
  border:2px  var(--links) solid;
  background-color: var(--links);
  color:var(--hoverlinks);
}


.book_article {
  display:inline-block;
  margin-bottom: 10px;
}

.book_article > p {
  text-align: justify;
}

.book_article > h2 {
  margin-top: -7px;
}

.book_cover {

  border:1px solid antiquewhite;
  float:left;
  margin-right: 15px;
}

#book_intro {
  margin-bottom: 3rem;
}