/*
I hate CSS
By Laylahtrix
*/

/*CSS Reset*/
body, header, nav, main, footer, img, h1, h3, ul {
	margin: 0;
	padding: 0;
	border: 0;
}


/* Style rules for body and images */
body {
	background-color: black;
	margin: 1%;
}

img, video {
	max-width: 100%;
	display:block;
}


/*General style rules for text */

h1, h2, h3 {
	color: GreenYellow;
	font-family: 'Courier New', monospace;
}

p {
	color: White;
	font-family: verdana;
	font-size: 16px;
}

ul {
	color: White;
	font-family: verdana;
	font-size: 16px;
	margin-left: 2%;
}

.bloglistindent {
	margin-left: 1%
}

.centertext {
	text-align: center;
}

/* Site Sections */

header {
  padding: 1%;
  border-style: solid;
  border-width: medium;
  border-color: GreenYellow;
  text-align: center;
}

nav ul {
  list-style-type: none;
  text-align: center;
}

nav li {
  display: inline-block;
  font-size: 18px;
}

nav li a {
  display: block;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111;
}

main.general {
	border-style: solid;
	border-width: medium;
	border-color: GreenYellow;
	padding: 1%;
}

/* Main page-specific layout */

/* Apply flexbox layout only to main with a class of 'index' */
main.index {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: stretch;
}

main.index .column {
  border-style: solid;
  border-width: medium;
  border-color: GreenYellow;
  box-sizing: border-box;
  padding: 1%;
  display: flex;
  flex-direction: column;
}

main.index .column.side {
  flex: 0 0 25%;
  max-width: 25%;
}

main.index .column.middle {
  flex: 0 0 75%;
  max-width: 75%;
}

@media screen and (max-width: 600px) {
  main.index {
    flex-direction: column;
  }
  main.index .column.side,
  main.index .column.middle {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

main.index .column > * {
  margin-top: 0;
  margin-bottom: 0.5em;
}

 /* unvisited link */
a:link {
  color: DeepSkyBlue;
}

/* visited link */
a:visited {
  color: DarkViolet;
}

nav li a:visited {
  color: DeepSkyBlue;
}	

/* mouse over link */
a:hover {
  color: DodgerBlue;
}

/* selected link */
a:active {
  color: DarkOrchid ;
} 

/*Image floating*/
.alignright {
	float: right;
}

/* Media query for smaller screens */
@media only screen and (max-width: 600px) {
  .alignright {
    float: none; /* Disable float on screens 768px or smaller */
    margin-right: 0; /* Remove right margin */
    /* Add other styles if needed, like centering the image */
    display: block; /* Make the image a block element */
    margin: 0 auto; /* Center the image */
	width: auto
  }
}