@import "header.css";
@import "form-search.css";
@import "hero.css";
@import "form-auth.css";
@import "form-post.css";
@import "form-edit.css";
@import "posts.css";
@import "profile.css";
@import "footer.css";
@import "post-details.css";
@import "page-not-found.css";
@import "home.css";
@import "remove-account.css";

/* ----------------------------------------------------------------- */
/* Reset */
/* ----------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------- */
/* Body */
/* ----------------------------------------------------------------- */
body {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    color: #252525;
    font-size: 18px;
    min-height: 100vh;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #161616;
}

img {
    display: block;
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 40px;
}

/* ----------------------------------------------------------------- */
/* Position Fixed */
/* ----------------------------------------------------------------- */
.position-fixed {
    position: fixed;
    width: 100%;
}

/* ----------------------------------------------------------------- */
/* Buttons */
/* ----------------------------------------------------------------- */
.btn {
    cursor: pointer;
    transition: .2s;
}

.btn--search {
    background-color: transparent;
    border: 0;
    padding: 10px;
    border-radius: 30px;
}

.btn--auth {
    width: 100%;
    height: 40px;
    font-size: 16px;
    border: none;
    background-color: #000;
    color: #fff;
}

.btn--auth:hover {
    background-color: rgb(64, 64, 64);
}

.btn--upload {
    width: 200px;
    height: 50px;
    font-size: 18px;
    border: none;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
}

.btn--upload:hover {
    background-color: rgb(64, 64, 64);
}

.btn--browse {
    width: 150px;
    height: 50px;
    font-size: 16px;
    border: none;
    background-color: #144c4c;
    color: #fff;
    border-radius: 5px;
}

.btn--browse:hover {
    background-color: #3d6969;
}

.btn--remove {
    background-color: transparent;
    color: #000;
    border: none;
}

.btn--like {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #b2b2b2;
    background-color: #fff;
}

.btn--delete {
    border: 1px solid #b2b2b2;
    background-color: #fff;
    width: 65px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
}

.btn--delete:hover,
.btn--like:hover,
.btn--profile-content:hover {
    border: 1px solid #525252;
}

.btn--edit, .btn--green {
    background-color: #144c4c;
    border: none;
    font-size: 18px;
    border-radius: 5px;
    color: #fff;
}

.btn--green {
    width: 120px;
    height: 46px;
}

.btn--edit {
    padding: 12px 24px;
}

.btn--edit:hover, .btn--green:hover {
    background-color: #3d6969;
}

.btn--profile-content {
    border: 1px solid #b2b2b2;
    background-color: transparent;
    width: 100px;
    height: 50px;
    font-size: 20px;
    border-radius: 5px;
}

.btn--active {
    background-color: #525252;
    color: #fff;
}

/* ----------------------------------------------------------------- */
/* Nav */
/* ----------------------------------------------------------------- */
.nav ul {
    display: flex;
}

.nav ul li + li {
    margin-left: 15px;
}

@media (max-width: 768px) {
    .nav ul li + li {
        margin-left: 0;
    }

    .nav ul li {
        margin-top: 20px;
    }
}

/* ----------------------------------------------------------------- */
/* Shell */
/* ----------------------------------------------------------------- */
.shell {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.shell--smaller {
    max-width: 1000px;
}

/* ----------------------------------------------------------------- */
/* Masonry Grid */
/* ----------------------------------------------------------------- */
.my-masonry-grid {
    display: -webkit-box; /* Not needed if autoprefixing */
    display: -ms-flexbox; /* Not needed if autoprefixing */
    display: flex;
    margin-left: -30px; /* gutter size offset */
    width: auto;
}

.my-masonry-grid_column {
    padding-left: 30px; /* gutter size */
    background-clip: padding-box;
}
  
  /* Style your items */
.my-masonry-grid_column > div { /* change div to reference your elements you put in <Masonry> */
    margin-bottom: 30px;
}

/* ----------------------------------------------------------------- */
/* Tooltip */
/* ----------------------------------------------------------------- */
.tooltip {
    position: relative;
}

.tooltip__text {
    position: absolute;
    left: -200%;
    top: -52%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 6px;
    visibility: hidden;
    opacity: 0;
    transition: .5s;
    padding: 10px;
}

.tooltip__text::before {
    content: "";
    position: absolute;
    left: 99%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid;
    border-color: #0000 #0000 #0000 #000;
    opacity: .8;
}

.tooltip:hover .tooltip__text {
    left: -200%;
    visibility: visible;
    opacity: 1;
    transition: .5s;
}

/* ----------------------------------------------------------------- */
/* Author */
/* ----------------------------------------------------------------- */
.author {
    display: flex;
    align-items: center;
}

.author__name-white, .author__name-black {
    margin-left: 10px;
}

.author__name-white a {
    color: #fff;
}

.author__name-black a {
    color: #000;
}

.author__image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

[aria-current="page"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: black;
}

/* ----------------------------------------------------------------- */
/* Loader */
/* ----------------------------------------------------------------- */
.section-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader {
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader--medium {
    border-top: 3px solid #3d6969;
    border-right: 3px solid transparent;
    width: 48px;
    height: 48px;
}

.loader--small {
    border-top: 3px solid #fff;
    border-right: 3px solid transparent;
    width: 30px;
    height: 30px;
}

.loader--smaller {
    border-top: 1px solid #fff;
    border-right: 1px solid transparent;
    width: 24px;
    height: 24px;
}

@keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 

/* ----------------------------------------------------------------- */
/* Error */
/* ----------------------------------------------------------------- */
.error {
    color: red;
}

/* ----------------------------------------------------------------- */
/* No Posts */
/* ----------------------------------------------------------------- */
.no-posts {
    text-align: center;
    font-size: 50px;
}