/*
*
* ===  MAIN CSS  ===
*
*/

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #191d1f; background-image: url('../images/background.png'); background-size: cover;  }

main.offline { min-height: 100vh; max-width: 100vw; display: flex; justify-content: center; align-items: center; padding: 25px; }
main.online { min-height: calc(100vh - (136px)); max-width: 100vw; display: flex; justify-content: center; align-items: center; padding: 50px; }

main.gallery { flex-wrap: wrap; }
main.gallery section { transition: 0.7s; min-width: 15%; max-width: 15%; margin-right: 5%; border: 4px solid #eee; position: relative; }
main.gallery section .container { margin-bottom: 0; }
main.gallery section:nth-of-type(5n+5) { margin-right: 0px; }
main.gallery section:nth-of-type(1n+6) { margin-top: 2%; }
main.gallery section:last-of-type { margin-right: 0px; }
main.gallery section img { max-height: 300px; }
main.gallery .img_remove_button { position: absolute; right: -31px; top: calc(50% - 20px); background-color: white; padding: 10px 12px 10px; }

main.posts { flex-wrap: wrap; }
main.posts .post { margin-right: 5%; border: 4px solid transparent; position: relative; }
main.posts .post:nth-of-type(3n+3) { margin-right: 0%; }
main.posts .post:nth-of-type(1n+4) { margin-top: 4%; }
main.posts .post:last-of-type { margin-right: 0%; }
main.posts .post .container { padding: 0; overflow: auto; min-height: 100%; }
main.posts .post .container h3 { border: none; padding-top: 10px; }
main.posts .post .post_top { padding: 0; position: relative; clear: both; background-color: #eee;}
main.posts .post .post_top .category { display: inline-block; padding: 24.5px 35px; float: left; }
main.posts .post .post_top .info { display: inline-block; padding: 15px; }
main.posts .post .post_top .options { display: inline-block; float: right; padding: 24.5px 25px; }
main.posts .post .post_content { padding: 10px 25px 25px; }
main.posts .post_page { margin-right: 0%; }
main.posts .post_page:nth-of-type(1n+2) { margin-top: 3%; }
main.posts .comments:nth-of-type(1n+2) { margin-top: 2%; }
main.posts .comments .info { line-height: 22px; border-bottom: 1px solid #bbb; padding-bottom: 15px; margin-bottom: 15px; }
main.single_post { align-items: initial; }

.col1-section { min-height: 100%; width: 70%; max-width: 70%; }
.col2-section { min-height: 100%; width: 40%; max-width: 40%; }
.col3-section { min-height: 100%; width: 30%; max-width: 30%; }
.col4-section { min-height: 100%; width: 20%; max-width: 20%; }
.container { padding: 25px; padding-top: 15px; background-color: rgba(255,255,255,1); margin-bottom: 25px; box-shadow: 0px 15px 20px black; }
.container:last-of-type { margin-bottom: 0px; }
.container h2, .container h3 { text-align: center; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #bbb; }
.container p { padding-bottom: 0; }
.error_warning { background-color: #e0e079; color: #797945; padding: 25px; }
.success { background-color: #8ae079; color: #38632f; padding: 25px; }
.success_removal { background-color: #b14b4b; color: #350b0b; padding: 25px; }

.edit_btn { color: #276490; margin-right: 20px; }
.edit_btn:hover { text-shadow: 0 0 15px #276490; }
.remove_btn { color: #8e2a2a; }
.remove_btn:hover { text-shadow: 0 0 15px #8e2a2a; }

section.comments .remove_btn { color: #8e2a2a; margin-left: 10px; }

#admin_panel { background-color: #1e282d; width: 200px; height: 100vh; left: 0; position: fixed; box-shadow: 0 0 25px black; display: flex; flex-direction: column; text-align: center; }
#admin_panel ul { margin: 15px 25px 25px 25px; padding-top: 10px; border-top: 1px dashed #4d555a; }
#admin_panel .fa { margin-right: 5px; }
#admin_panel ul a { list-style: none; color: #4d555a; text-align: left; }
#admin_panel ul a:hover { text-decoration: none; color: #757f86; }
#admin_panel ul a li { padding: 3px 7px; }
#admin_panel ul a:hover li { background-color: #1c2327; }
#admin_panel ul li.admin_title { text-align: left; list-style: none; padding: 0 0 5px; color: #757f86; }
header, main.online, footer { max-width: calc(100vw - 200px); margin-left: 200px; }

img { width: 100%; }

form input { width: 100%; padding: 10px; margin-bottom: 15px; }
form select { width: 100%; padding: 10px; margin-bottom: 15px; }
form textarea { width: 100%; padding: 10px; margin-bottom: 15px; resize: vertical; }
form input::placeholder { color: #aaa; }
form textarea::placeholder { color: #aaa; }
form p { margin-bottom: 15px; padding-left: 10px; display: flex; align-items: center; position: relative; }
form input[type='checkbox'] { width: auto; margin-left: 10px; }
form input[type='file'] { padding: 0; }
form input[type='color'] { padding: 5px 7px; height: 50px; }
form input:last-of-type { margin-bottom: 0; }

#category_display { width: 100%; border: 1px solid black; border-collapse: collapse; margin-top: 10px; }
#category_display th, #category_display td { border: 1px solid #1e282d; padding: 10px; font-weight: normal; }
#category_display th { color: #757f86; background-color: #1e282d; }
#category_display tr th:first-of-type, #category_display tr td:first-of-type { width: 50%; }
#category_display tr th:nth-of-type(2), #category_display tr td:nth-of-type(2) { width: 25%; text-align: center; }
#category_display tr th:last-of-type, #category_display tr td:last-of-type { width: 25%; text-align: center; }

/*
*
* ===  RESPONSIVITY  ===
*
*/

@media (max-width: 1800px) { 
	main.gallery section { min-width: 20%; max-width: 20%; }
	main.gallery section:nth-of-type(1n+1) { margin-right: 5%; }
	main.gallery section:nth-of-type(4n+4) { margin-right: 0px; }
	main.gallery section:nth-of-type(1n+5) { margin-top: 3%; }

	main.posts .post:nth-of-type(1n+1) { margin-right: 5%; }
	main.posts .post:nth-of-type(2n+2) { margin-right: 0%; }
	main.posts .post:nth-of-type(1n+3) { margin-top: 4%; }

	main.posts .post_page:nth-of-type(1n+1) { margin-right: 0%; }

	.col1-section { width: 80%; max-width: 80%; }
	.col2-section { width: 60%; max-width: 60%; }
	.col3-section { width: 45%; max-width: 45%; }
	.col4-section { width: 35%; max-width: 35%; }

	main.offline .col4-section { width: 25%; max-width: 25%; }
}

@media (max-width: 1400px) { 
	main.gallery section { min-width: 27%; max-width: 27%; }
	main.gallery section:nth-of-type(1n+1) { margin-right: 6%; }
	main.gallery section:nth-of-type(3n+3) { margin-right: 0px; }
	main.gallery section:nth-of-type(1n+4) { margin-top: 4%; }

	main.posts .post:nth-of-type(1n+1) { margin-right: 0%; }
	main.posts .post:nth-of-type(1n+2) { margin-top: 10%; }

	main.posts .comments:nth-of-type(1n+2) { margin-top: 3%; }

	.col1-section { width: 90%; max-width: 90%; }
	.col2-section { width: 80%; max-width: 80%; }
	.col3-section { width: 70%; max-width: 70%; }
	.col4-section { width: 60%; max-width: 60%; }

	main.offline .col4-section { width: 35%; max-width: 35%; }
}

@media (max-width: 1100px) { 
	main.gallery section { min-width: 40%; max-width: 40%; }
	main.gallery section:nth-of-type(1n+1) { margin-right: 10%; }
	main.gallery section:nth-of-type(2n+2) { margin-right: 0px; }
	main.gallery section:nth-of-type(1n+3) { margin-top: 6%; }

	main.posts .comments:nth-of-type(1n+2) { margin-top: 5%; }

	.col1-section { width: 100%; max-width: 100%; }
	.col2-section { width: 100%; max-width: 100%; }
	.col3-section { width: 100%; max-width: 100%; }
	.col4-section { width: 100%; max-width: 100%; }

	main.offline .col4-section { width: 45%; max-width: 45%; }
}

@media (max-width: 800px) { 
	main.gallery section { min-width: 80%; max-width: 80%; }
	main.gallery section:nth-of-type(1n+1) { margin-right: 0px; }
	main.gallery section:nth-of-type(1n+2) { margin-top: 10%; }
	main.gallery section img { max-height: initial; }

	main.offline .col4-section { width: 100%; max-width: 100%; }
}