@charset "UTF-8";
/* CSS Document */

/******************************************************\
* SITE URL/NAME  -  fonts                              *
* smashed from the void at oastone.co.uk               *
* version 1, may 2019                                  *
* sets up fonts and basic text styles                  *
\******************************************************/



/* ==== set up those font faces ==== */

/* -- either by embedding fonts from google fonts -- */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap');

/* -- or by using your own web fonts -- */

/*@font-face {
	font-family: 'Perpetua';
    src: url('../fonts/Perpetua.eot');
    src: url('../fonts/Perpetua.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Perpetua.woff2') format('woff2'),
        url('../fonts/Perpetua.woff') format('woff'),
        url('../fonts/Perpetua.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/


/* ==== set base fonts ==== */

body {
	font-family: 'Roboto', Arial, sans-serif;
	font-family: 'M PLUS Rounded 1c', Arial, sans-serif;
	color: #fff;
	font-weight: 400;
	/* trying these here to cover off p, li, ol, etc */
	/*font-size: 1.25rem;*/
	font-size: 14px;
	/*line-height: 1.4rem;*/
	line-height: 21px;
}

input[type=text], textarea {
	font-family: 'M PLUS Rounded 1c', Arial, sans-serif;
}

h1, h2, h3 {
    font-weight: 500;
    font-style: normal;
}

/* ---- root font styles ---- */

* {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

/* ---- typography ---- */
/* -- if using relative sizes (rems) they are based on 16 being the base font size -- */

h1, h2, h3, h4, h5, h6, p, ul, ol {
	margin-bottom: 10px;
}

h1 { /* I tend to hide h1 and match it with the text in <title> */
	display: none; 
}

h2 {
	font-size: 40px;
	line-height: 40px;
}

h3 {
	font-size: 24px;
	line-height: 28px;
}

h4 {
	font-size: 21px;
	line-height: 25px;
}

h5 { 
	font-size: 18px;
	line-height: 22px;
}

h6 {
	font-size: 16px;
	line-height: 20px;
}

p {
	/* covered by global styles */
}
p.large {
	font-size: 21px;
	line-height: 30px;
	font-weight: 500;
}

strong, b {
	
}

body strong, body b { /* this is because body and titles have different fonts */
	font-weight: 700;
}

small {
	font-size: 13px;
	line-height: normal;
}

li {
	margin: 5px 0;
}

ul, ol {
	margin-left: 30px;
}

/* this chunk of code removes the list-style reset */
/*ul { 
    list-style-type: disc; 
    list-style-position: inside;
	margin-left: 15px;
}
ol { 
	list-style-type: decimal; 
	list-style-position: inside; 
	margin-left: 15px;
}
ul ul, ol ul { 
    list-style-type: circle; 
    list-style-position: inside; 
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin; 
    list-style-position: inside; 
    margin-left: 15px; 
}*/
/* ---- */

p, ul, ol, hr {
	margin-bottom: 20px; /* puts more space after <p>, <ul> and <ol> making heirarchy clearer */
}

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6,
ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6,
ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 {
	margin-top: 40px; /* puts large space after <p>/<ul>/<ol>/<hr> when before headings making heirarchy clearer */
} 

p:last-child {
  margin-bottom: 0;
}

a {
	color: #0B5F86;
}

a:hover,
a:active {
	color: #4A1369;
}