:root {
  --background: 266, 16%, 92%;
  --text-primary: 0, 0%, 0%;
  /* Colors */
  --black: 0, 0%, 0%;
  --white: 0, 0%, 100%;
  --quite-gray: 0, 0%, 50%;
  --red: 347, 84%, 68%;
  --orange: 23, 84%, 68%;
  --yellow: 52, 84%, 68%;
  --green: 114, 84%, 68%;
  --teal: 163, 84%, 68%;
  --blue: 219, 84%, 68%;
  --purple: 279, 84%, 68%;
  --pink: 312, 84%, 68%;
  /* Gradients */
  --gradient: linear-gradient(90deg, hsla(var(--red), 1) 0%, hsla(var(--orange), 1) 12.5%, hsla(var(--yellow), 1) 25%, hsla(var(--green), 1) 37.5%, hsla(var(--teal), 1) 50%, hsla(var(--blue), 1) 62.5%, hsla(var(--blue), 1) 75%, hsla(var(--purple), 1) 87.5%, hsla(var(--pink), 1) 100%);
  /* Sizes */
  --heading-large: 5.6rem;
  --heading-medium: 3.6rem;
  --heading-small: 2.4rem;
  --paragraph: 1.11rem;
  /* misc */
  --transition-main: .175, .685, .32;
  /* Fonts */
  --font-main: "Poppins";
}
*, *::before, *::after {
    box-sizing: inherit;
}
html, body {
    margin: 0;
    width: 100%;
    color: hsl(var(--text-primary));
    font-family: var(--font-main);
    background-color: hsl(var(--background));
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    box-sizing: border-box;
}
main {
  min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
h1 {
    font-size: var(--heading-large);
}
h2 {
    font-size: var(--heading-medium);
}
h3 {
    font-size: var(--heading-small);
}
h4 {
    font-size: calc(var(--heading-small) - .2rem);
}
h5 {
    font-size: calc(var(--heading-small) - .4rem);
}
h6 {
    font-size: calc(var(--heading-small) - .6rem);
}
h1, h2 {
    font-weight: 900;
}
h3, h4, h5, h6 {
    font-weight: 800;
}
p {
    margin: 0;
    font-size: var(--paragraph);
}
a {
    color: hsla(var(--primary), 1);
    font-size: var(--paragraph);
    text-decoration: underline;
}
a:visited {
    color: hsla(var(--primary), .5);
}
form {
    margin: 0;
}
fieldset {
    margin: 0;
    padding: .5em 0;
    border: none;
}
input {
    padding: .8em 1.2em;
    font-size: var(--paragraph);
    background-color: hsl(var(--grooble));
    border: 2px solid hsl(var(--grooble));
    outline: none;
}
textarea {
    padding: .8em 1.2em;
    font-size: var(--paragraph);
    font-family: var(--font-main);
    background-color: hsl(var(--grooble));
    border: 2px solid hsl(var(--grooble));
    outline: none;
}
input, textarea {
    transition: all .2s ease-in-out;
}
input:hover, input:focus, textarea:hover, textarea:focus {
    box-shadow:
            0 0 0 2px hsl(var(--black)),
            0 0 0 3px hsl(var(--white));
    border: 2px solid transparent;
}
/* Classes */
.flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flexbox-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flexbox-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* Columns */
.flexbox-col {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.flexbox-col-left {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}
.flexbox-col-left-ns {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}
.flexbox-col-right {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}
.flexbox-col-start-center {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}
/* Spacings */
.flexbox-space-bet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Button */
button {
    padding: .8em 1.2em;
    border: 1px solid hsl(var(--black));
    background-color: hsl(var(--background));
    font-size: var(--paragraph);
    cursor: pointer;
    outline: none;
}
button:focus {
    box-shadow:
            0 0 0 2px hsl(var(--black)),
            0 0 0 3px hsl(var(--white));
    border: 1px solid transparent;
}
.btn-primary-gray {
    color: hsl(var(--black)) !important;
    background: hsl(var(--white)) !important;
}
.button, .btn-secondary {
    margin: 0;
    width: 100%;
    position: relative;
    padding: 1.2em 1.8em;
    letter-spacing: .025em;
    color: hsl(var(--background));
    font-size: var(--paragraph);
    background: var(--gradient);
    background-size: 500%;
    border-radius: 5em;
    border: none;
    transform: scaleX(1);
    transition: transform .3s cubic-bezier(var(--transition-main), 1.275), filter .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 7.5s cubic-bezier(var(--transition-main), .955);
}
.button {
    transition: transform .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 17.5s cubic-bezier(var(--transition-main), .955);
}
.button, .button .btn-secondary {
    bottom: 0;
    background-position: 0 50%;
}
.button .btn-secondary {
    left: 0;
    width: 100%;
    position: absolute;
    filter: blur(1rem);
    transform: scale3d(.85, .95, 1);
    transition: transform .3s cubic-bezier(var(--transition-main), 1.275), filter .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 7.5s cubic-bezier(var(--transition-main), .955), opacity 3s cubic-bezier(var(--transition-main), 1.275);
    opacity: .5;
    z-index: -1;
}
.button:focus {
    outline: none;
}
.button:hover {
    bottom: 2px;
    transform: scale3d(1.1, 1.1, 1);
    background-position: 100% 50%;
    outline: none;
}
.btn-secondary, .button:hover .btn-secondary {
    bottom: -5px;
    background-position: 100% 50%;
    filter: blur(1.6rem);
    opacity: .8;
}
.button ion-icon {
    margin: 0 .5em .075em 0;
}
/* Main */
.view-width {
    width: 70%;
}
/* Login */
.login-wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
/* Login Form */
.login {
    position: relative;
    z-index: 10;
}
.login-inner {
    width: 100%;
}
.login-form {
    padding: 3em;
    background-color: hsl(var(--background));
    box-shadow: 0 17px 30px -10px hsla(var(--black), .125);
    border-radius: .75em;
}
/* Login Form Top */
.login-form-top {
    margin: 0 0 3em 0;
    color: hsl(var(--black));
}
.login-form-top h3 {
  font-size: var(--heading-medium);
}
.login-form-top > p {
    color: hsl(var(--quite-gray));
    margin: 0 0 1.5em 0;
}
/* Create Post Center */
.login-form-center {
    width: 100%;
    color: hsl(var(--black));
}
#pass-show-hide {
    cursor: pointer;
}
.cpb-btn {
  margin: 0 2em 0 0;
}
/* Background */
.login-background-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: hsla(var(--black), .4);
    backdrop-filter: blur(1rem);
    z-index: 2;
}
.login-background {
    min-width: 100%;
    max-width: 110%;
    min-height: 100%;
    position: absolute;
    filter: hue-rotate(-5deg) saturate(1.5);
    object-fit: cover;
}
/* Inputs */
.input-grid {
    margin: 2em 0;
    display: grid;
    grid-gap: 2em;
}
.inpt-grd-1 {
    grid-template-columns: 1fr;
}
.inpt-grd-2 {
    grid-template-columns: repeat(2, 1fr);
}
.inpt-grd-3 {
    grid-template-columns: repeat(3, 1fr);
}
.input-wrapper {
    width: 100%;
}
.input-wrapper p {
    margin: 0 0 .5em 0;
    color: hsl(var(--quite-gray));
    font-weight: 200;
}
.input-inner {
    width: 100%;
    position: relative;
}
.input-inner ion-icon {
    left: 1em;
    position: absolute;
    color: hsl(var(--black));
    font-size: calc(var(--paragraph) + .35rem);
}
#cp-title {
    padding: 1.2em 1.2em 1.2em 2.25em;
    font-weight: 800;
    font-size: calc(var(--heading-small) - .5rem);
}
.input {
    padding: 1.2em 1.2em 1.2em 3.25em;
    width: 100%;
    color: hsl(var(--black));
    background-color: transparent;
    border: 2px solid transparent;
    border-left: 1px solid hsl(var(--black));
}
@media only screen and (max-width: 1660px) {
    :root {
        /* Sizes */
        --heading-large: 5.4rem;
        --heading-medium: 3.4rem;
        --heading-small: 2.2rem;
    }
}
@media only screen and (max-width: 1456px) {
    :root {
        /* Sizes */
        --heading-large: 5.2rem;
        --heading-medium: 3.2rem;
        --heading-small: 2rem;
    }
    .view-width {
        width: 80%;
    }
}
@media only screen and (max-width: 1220px) {
    .view-width {
        width: 70%;
    }
}
@media only screen and (max-width: 1024px) {
    :root {
        /* Sizes */
        --heading-large: 5rem;
        --heading-medium: 3rem;
        --heading-small: 1.8rem;
    }
    .view-width {
        width: 75%;
    }
    .inpt-grd-2 {
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 756px) {
    :root {
        /* Sizes */
        --heading-large: 4rem;
        --heading-medium: 2.6rem;
        --heading-small: 1.6rem;
        --paragraph: 1rem;
        --navbar-buttons: 2rem;
    }
    .view-width {
        width: calc(100% - 5em);
    }
}
@media only screen and (max-width: 576px) {
    .view-width {
        width: calc(100% - 3em);
    }
    .login-form-bottom {
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }
    .cpb-btn {
        margin: 0 0 1.2em 0;
    }
}
@media only screen and (max-width: 496px) {

}