@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
.devise {
	display: flex;
	justify-content: center;
	height:90vh;
	align-items: center;
}

.flex-container {
	display: flex;
	border: 5px solid var(--secondary);
	border-radius: 25px;
	align-items: center;
	justify-content: center;
	background-color: white;
	padding: 15px 20px;
}

.form-container {
	padding: 10px 30px;
}

.devise .form-container h2 {
	text-align: center;
}

.new_user {
	padding-top: 0.5rem;
}

.devise .stack-small {
	margin-bottom: 1rem;
}

.devise .stack a {
	color: var(--tertiary)
}

.actions input {
	display: block;
	margin: 0.5rem  auto;

	border: 2px solid var(--secondary);
	background-color: var(--secondary-opaque);
	border-radius: 5px;
	padding: 5px 10px;
	transition: background-color 0.15s;
	cursor: pointer;
}

.actions input:hover,
.actions input:focus {
	background-color: var(--secondary);
}


/* Custom styles for password#new */

.password-new h2 {
	padding-bottom: 1rem;
}

.password-new .actions input {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
/* Styles for Feed */
.feed-show-page {
	display: grid;
	grid-template-columns: 0.8fr 2fr 0.8fr;
	justify-items: center;
}

.feed-show-page > * {
	min-width: 400px;
	max-width: 650px;
}

.heading-container {
	width: 100%;
	grid-area: 1 / 2 / 2 / 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 35px 15px 10px 15px;
}

.heading-container img {
	padding: 3px;
	border-radius: 13px;
	transition: box-shadow 0.15s
}

.heading-container img:hover {
	box-shadow: var(--hover-shadow);
}

.new-post {
	position: relative;
}

.new-post-links {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 0.875rem;
	white-space: nowrap;
	background-color: rgb(231, 229, 229);
	padding: 5px 10px;
	border-radius: 5px;
	box-shadow: 1px 1px 2px var(--box-shadow-color-dark);
	opacity: 0;
	transition: opacity 0.15s;
	pointer-events: none; 
}

.new-post:hover .new-post-links{
	opacity: 1;
	pointer-events: auto;
	cursor: pointer; 
}

.feed-items {
	justify-self: center;
	display: grid;
	row-gap: 10px;
	grid-column-start: 2;
	grid-column-end: 3;
}
.success, .alert, .error, .notice {
	position: absolute;
	top: 12vh;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: auto;
	margin-right: auto;
}

.success {
	background-color: rgb(126, 233, 126);
	border: 2px solid rgb(56, 146, 56);
	border-radius: 5px;
	padding: 3px 5px;
}

.error, .alert {
	background-color: rgb(238, 104, 104);
	border: 2px solid red;
	border-radius: 5px;
	padding: 5px 10px;
}

.notice {
	background-color: rgb(128, 128, 214);
	border: 2px solid rgb(67, 67, 131);
	border-radius: 5px;
	padding: 5px 10px;
}
.follow-page h1 {
	text-align: center;
	padding-top: 35px;
}

.follow-page > p {
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.users {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
}

.user {
	background-color: white;
	padding: 15px 20px;
	border-radius: 15px;
	box-shadow: 2px 2px 2px var(--box-shadow-color);

	min-width: 400px;
	max-width: 650px;
	width: 75vw;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.user .profile-picture {
	border-radius: 20px;

	width: 40px;
	height: 40px;
	object-fit: cover;
}

.users .username {
	flex: 1;
}

.follow-button {
	color: rgb(70, 95, 83);
	border: 2px solid var(--secondary);
	background-color: var(--secondary-opaque);
	border-radius: 25px;
	padding: 5px 15px;
	transition: background-color 0.15s;
	cursor: pointer;
}

.follow-button:hover,
.follow-button:focus {
	background-color: var(--secondary);
}
.following-page h1 {
	text-align: center;
	padding-top: 35px;
}

.following-page > p {
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.followees {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
}

.followee {
	background-color: white;
	padding: 15px 20px;
	border-radius: 15px;
	box-shadow: 2px 2px 2px var(--box-shadow-color);

	min-width: 400px;
	max-width: 650px;
	width: 75vw;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.followee .profile-picture {
	border-radius: 20px;
	
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.followees .followeename {
	flex: 1;
}

.unfollow-button {
	color: rgb(70, 95, 83);
	border: 2px solid var(--secondary);
	background-color: var(--secondary-opaque);
	border-radius: 25px;
	padding: 5px 15px;
	transition: background-color 0.15s;
	cursor: pointer;
}

.unfollow-button:hover,
.unfollow-button:focus {
	background-color: var(--secondary);
}
footer {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--secondary);
	font-size: 0.875rem;
	border-top: 2px solid var(--tertiary);
	margin-top: 10px;
	padding: 5px 0;
}

.attributions-container {
	position: relative;
}

.attributions-container:hover p:first-child {
	text-decoration: underline;

}

.attributions {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -100%);
	background-color: white;
	border: 20px solid var(--tertiary);
	border-radius: 15px;
	white-space: nowrap;
	padding: 25px 30px;
	color: rgba(0, 0, 0, 0.877);
	font-size: 1rem;
	opacity: 0;
	transition: opacity 0.15s;
	pointer-events: none; 
}

.attributions a {
	text-decoration: underline;
}

.attributions-container:hover .attributions {
	opacity: 1;
	pointer-events: auto;
}
/* Post and Comment form styles */
.form h1 {
	text-align: center;
	padding: 35px 15px 10px 15px;
}

.form textarea,
.form input {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.form textarea {
	border: 4px solid var(--secondary);
	border-radius: 5px;
	padding: 10px 15px;
	margin-top: 1.5rem;
	width: 60vw;
	height: 35vh;
}

.submit {
	color: rgb(70, 95, 83);
	font-size: 1.125rem;
	margin-top: 30px;
	border: 2px solid var(--secondary);
	background-color: var(--secondary-opaque);
	border-radius: 25px;
	padding: 5px 15px;
	transition: background-color 0.15s;
	cursor: pointer;
}

.submit:hover {
	background-color: var(--secondary);
}

/* Style 'Edit' comment turbo frame below posts */

.post form {
	display: flex;
	gap: 0.75rem;
	align-items: start;
}

.post textarea {
	border: 2px solid var(--secondary);
	border-radius: 15px;
	padding: 5px 10px;
}

.post .submit {
	margin-top: 0;
	font-size: 0.875rem;
}

/* Image post form styles */

#image_post_body {
	background-color: white;
	margin-top: 1.5rem;
	padding: 10px 20px;
	border: 2px solid var(--secondary);
	border-radius: 25px;
}

.current-image-post {
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	text-align: center;
}

.current-image-post p {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Edit#profile form styles*/

.edit-profile h1 {
	text-align: center;
	padding: 35px 15px 10px 15px;
}

.form-group {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1rem;
}

.form-field {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
}

.form-group .form-field:last-child {
	display:flex;
	flex-direction: column;
}

.form-group .form-field:last-child label {
	text-align: center;
}

.form-field input,
.form-field textarea {
	border: 2px solid var(--secondary);
	flex: 1;
}

.form-field input {
	border-radius: 25px;
	padding: 5px 15px;
}

.form-field textarea {
	border-radius: 10px;
	padding: 10px 15px;
}

.profile-picture-section {
	background-color: white;
	border: 2px solid var(--secondary);
	border-radius: 10px;
	padding: 10px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
}

.profile-picture-section img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50px;
	flex-shrink: 0;
	flex-grow: 0;
}

.profile-picture-section > * {
	display:flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.form-group .submit {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.profile-picture-section a {
	font-size: 0.875rem;
	color: rgb(70, 95, 83);
	background-color: var(--secondary-opaque);
	border: 2px solid var(--secondary);
	border-radius: 20px;
	padding: 5px 15px;
	transition: background-color 0.15s;
}

.profile-picture-section a:hover {
	text-decoration: none;
	background-color: var(--secondary);
	cursor: pointer;
}

#error_explanation h2 {
	font-family: "Inter var", sans-serif;
	font-size: 1rem;
}

#error_explanation li {
	font-size: 0.75rem;
}

#error_explanation {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: rgba(255, 0, 0, 0.664);
}
header {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	background: white;
	padding: 10px 20px;
	align-items: center;
}

nav {
	display: flex;
	justify-content: center;
	gap: 15%;
}

header div:last-child {
	height: 100%;
}

header .button_to {
	justify-self: end;
	height: 100%;
}

header .button_to button {
	border: none;
	background-color: transparent;
	height: 100%;
}

nav a, header .button_to button  {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 3px solid transparent;
	width: 70px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-radius: 10px;
	white-space: nowrap;
	transition: background-color 0.15s;
	transition: border 0.15s;
}

nav a:hover, header .button_to button:hover, 
nav a:focus, header .button_to button:focus {
	background-color: var(--primary);
	border: 3px solid var(--secondary);
} 

nav a p, header .button_to button p {
	line-height: 1;
	font-size: 0.875rem;
}

header .button_to button:hover, 
header .button_to button:focus {
	text-decoration: underline;
	cursor: pointer;
}

nav a:last-child img {
	border-radius: 15px;
	width: 30px;
	height: 30px;
	object-fit: cover;
}


/* Styles for post header */

.post {
	background-color: white;
	padding: 10px 15px;
	border-radius: 10px;
	box-shadow: 2px 2px 2px var(--box-shadow-color);
}

.post-header {
	display: flex;
	gap: 10px;
	align-items: center;
}

.post-meta-data {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.post-header .profile-picture, 
.post-header .menu-button img {
	width: fit-content;
	border-radius: 20px;
}

.post-header .profile-picture {
	width: 40px;
	height: 40px;
	object-fit: cover;
	flex-shrink: 0;
	flex-grow: 0;
}

.post-author a {
	font-size: 0.875rem;
	font-weight: 600;
	transition: 0.15s;
}

.post-date {
	color: rgba(0, 0, 0, 0.733);
	font-size: 0.75rem;
}

.menu-button-container {
	position: relative;
}

.menu-button {
	background-color: transparent;
	border:none;
}

.menu-button-container img:hover, 
.menu-button-container img:focus {
	box-shadow: var(--hover-shadow);
	cursor: pointer;
	transition: box-shadow 0.15s;
}

.menu-button-container .author-options {
	position: absolute;
	top: 20px;
	right: 0;
	background-color: rgb(231, 229, 229);
	width: fit-content;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 5px;
	box-shadow: 1px 1px 2px var(--box-shadow-color-dark);
}

.author-options a {
	font-size: 0.875rem;
}

.author-options button {
	background-color: transparent;
	border: none;
	padding: 0;
	font-size: 0.875rem;
	cursor: pointer;
}

.author-options button:hover {
	text-decoration: underline;
} 

/* Styles for post body */

.post-body {
	padding-top: 15px;
	white-space: pre-wrap;
}

/* Styles for post likes */

.like-container {
	font-size: 0.875rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.like-container button {
	padding: 2px;
	border-radius: 8px;
	border: none;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.like-container button:hover {
	box-shadow: var(--hover-shadow);
	cursor: pointer;
	transition: box-shadow 0.15s;
}

/* Styles for the post's comment section */

.add-comment {
	font-size: 0.875rem;
	display: block;
	text-align: right;
}

.comment-container {
	display: flex;
	gap: 5px;
	padding-top: 5px;
}

.comment-container .profile-picture {
	width: 35px;
	height: 35px;
	border-radius: 18px;
	object-fit: cover;
	flex-shrink: 0;
	flex-grow: 0;
}

.comment-information {
	background-color: rgba(218, 218, 218, 0.541);
	border-radius: 15px;
	padding: 5px 10px;
}

.commenter {
	font-size: 0.75rem;
	font-weight: 600;
}

.comment-body{
	font-size: 0.875rem;
	white-space: pre-wrap;
}

.comment-actions {
	display:flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding-left: 10px;
}

.button_to {
	display: flex;
	align-items: center;
}

.comment-actions a, .comment-actions button {
	color: rgb(170, 168, 168);
	font-size: 0.75rem;
	font-weight: 600;
}

.comment-actions button {
	border: none;
	background: transparent;
	padding: 0;
}

.comment-actions button:hover {
	text-decoration: underline;
	cursor: pointer;
}
.profile-page {
	display: flex;
	flex-direction: column;
}

.profile-page h1 {
	text-align: center;
	padding-top: 35px;
	padding-bottom: 15px;
}

.profile-card {
	width: 55%;
	min-width: 500px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	border: 5px solid var(--secondary);
	border-radius: 25px;
	background-color: white;
}
.profile-information-container {
	font-size: 1.25rem;
	padding: 20px 40px;
	display:flex;
	justify-content: space-evenly;
	gap: 7.5vw;
}

.profile-information-container img {
	border-radius: 100px;
	height: 200px;
	width: 200px;
	object-fit: cover;
	flex-shrink: 0;
	flex-grow: 0;
}

.profile-details {
	min-width: 30%;
	align-self: center;
}

.profile-page hr {
	margin: 1rem 40px;
	border: 1px solid var(--secondary);
}

.profile-buttons {
	padding-top: 10px;
	padding-bottom: 20px;
	display:flex;
	justify-content: space-around;
	align-items: center;
}

.profile-buttons button, 
.profile-buttons a {
	border: 2px solid var(--secondary);
	background-color: var(--primary);
	border-radius: 5px;
	padding: 5px 10px;
	transition: background-color 0.15s;
	cursor: pointer;
}

.profile-buttons button:hover, 
.profile-buttons a:hover,
.profile-buttons button:focus, 
.profile-buttons a:focus {
	background-color: var(--secondary);
	text-decoration: none;
}

.profile-feed {
	display: grid;
	grid-template-columns: 0.8fr 2fr 0.8fr;
	justify-items: center;
}

.profile-feed > * {
	min-width: 400px;
	max-width: 650px;
	width: 72vw;
}

.profile-feed h2 {
	width: 100%;
	grid-area: 1 / 2 / 2 / 3;
	padding: 35px 15px 10px 15px;
}

.profile-feed-items {
	justify-self: center;
	display: grid;
	row-gap: 10px;
	grid-column-start: 2;
	grid-column-end: 3;
}



/* reset based on https://mattbrictson.com/blog/organizing-css-in-rails */

:root {
	line-height: 1.5;
}

h1, h2, h3, h4, h5, figure, p, ol, ul {
	margin: 0;
}

ol, ul {
	list-style: none;
	padding-inline: 0;
}

h1, h2, h3, h4, h5 {
	font-size: inherit;
	font-weight: inherit;
}

img {
	display: block;
	max-inline-size: 100%;
}
/* Global styles */
:root {
	--hover-shadow: 1px 1px 4px rgba(116, 116, 116, 0.678);
	--box-shadow-color: rgba(0, 0, 0, 0.178);
	--box-shadow-color-dark: rgba(116, 116, 116, 0.808);
	--primary: rgba(189, 230, 189, 0.473);
	--secondary: rgba(125, 162, 144, 1);
	--secondary-opaque: rgba(125, 162, 144, 0.260);
	--tertiary: rgb(90, 121, 106, 1);
}

* {
	box-sizing: border-box;
}

body {
	background-color: rgba(189, 230, 189, 0.473);
  font-family: "Inter var", sans-serif; 
	margin: 0;
	position:relative;
	min-height: 100vh;
}

h1 {
	font-family: "Pacifico", serif;
	font-size: 2.25rem;
	color:rgba(0, 0, 0, 0.863);
}

h2 {
	font-family: "Pacifico", serif;
	font-size: 2rem;
}

a {
	color: black;
	text-decoration: none;
}

a:hover, a:focus {
	text-decoration: underline;
}

.hidden {
	opacity:0;
	pointer-events: none;
}

.profile-picture {
	box-shadow: 1px 1px 2px var(--box-shadow-color);
}

.stack, .stack-small {
	display: block;
}

.stack > * + * {
	margin-top: 1.25rem;
}

.stack-small > * + * {
	margin-top: 1rem;
}

main {
	padding-bottom: 75px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *




 */