@import url('https://fonts.googleapis.com/css2?family=Lora&family=Raleway:ital@1&display=swap');

body{
background: #ffffff url(img/wild_flowers.png);
margin: 12% auto;
padding: 0 auto;
font: 11pt 'Lora', serif;
color: #343f44;
line-height: 8pt;
text-align: justify;
cursor: default;}

a{
color: #000000;
border:0;
text-decoration: none;
cursor: default;}

a:hover{
color: #000000;
border-bottom: 1px solid #4c0909;
text-decoration: none;
cursor: default;}

b{
text-transform: uppercase;}

main{
display: grid;
width: 686px;
margin: 0 auto;
padding: 0 auto;
grid-template-areas:
	'header header header header';}
	
header{
grid-area: header;
width: 725px;
height: 381px;
background: url(img/simpleclannad.png);}

nav{
position: absolute;
margin-left: 280px;
margin-top: 33px;}

nav .toggle{	
color: #fff;
font: 12px 'Times New Roman', serif;
text-decoration: none;
padding: 5px 10px;
border: 0;
background: #5b5b57;
letter-spacing: 0.17em;}

nav .toggle:hover{
color: #5b5b57;
font: 12px 'Times New Roman', serif;
text-decoration: none;
padding: 5px 10px;
border: 0;
background: #fff;
letter-spacing: 0.17em;}

section{
position: absolute;
width: 390px;
height: 241px;
font: 12px 'Lora', serif;
color: #2c2627;
line-height: 12pt;
margin-left: 260px;
margin-top: 65px;
padding: 0px 15px;
opacity: .85;
filter: alpha(opacity=85);
overflow-y: scroll; 
scrollbar-color:#8a9480 #fffff;
scrollbar-width: thin;
overflow-x: hidden;}

.home, .collection, .exit{
text-align: justify;
padding: 5px 10px;
margin-top: 5px;}

.pages{
padding-top: -50px;}

.outerlinks{
position: absolute;
margin-top: 335px;
margin-left: 376px;
width: 300px;
text-align: right;}

.button{
color: #fff;
font: 12px 'Times New Roman', serif;
text-decoration: none;
padding: 5px 10px;
border: 0;
background: #5b5b57;
letter-spacing: 0.17em;}

.button:hover {
color: #5b5b57;
font: 12px 'Times New Roman', serif;
text-decoration: none;
padding: 5px 10px;
border: 0;
background: #fff;
letter-spacing: 0.17em}

.topshrine{
color: #343f44;
padding: 5px 10px;
border: 0;
background: #e9e7de;}

.topshrine:hover{
color: #343f44;
padding: 5px 10px;
border: 0;
background: #a39986;}

.list{
text-align: center;
font: 11px 'Lora', serif;}

.extra{
padding:10px;
border: 0;
background: #f2f0e9;
font: 11px 'Lora', serif;}