* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  /* background: #000000;
  this was my background-color
  before */
  background-image: repeating-linear-gradient(red, white, blue);
}

/* Header/Blog Title */
header {
  padding: 30px;
  text-align: center;
  background: #ab0c0c;
  color: #ffff;
  opacity: 0.7;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-variant: small-caps;
  text-decoration: underline;
  word-spacing: 10px;
  text-shadow: 5px 5px black;
}

header h1 {
  font-size: 50px;
}

h2 {
	text-shadow: 3px 3px #fff;
}

/* Style the top navigation bar */
nav {
  overflow: hidden;
  background-color: #730101;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-size: 30px;
  font-style: oblique;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: 2px 2px #000;
}

/* Style the navigation links */
nav a {
display: inline-block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
nav a:hover {
  background-color: white;
  color: #730101;
}

/* Change color on visited */ 
nav a:visited {
	background-color: red;
	color: white;
}

/* Change color when link selected */
nav a:active {
	background-color: black;
	color: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
  background-image: linear-gradient(to right, green, yellow);
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-image: linear-gradient(to right, yellow, green);
  padding-left: 20px;
}

/* Fake image */
.fakeimg {
  width: 40%;
  padding: 1px;
  background-image: url(patrick_star.png);
  	border-radius: 50px 50px 50px 50px;
	border: 6px solid black;
	opacity: 0.6;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
  background-position: center;
  background-origin: content-box;
}

/* list color on ordered list */
ol li {
	background-color: blue;
	color: #ffff;
}

/* styling ordered list */
ol {
	background-color: purple;
}

/* list image on unordered list */
ul li {
	list-style-image: url(google_chrome.jpg);
	background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

/* styling table, table head, and table definition */
table, th, td{
	border: 5px solid black;
	background-color: #ffff; 
	border-radius: 10px;
	border-image: url(color_border.jpg) 50 stretch;
	border-image-slice: 10%;
	border-image-width: 5px;
	border-image-outset: 7px;
	border-image-repeat: repeat;
	font-size: 25px;
}

/* Styling the table head */ 
 th {
	color: blue;
	text-align: left;
}

/* Styling the table definition */
td {
	color: green;
	text-align: left;
}

/* border image for table */
.borderimg img{
	height: 200px;
	width: 30%;
	border-image-source: url(color_border.jpg);
}

/* adding a radial-gradient for the Popular Posts article */
.rad-grad {
	background-image: radial-gradient(red, yellow, green);
	border-radius: 50px 50px 50px 50px;
	border: 6px solid white;
	max-width: 100%;
	height: auto;
}

/* styling pagination */ 
.pagination {
	display: inline-block;
	font-size: 30px;
}

/* styling pagination hover links */
.pagination a {
  text-decoration: none;
  background-color: #fff;
}

.pagination a:hover {
	color: #fff; 
	background-color: blue;
}

/* styling pagination active links */
.pagination a:active {
	color: #fff;
	background-color: red;
}
/* Add a card effect for articles */
article {
  background-image: url(background.jpeg);
  padding: 20px;
  margin-top: 20px;
  background-clip: border-box;
  border: 3px solid #850505;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  direction: rtl;
  box-shadow: 7px 7px 7px 7px #f2f2f2;
}

/* Styling paragraphs into breaking all my words in the article */
article p {
	text-overflow: clip;
    border: 1px solid black;
	width: 30%;
	font-size: 30px;
	word-break: break-all;
	font-family: myFirstFont;
	font-weight: bold;
	text-transform: capitalize;
	text-indent: 50px;
	letter-spacing: 5px;
	line-height: 2.0;
}

@font-face {
  font-family: myFirstFont;
  src: url(SansationLight.ttf);
}

/* Styling buttons */
button {
	font-size: 25px;
}

/* Styling button1 */
#button1 { 
	background-color: red;
	color: #fff;
	border-radius: 20px 20px 20px 20px;
	text-decoration: none;
	transition-duration: 2.0s;
}

/* Styling button1 hover */
#button1:hover {
	background-color: #fff;
	color: red;
}

/* Styling button2 */
#button2 {
	background-color: orange;
	color: #fff;
	border-radius: 20px 20px 20px 20px;
	transition-duration: 2.0s;
}

/* Styling button2 hover */
#button2:hover {
	background-color: #fff;
	color: orange;
}

/* Styling button3 */
#button3 {
	background-color: yellow;
	color: #fff;
	border-radius: 20px 20px 20px 20px;
	transition-duration: 2.0s;
} 

/* Styling button3 hover */
#button3:hover {
	background-color: #fff;
	color: yellow;
}

/* Styling button4 */
#button4 {
	background-color: green;
	color: #fff;
	border-radius: 20px 20px 20px 20px;
	transition-duration: 2.0s;
}

/* Styling button2 hover */
#button4:hover {
	background-color: #fff;
	color: green;
}

/* Styling button5 */
#button5 {
	background-color: blue;
	color: #fff;
	border-radius: 20px 20px 20px 20px;
	transition-duration: 2.0s;
}

/* Styling button5 hover*/
#button5:hover {
	background-color: #fff;
	color: blue;
}

/* Styling button6 */
#button6 {
	background-color: purple;
	color: #fff;
	border-radius: 20px 20px 20px 20px;
	transition-duration: 2.0s;
}

/* Styling button6 hover */
#button6:hover {
	background-color: #fff;
	color: purple;
}
/* Clear floats after the columns */
main:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
footer {
  padding: 20px;
  text-align: center;
  /* background: #ab0c0c;
	this was my footer background-color
	before */
	background-image: repeating-radial-gradient(red, yellow);
  color: #00000;
  margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  nav a {
    float: none;
    width: 100%;
  }
}