/* Constants */

:root {
    --primary-color: #141414;
    --secondary-color: #3B3B3B;
    --tertiary-color: #636363;
    --hover-tertiary-color: #808080;
    --active-tertiary-color: #585858;

    --button-color: #0096FF;
    --hover-button-color: #00bbFF;

    --light-text: #FAF9F6;

    --large-text: 1.5rem;
    --medium-text: 1.15rem;
    --small-text: 1rem;

    --font-family-prefs: Helvetica, sans-serif, 'Times New Roman', Times, serif;

    --icon-size: 3rem;

    --quarter-spacing: 0.25rem;
    --half-spacing: 0.5rem;
    --full-spacing: 1rem;

    --large-radius: 2rem;
    --small-radius: 1rem;
}

/* Defaults */

body {
    position: fixed;
    background-color: var(--primary-color);
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: var(--font-family-prefs);
    color: var(--light-text);
}

main {display: flex;}

input[type="file"] {display: none;}

img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* ScrollBar */

::-webkit-scrollbar {width: 0.75rem;}

::-webkit-scrollbar-track {
    background: var(--tertiary-color);
    border-radius: var(--small-radius);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 1rem;
    margin: var(--quarter-spacing);
    border-color: var(--tertiary-color);
    border-width: 0.2rem;
    border-style: solid;
}

/* Clickable elements */

#fpTitle:hover, #fpLogin:hover, .searchField::-webkit-search-cancel-button:hover,
#homeButton:hover, #loskationsButton:hover, #messagesButton:hover, 
#searchButton:hover, #postButton:hover, #settingsButton:hover, 
#profileText:hover, #profileIcon:hover, .logoText:hover,
#heartButton:hover, #commentButton:hover, #moreButton:hover,
#searchPeople:hover, #searchPosts:hover, #searchArea:hover,
#result:hover, #conversationProfile:hover, #hotContent:hover,
#hotIconCompressed:hover, #loginTitle:hover, #loginButton:hover,
#signUp:hover, #forgot:hover, #postCloseContainer:hover, #uploadButton:hover,
#signUpButton:hover, #topCommentContainer:hover, #postSelection:hover, #taggedSelection:hover, #accountClose:hover, #accountCloseContainer:hover, #accountSettingsContainer:hover, #accountSettingsButton:hover, #resetButton:hover, #resetTitle:hover, #resetPassButton:hover, .passPeekIcon:hover, #signUp:hover, #loginReturn:hover, #forgotSignUp:hover, #forgotLogin:hover, #loskationSelection:hover, #finalPost:hover, #newConversationButton:hover, #newMessageSearchTitle:hover, #newMessageUser:hover, #newMessageButton:hover {
    cursor: pointer;
}

/* Unselectable */

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Header */

.topStrip {
    display: flex;
    height: 5rem;
    font-family: var(--font-family-prefs);
    padding-left: 6rem;
}

#fpTitle {
    display: grid;
    margin: auto 0;
    font-size: var(--large-text);
    font-family: "Comfortaa";
    font-weight: bold;
    padding: var(--full-spacing);
}

#titleDescription {font-size: var(--small-text);}

#fpLogin {
    display: flex;
    margin: auto;
    margin-right: 5rem;
    padding: var(--full-spacing);
}

#profileIcon {
    height: var(--icon-size);
    margin: auto;
    margin-right: var(--half-spacing);
}

#profileText {
    margin: auto 0;
    font-size: var(--medium-text);
    font-family: "Comfortaa";
}

/* Side Bar */

#sideStrip, #wideStrip {
    position: fixed;
    left: 0;
    top: 30vh;
    background-color: var(--secondary-color);
    margin-right: var(--full-spacing);
    margin-left: var(--half-spacing);
    padding-left: var(--half-spacing);
    height: min-content;
    border-radius: var(--large-radius);
    border-color: var(--primary-color);
    border-width: 0.2rem;
    border-style: solid;
    z-index: 1;
}

#sideStrip {
    display: grid;
    padding: 0;
}

#wideStrip {
    display: none;
    padding: 0;
}

#homeButton, #topStripButton {
    border-top-left-radius: var(--large-radius);
    border-top-right-radius: var(--large-radius);
}

#settingsButton, #bottomStripButton {
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
}

#homeButton, #loskationsButton, #searchButton, #messagesButton, #postButton, #settingsButton {
    height: var(--icon-size);
    padding: var(--half-spacing);
}

#topStripButton:hover, #sideStripButton:hover, #bottomStripButton:hover {background-color: var(--tertiary-color);}

#topStripButton:active, #sideStripButton:active, #bottomStripButton:active {background-color: #585858;}

.logoText {
    display: flex;
    font-size: var(--large-text);
    font-family: var(--font-family-prefs);
    align-items: center;
    padding-right: var(--full-spacing);
}

/* Main Content */

#scrollableContent {
    margin-left: 5.5rem;
    width: min-content;
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    height: 100vh;
}

#scrollableContent::-webkit-scrollbar {display: none;}

.fullContent {
    display: flex;
    background-color: var(--secondary-color);
    border-radius: var(--large-radius);
    padding: var(--half-spacing);
    font-family: var(--font-family-prefs);
    margin-bottom: var(--full-spacing);
    scroll-snap-align: center;
    height: min-content;
}

.mainInfo {
    display: flex;
    flex-direction: column;
    margin: var(--half-spacing);
    width: 19.5rem;
    justify-content: center;
    align-self: center;
    height: 25rem;
}

#contentProfile {
    display: flex;
    height: var(--icon-size);
    padding-right: var(--half-spacing);
}

#contentProfileText {
    display: flex;
    align-items: center;
    padding: var(--half-spacing);
    padding-top: 0;
}

#contentInfoContainer {
    background-color: var(--tertiary-color);
    padding: var(--half-spacing);
    border-radius: var(--small-radius);
    margin-bottom: var(--half-spacing);
}

#contentTitle {
    font-size: var(--large-text);
    margin-top: var(--half-spacing);
}

#topCommentContainer {
    background-color: var(--tertiary-color);
    margin-right: var(--full-spacing);
    border-radius: var(--small-radius);
    padding: var(--half-spacing);
    font-size: var(--medium-text);
}

#topCommentContainer:hover {
    background-color: var(--hover-tertiary-color);
}

#topCommentContainer:active {
    background-color: var(--active-tertiary-color);
}

#topComment {font-size: var(--small-text);}

.mainContent {
    display: flex;
}

#contentButtonInts {
    display: flex;
    flex-direction: row;
    height: min-content;
    width: min-content;
    margin: auto 0.4rem var(--quarter-spacing) 0.4rem;
}

#contentButtons {
    display: flex;
    margin-top: var(--quarter-spacing);
    background-color: var(--tertiary-color);
    border-radius: var(--large-radius);
    width: min-content;
    align-self: center;
}

#heartButton, #commentButton, #moreButton {
    padding: 0.125rem var(--full-spacing);
    height: var(--icon-size);
}

#heartButton {
    padding-left: 0.125rem;
    border-top-left-radius: var(--large-radius);
    border-bottom-left-radius: var(--large-radius);
}

#moreButton {
    padding-right: 0.125rem;
    border-top-right-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
}

#heartButton:hover, #commentButton:hover, #moreButton:hover {background-color: var(--hover-tertiary-color);}

#heartButton:active, #commentButton:active, #moreButton:active {background-color: var(--active-tertiary-color);}

.commentView {
    display: flex;
    flex-direction: column;
    padding: var(--half-spacing);
    align-self: center;
    height: 25rem;
    width: 19.5rem;
}

.commentContainer {
    overflow-y: auto;
    border-radius: var(--small-radius);
}

.commentInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--half-spacing) 0;
    margin-right: var(--half-spacing);
    padding: var(--half-spacing);
    background-color: var(--tertiary-color);
    border-radius: var(--small-radius);
    align-items: start;
}

.commenterProfile {
    display: flex;
    font-weight: bold;
    font-family: "Comfortaa";
}

.commenterIcon {
    height: 1.5rem;
    margin-right: var(--quarter-spacing);
}

.commentText {
    width: max-content;
    margin: 0 var(--half-spacing);
    max-width: 16.11rem;
}

.commentViewButtons {
    justify-self: center;
    display: flex;
    margin-top: var(--quarter-spacing);
    background-color: var(--tertiary-color);
    border-radius: var(--large-radius);
    width: min-content;
    align-self: center;
}

#commentContentButtonInts {
    display: flex;
    flex-direction: row;
    height: min-content;
    width: min-content;
    margin: var(--quarter-spacing) 0;
    margin-left: 0.4rem;
}

span {
    padding: 0.125rem var(--full-spacing);
    height: var(--small-text);
    background-color: var(--tertiary-color);
    border-radius: var(--large-radius);
    margin-left: 3rem;
    margin-top: var(--quarter-spacing);
}

.heartInt, .commentInt {
    position: relative;
    padding: 0.125rem var(--full-spacing);
    height: var(--small-text);
    background-color: var(--tertiary-color);
    border-radius: var(--large-radius);
    margin-top: var(--quarter-spacing);
}

.heartInt {
    left: 3rem;
}

.commentInt {
    left: 5rem;
}

/* Map */

#mapContent, #searchContent, #messageContent {
    z-index: -1;
    position: fixed;
    left: 0;
    margin-left: 5.5rem;
    width: min-content;
    height: min-content;
}

#mapContent {
    display: flex;
    height: 80vh;
    border-radius: var(--small-radius);
    padding: 0.5rem;
    background-color: var(--secondary-color);
}

gmp-map, #map {
    height: 80vh;
    width: 100%;
    border-radius: var(--small-radius);
}

/* Search */

#searchContent, #messageContent {
    background-color: var(--secondary-color);
    border-radius: var(--large-radius);
}

#searchBar {
    display: flex;
    flex-direction: row;
}

.searchField {
    height: 2.5rem;
    width: 84rem;
    border-radius: var(--large-radius);
    margin: 2rem;
    font-size: var(--large-text);
}

.searchField::-webkit-textfield-decoration-container {
    margin: auto var(--full-spacing);
    padding-left: 1.25rem;
    font-size: var(--large-text);
}

.searchField::-webkit-input-placeholder {padding-left: 2.25rem;}

.searchField::-webkit-search-cancel-button {
    -webkit-appearance: none;
    content: url("./img/closeIcon.png");
    height: 1rem;
    width: 1rem;
}

#searchIcon {
    position: absolute;
    height: 2rem;
    left: 0;
    margin: 2.25rem;
}

#searchTypes {
    display: flex;
    height: 3rem;
    width: 100%;
}

#searchPeople, #searchPosts, #searchArea {
    width: 100%;
    align-content: center;
    text-align: center;
    background-color: var(--tertiary-color);
}

#searchPeople, #searchPosts {
    border-right-color: var(--primary-color);
    border-right-style: solid;
    border-right-width: 1px;
}

#searchPeople:hover, #searchPosts:hover, #searchArea:hover {background-color: var(--hover-tertiary-color);}

#searchPeople:active, #searchPosts:active, #searchArea:active {background-color: var(--active-tertiary-color);}

#searchPeopleResults, #searchPostsResults, #searchAreaResults {
    display: block;
    margin: var(--quarter-spacing) var(--quarter-spacing) 1.5rem var(--half-spacing);
    font-size: var(--large-text);
    overflow-y: auto;
    max-height: 65vh;
    min-height: min-content;
}

#result {
    display: flex;
    margin: var(--half-spacing);
    padding: var(--half-spacing);
    height: 100%;
    border-radius: var(--small-radius);
    align-items: center;
    height: min-content;
}

#result:hover {background-color: var(--hover-tertiary-color);}

#result:active {background-color: var(--active-tertiary-color);}

.resultImg {
    height: 10rem;
    padding-right: var(--full-spacing);
}

.profileSearchIcon {
    height: 5rem;
    margin-right: var(--full-spacing);
}

/* Messages */

#messageContent {display: flex;}

#conversationSideStrip {
    display: grid;
    min-height: min-content;
    max-height: 43rem;
    width: 13rem;
    border-right-style: solid;
    border-right-color: var(--primary-color);
    border-right-width: 2px;
    margin-top: var(--full-spacing);
    margin-bottom: var(--full-spacing);
}

#topSideConversation {
    display: flex;
    flex-direction:column;
    margin: 0 auto;
    width: 13rem;
    background-color: var(--secondary-color);
    border-top-left-radius: var(--large-radius);

}

#messageUsername {
    font-size: var(--large-text);
    font-family: "Comfortaa";
    font-weight: bold;
    height: min-content;
    margin: 2rem auto;
}

#messageProfileImg {
    height: 6rem;
    top: 0;
    margin: auto;
}

#conversationsTitle {
    font-weight: bold;
    margin-top: 3rem;
    margin-left: var(--full-spacing);
}

#conversationsList {
    overflow-y: auto;
    margin-right: var(--quarter-spacing);
}

#conversationProfile {
    display: flex;
    align-items: center;
    padding: 0 var(--full-spacing);
}

#conversationProfile:hover {background-color: var(--hover-tertiary-color);}

#conversationProfile:active {background-color: var(--active-tertiary-color);}

#conversationProfileIcon {
    height: var(--icon-size);
    margin: var(--half-spacing);
    margin-left: 0;
}

#conversationContent, #emptyConversationContent {
    border-top-right-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    background-color: var(--secondary-color);
}

#conversationContent {
    display: none;
    align-items: end;
    align-content: end;
    max-height: 43rem;
    min-height: fit-content;
}

#emptyConversationContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}

#recipientUserTitle {
    font-size: var(--medium-text);
    font-family: "Comfortaa";
    position: absolute;
    top: 1rem;
    left: 14rem;
    background-color: var(--tertiary-color);
    padding: var(--half-spacing) var(--full-spacing);
    border-radius: var(--large-radius);
}

#messageBubbleContainer {
    display: block;
    height: 80%;
    width: 95%;
    margin: 4rem var(--full-spacing);
    margin-bottom: var(--half-spacing);
    padding-top: var(--half-spacing);
    border-top-color: var(--tertiary-color);
    border-top-width: 1px;
    border-top-style: solid;
    overflow-y: scroll;
}

.leftBubble, .rightBubble {
    font-size: var(--medium-text);
    padding: var(--quarter-spacing) var(--full-spacing);
    border-radius: var(--small-radius);
    width: fit-content;
    max-width: 50%;
    margin-top: var(--full-spacing);
    overflow-wrap: break-word;
}

.leftBubble {
    background-color: var(--tertiary-color);
    border-bottom-left-radius: 0;
}

.rightBubble {
    background-color: var(--button-color);
    border-bottom-right-radius: 0;
    margin-right: var(--half-spacing);
    margin-left: auto;
}

#writeIcon, #newConversationTitle, #newConversationButton {
    margin-top: var(--half-spacing);
}

#writeIcon {height: 4rem;}

#newConversationTitle {font-size: var(--medium-text);}

#newConversationButton {
    font-size: var(--small-text);
    font-weight: bold;
    padding: var(--half-spacing) var(--full-spacing);
    background-color: var(--button-color);
    border-radius: 0.5rem;
}

#newConversationButton:hover {background-color: var(--hover-button-color)}

#newMessagePopup {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
    margin: 0;
    left: 0;
    top: 0;
    justify-content: center;
    align-content: center;
    z-index: 5;
}

#newMessageSearchContainer {
    font-size: var(--large-text);
    position: absolute;
    margin: 0;
    width: 29rem;
    top: 25vh;
    left: 35%;
    background-color: var(--secondary-color);
    border-radius: var(--large-radius);
    align-content: center;
    text-align: center;
}

#newMessageSearchTitle {
    display: flex;
    background-color: var(--tertiary-color);
    border-top-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    height: 3.5rem;
    width: 3.5rem;
}

#newMessageCloseIcon {
    margin: auto;
    height: 1rem;
}

#newMessageSearchTitle:hover {background-color: var(--hover-tertiary-color);}

#newMessageSearchTitle:active {background-color: var(--active-tertiary-color);}

#newMessageSearchBar {
    display: flex;
    flex-direction: row;
}

#newMessageSearchBarInput {
    margin: var(--half-spacing);
    
}

#newMessageSearchIcon {
    position: absolute;
    height: 2rem;
    left: var(--half-spacing);
    margin: 0.75rem var(--quarter-spacing);
}

#newMessageContainer {
    display: flex;
    flex-direction: column;
    height: 20rem;
    overflow-y: scroll;
    
}

#newMessageUser {
    display: flex;
    flex-direction: row;
    margin: 0 var(--half-spacing);
    padding: var(--half-spacing);
    border-color: var(--tertiary-color);
    border-bottom-style: solid;
    border-width: 1px;
    border-radius: 3px;
    align-items: center;
}

#newMessageUser:hover {
    background-color: var(--active-tertiary-color);
}

#newMessageUserPP {height: 2rem;}

#newMessageUsername, #newMessageUser {
    font-size: var(--small-text);
    font-weight: bold;
    margin-left: var(--half-spacing);
    color: white;
}

#newMessageUser {color: #8f8f8f;}

#newMessageButton {
    font-size: var(--large-text);
    height: 3rem;
    width: 100%;
    background-color: var(--button-color);
    border-color: var(--button-color);
    border-style: solid;
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    border-width: 0.5rem;
    color: inherit;
}

#newMessageButton:hover {
    background-color: var(--hover-button-color);
    border-color: var(--hover-button-color);
}

#conversationInput {
    display: flex;
    height: 2.5rem;
    margin: var(--full-spacing);
    margin-top: 2rem;
    border-radius: var(--large-radius);
    padding: 0 var(--full-spacing);
}

/* Hot Posts */

#hotBox, #hotBoxCompressed {
    position: fixed;
    top: 30vh;
    right: 0;
    background-color: var(--secondary-color);
    border-radius: var(--large-radius);
    padding: var(--full-spacing);
    margin-right: var(--full-spacing);
    margin-left: 10rem;
    font-size: var(--large-text);
    font-family: var(--font-family-prefs);
    height: min-content;
    border-color: var(--primary-color);
    border-width: 0.2rem;
    border-style: solid;
    width: 23rem;
}

#hotBoxCompressed {
    width: min-content;
}

#hotIcon {
    height: var(--icon-size);
    padding-right: var(--half-spacing);
}

#hotContent {
    display: flex;
    background-color: var(--tertiary-color);
    border-radius: var(--small-radius);
    padding: var(--half-spacing);
    margin-top: var(--full-spacing);
    align-items: center;
    font-size: var(--small-text);
    width: 100% - var(--full-spacing);
}

#hotContent:hover {background-color: var(--hover-tertiary-color);}

#hotContent:active {background-color: var(--active-tertiary-color);}

#hotImage {height: var(--icon-size);}

.hotText {margin-left: var(--half-spacing);}

#hotIconCompressed {
    display: flex;
    height: var(--icon-size);
    margin: 0 auto;
}

/* Reset */

#resetPopup {
    position: absolute;
    height: 100%;
    width: 100%;
    display: fixed;
    margin: 0;
    left: 0;
    top: 0;
    justify-content: center;
    align-content: center;
    display: none;
    z-index: 5;
}

#resetContainer {
    font-size: var(--large-text);
    position: absolute;
    margin: 0;
    width: 30%;
    min-width: 29rem;
    top: 25vh;
    left: 35%;
    background-color: var(--secondary-color);
    border-radius: var(--large-radius);
    align-content: center;
    text-align: center;
}

#resetTitle {
    display: flex;
    background-color: var(--tertiary-color);
    border-top-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    height: 3.5rem;
    width: 3.5rem;
}

#resetTitle:hover {background-color: var(--hover-tertiary-color);}

#resetTitle:active {background-color: var(--active-tertiary-color);}

#closeResetIcon {
    margin: auto;
    height: 1rem;
}

#resetEmailTitle, #resetPassTitle, #confirmPassTitle {
    background-color: var(--tertiary-color);
    border-radius: 0.5rem;
    padding: var(--quarter-spacing) var(--half-spacing);
}

#resetEmail, #resetPass, #confirmPass {
    background-color: var(--light-text);
    height: 3rem;
    width: 25rem;
    border-color: var(--tertiary-color);
    border-style: solid;
    border-radius: var(--small-radius);
    border-width: 0.25rem;
    font-size: var(--large-text);
    padding: 0 var(--full-spacing);
    text-align: center;
    justify-items: center;
    margin: 0 var(--half-spacing);
}

#resetPassButton {
    font-size: var(--large-text);
    height: 3rem;
    width: 100%;
    background-color: var(--button-color);
    border-color: var(--button-color);
    border-style: solid;
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    border-width: 0.5rem;
    color: inherit;
}

#resetPassButton:hover {
    background-color: var(--hover-button-color);
    border-color: var(--hover-button-color);
}

/* Login */

#loginPopup {
    position: absolute;
    height: 100%;
    width: 100%;
    display: fixed;
    margin: 0;
    left: 0;
    top: 0;
    justify-content: center;
    align-content: center;
    display: none;
    z-index: 5;
}

#bgGradient {
    display: fixed;
    height: 100%;
    width: 100%;
    align-content: center;
}

#loginContainer {
    font-size: var(--large-text);
    position: absolute;
    margin: 0;
    width: 29rem;
    top: 25vh;
    left: 35%;
    background-color: var(--secondary-color);
    border-radius: var(--large-radius);
    align-content: center;
    text-align: center;
}

#loginTitle {
    display: flex;
    background-color: var(--tertiary-color);
    border-top-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    height: 3.5rem;
    width: 3.5rem;
}

#loginTitle:hover {background-color: var(--hover-tertiary-color);}

#loginTitle:active {background-color: var(--active-tertiary-color);}

#remembermeText {font-size: var(--small-text);}

#closeIcon {
    margin: auto;
    height: 1rem;
}

#loginResponse, #invEmailResponse, #invPassResponse, #invUnResponse, #resetResponse, #matchPassResponse {
    display: none;
    position: absolute;
    font-size: var(--small-text);
    color: var(--light-text);
    background-color: #e0474c;
    width: 27rem;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--small-radius);
}

#userTitle, #passTitle, #newEmailTitle, #newNameTitle, #newUserTitle, #newPassTitle, #forgotEmailTitle {
    background-color: var(--tertiary-color);
    border-radius: 0.5rem;
    padding: var(--quarter-spacing) var(--half-spacing);
}

#user, #pass, #newEmail, #newName, #newUser, #newPass, #forgotEmail {
    background-color: var(--light-text);
    height: 3rem;
    width: 25rem;
    border-color: var(--tertiary-color);
    border-style: solid;
    border-radius: var(--small-radius);
    border-width: 0.25rem;
    font-size: var(--large-text);
    padding: 0 var(--full-spacing);
    text-align: center;
    justify-items: center;
    margin: 0 var(--half-spacing);
}

#newEmail, #newName, #newUser, #newPass, #forgotEmail {
    margin: var(--half-spacing);
}

#resetPasswordPeek, #resetConfirmPasswordPeek, #loginPasswordPeek, #signupPasswordPeek {
    position: absolute;
    right: 30px;
}

#resetPasswordPeek {top:293px;}

#resetConfirmPasswordPeek {top:432px;}

#loginPasswordPeek {top:293px;}

#signupPasswordPeek {top:432px;}

.passPeekIcon {height: 2rem;}

#loginButton, #signUpButton, #resetButton {
    font-size: var(--large-text);
    height: 3rem;
    width: 100%;
    background-color: var(--button-color);
    border-color: var(--button-color);
    border-style: solid;
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    border-width: 0.5rem;
    color: inherit;
}

#loginButton:hover, #signUpButton:hover, #resetButton:hover {
    background-color: var(--hover-button-color);
    border-color: var(--hover-button-color);
}

#loginAlts, #signUpAlts, #forgotAlts {
    display: flex;
    justify-content: center;
    margin: auto;
}

#signUp, #forgot, #loginReturn, #forgotSignUp, #forgotLogin {
    display: flex;
    font-size: var(--small-text);
    margin: var(--full-spacing) auto;
    align-items: center;
    background-color: var(--secondary-color);
    border-radius: 0.5rem;
    padding: var(--quarter-spacing) var(--half-spacing);
    height: 2rem;
}

#signUp:hover, #forgot:hover, #loginReturn:hover, #forgotSignUp:hover, #forgotLogin:hover {
    background-color: var(--hover-tertiary-color);
}

#signUp:active, #forgot:active, #loginReturn:active, #forgotSignUp:active, #forgotLogin:active {background-color: var(--active-tertiary-color);}

#signUpForm, #forgotForm {display: none;}

/* Verified Email */

#verification, #verificationSent, #resetSuccess {
    justify-content: center;
    align-content: center;
    display: none;
    color: var(--light-text);
    background-color: #00FF00;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--large-radius);
}

.checkIcon {height: 3rem;}

#verificationTitle, #verificationSentTitle, #resetSuccessTitle {
    font-size: var(--medium-text);
    font-weight: bold;
}

#verificationText, #verificationSentText, #resetSuccessText {
    font-size: var(--small-text);
    margin: var(--quarter-spacing) 0;
}

/* Post */

#postPopup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 5;
}

#postContainer {
    position: fixed;
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-color);
    text-align: center;
    border-radius: var(--large-radius);
    height: 80vh;
    width: 80vw;
    left: 10vw;
    top: 10vh;
    justify-content: center;
    justify-items: center;
}

#postTopContainer {
    display: flex;
    background-color: var(--tertiary-color);
    border-top-left-radius: var(--large-radius);
    border-top-right-radius: var(--large-radius);
    height: min-content;
    margin: 0;
}

#postCloseContainer {
    background-color: var(--tertiary-color);
    border-top-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    display: flex;
    padding: 0.75rem 1.25rem;
}

#postCloseContainer:hover {background-color: var(--hover-tertiary-color);}

#postCloseContainer:active {background-color: var(--active-tertiary-color);}

#postCloseIcon {height: 1rem;}

#createTitle {
    display: flex;
    background-color: var(--tertiary-color);
    border-top-left-radius: var(--large-radius);
    border-top-right-radius: var(--large-radius);
    font-weight: bold;
    font-size: var(--medium-text);
    height: min-content;
    margin: 0 auto;
    padding: var(--half-spacing) 0;
}

#mainUpload {
    display: block;
    margin: auto;
    width: min-content;
}

#uploadIcon {
    height: 5rem;
    width: 5rem;
    margin-bottom: 2rem;
}

#uploadTitle {
    font-weight: bold;
    width: max-content;
}

#uploadForm {margin: 1.25rem auto;}

#uploadButton {
    font-weight: bold;
    padding: var(--half-spacing) var(--full-spacing);
    border-radius: 0.5rem;
    background-color: var(--button-color);
}

#uploadButton:hover {background-color: var(--hover-button-color);}

#uploadPreview {
    height: 78vh;
    display: none;
    justify-content: center;
    align-items: center;
    justify-self: center;
}

#imgContainer {
    display: flex;
    width: 35vw;
    max-height: 60vh;
    margin: 1rem 0 1rem 1rem;
    border-radius: var(--large-radius);
    padding: 0.5rem;
    background-color: var(--tertiary-color);
}

#imgPreview {
    display: flex;
    width: 100%;
    max-width: 35vw;
    object-fit: contain;
    border-radius: var(--large-radius);
}

#postForm {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-items: center;
    margin: 1rem 1rem 1rem 0;
    background-color: var(--tertiary-color);
    border-top-right-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    align-content: center;
    width: min-content;
    color: var(--light-text);
}

#titleLabel, #captionLabel {
    font-weight: bold;
    font-size: var(--medium-text);
}

#postTitle, #postCaption {
    flex-grow: 1;
    background-color: var(--primary-color);
    border-style: hidden;
    height: 2rem;
    margin: 0.5rem 0;
    border-radius: var(--small-radius);
    font-size: var(--medium-text);
    padding: 0.5rem;
    color: var(--light-text);
    resize: none;
    font-family: var(--font-family-prefs);
}

#postCaption {
    height: 6rem;
}

#loskationSelection {
    position: fixed;
    align-self: end;
    height: 2.5rem;
    background-color: var(--button-color);
    padding: 0.5rem auto;
    width: 80vw;
    margin: 0;
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    font-family: "Comfortaa";
    font-weight: bold;
    align-content: center;
}

#loskationSelection:hover, #finalPost:hover {
    background-color: var(--hover-button-color);
}

#loskationSelection:active, #finalPost:active {background-color: #00aaFF;}

#postLoskation {
    display: none;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-self: center;
    margin: auto;
}

#loskationDisplay {
    width: 70vw;
    height: 60vh;
    background-color: var(--tertiary-color);
    border-radius: var(--large-radius);
}

#loskationSearch {
    display: flex;
    flex-direction: row;
    align-self: end;
    width: 70vw;
    margin-top: 2rem;
    align-items: center;
}

#loskationSearchIcon {
    position: absolute;
    height: 2rem;
    left: 5.25vw;
}

#finalPost {
    position: fixed;
    height: 2.5rem;
    background-color: var(--button-color);
    padding: 0.5rem auto;
    width: 80vw;
    margin: 0;
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    font-family: "Comfortaa";
    font-weight: bold;
    align-content: center;
    bottom: 10vh;
    left: 10vw;
}

#submitPost {display: none;}

/* Account popup */

#accountPopup {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

#bgAccountGradient {
    position: fixed;
    height: 100%;
    width: 100%;
    align-content: center;
    z-index: 5;
}

#accountContainer {
    display: flex;
    flex-direction: column;
    width: 80vw;
    height: 80vh;
    background-color: var(--secondary-color);
    border-radius: var(--large-radius);
    z-index: 10;
}

#accountHeader {
    display: flex;
    height: 20vh;
    align-items: center;
}

#accountClose {
    height: 1rem;
}

#accountCloseContainer {
    background-color: var(--tertiary-color);
    border-top-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    display: flex;
    padding: 0.75rem 1.25rem;
}

#accountCloseContainer:hover {
    background-color: var(--hover-tertiary-color);
}

#accountCloseContainer:active {
    background-color: var(--active-tertiary-color);
}

#accountSettingsButton {
    height: 1rem;
}

#accountSettingsContainer {
    background-color: var(--tertiary-color);
    border-top-right-radius: var(--large-radius);
    border-bottom-left-radius: var(--large-radius);
    display: flex;
    padding: 0.75rem 1.25rem;
}

#accountSettingsContainer:hover {
    background-color: var(--hover-tertiary-color);
}

#accountSettingsContainer:active {
    background-color: var(--active-tertiary-color);
}

#accountPP {
    height: 8rem;
    margin-right: 1rem;
    margin-left: 5rem;
}

#accountTopBar {
    display: flex;
    align-items:  center;
}

#accountTitle {
    width: 75vw;
    text-align: center;
    font-weight: bold;
    font-family: 'Comfortaa';
}

#theAccount {
    display: block;
    font-size: var(--medium-text);
    margin: 1rem;
    align-items:  center;
}

#accountStats {
    display: flex;
    font-size: var(--small-text);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

#accountBio {
    font-size: var(--small-text);
    margin-left: 1rem;
    max-width: 50vw;
}

#postCount, #followerCount, #followingCount, #accountName, #accountUsername {
    font-weight: bold;
}

#postCount, #followerCount, #followingCount {
    margin-left: 1rem;
    margin-right: 0.25rem;
}

#accountContentSelector {
    display: flex;
    font-size: var(--medium-text);
    font-weight: bold;
    width: 80vw;
    justify-content: center;
}

#postSelection, #taggedSelection {
    text-align: center;
    width: 40vw;
    background-color: var(--tertiary-color);
    padding: 0.25rem;
    border-radius: var(--small-radius);
    margin: 1rem;
}

#postSelection {
    margin-left: 1vw;
}

#taggedSeelction {
    margin-right: 1vw;
}

#postSelection:hover, #taggedSelection:hover {
    background-color: var(--hover-tertiary-color);
}

#postSelection:active, #taggedSelection:active {
    background-color: var(--active-tertiary-color);
}

#accountContent {
    background-color: var(--tertiary-color);
    flex: 1 1 auto;
    width: 78vw;
    border-radius: var(--large-radius);
    margin: 0 1vw 1.5vh 1vw;
}

#accountPosts {
    display: grid;
}

#accountTags {
    display: none;
}

/* Page load animation */

.initGif {
    position: fixed;
    display: flex;
    z-index: 10;
    background-color: #212121;
    height: 100%;
    width: 100%;
}

.initialize {
    margin: auto;
    width: 75vw;
}