@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

        /*root = dark*/
        :root {
          --cellphone-border-color: #1a1c25;
          --cellphone-bg-color: #202231;
          --cellphone-header-bg-color: #212435;
          --cellphone-footer-bg-color: #26293c;
          /* --cellphone-text-color: #8e96a6; */
          --cellphone-text-color: #0EEC6B;
          --shadow-color-btn-1: #181515;
          --shadow-color-btn-2: #2e2f3d;
          --btn-bg-color: #26293d;
          --btn-color: #fffffe;
        }
        
        /*.dark {*/
        /*  --cellphone-border-color: #1a1c25;*/
        /*  --cellphone-bg-color: #202231;*/
        /*  --cellphone-header-bg-color: #212435;*/
        /*  --cellphone-footer-bg-color: #26293c;*/
        /*  --cellphone-text-color: #8e96a6;*/
        /*  --shadow-color-btn-1: #181515;*/
        /*  --shadow-color-btn-2: #2e2f3d;*/
        /*  --btn-bg-color: #26293d;*/
        /*  --btn-color: #fffffe;*/
        /*}*/
        
        .white {
          --cellphone-border-color: #f3f2f2;
          --cellphone-bg-color: #efeeee;
          --cellphone-header-bg-color: #f7f6f6;
          --cellphone-footer-bg-color: #f7f7f7;
          /* --cellphone-text-color: #8d95a5; */
          --cellphone-text-color: #37383B;
          --shadow-color-btn-1: #fff;
          --shadow-color-btn-2: #babecc;
          --btn-bg-color: #ebecf0;
          --btn-color: #c9cad0;
        }
        
        *,
        ::after,
        ::before {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        body {
          align-items: center;
          /* background-color: #faf9f9; */
          background-color: #000000;
          display: flex;
          font-family: 'Raleway', sans-serif;
          font-size: 1rem;
          justify-content: center;
          min-height: 100vh;
        }
        
        .cellphone {
          background-color: var(--cellphone-bg-color);
          border: 0.7rem solid var(--cellphone-border-color);
          border-radius: 2rem;
          box-shadow: 0.4rem 0.4rem 0.6rem rgba(0, 0, 0, 0.1),
            -0.4rem -0.4rem 0.6rem rgba(0, 0, 0, 0.1);
          display: flex;
          flex-direction: column;
          /*height: 42rem;*/
          max-width: 23rem;
          width: 100%;
        }
        
        
        .cellphone-header {
          background-color: var(--cellphone-header-bg-color);
          border-radius: 1rem 1rem 0 0;
          display: flex;
          padding: 1rem;
          position: relative;
        }
        
        .cellphone-header::before {
          background: linear-gradient(
            90deg,
            #dc4946 0%,
            #e3923c 35%,
            #b13b46 70%,
            #36c270 100%
          );
           bottom: -0.5rem;
          content: '';
          height: 0.5rem;
          left: 0;
          position: absolute;
          right: 0;
        } 
        
        /*.fas{*/
        /*	font-size:80px;*/
        /*}*/
        
        .user-name {
          color: var(--cellphone-text-color);
          font-size: 1.1rem;
          font-weight: 700;
          line-height: 1.1;
        }
        
        .header-photo-container {
          align-items: center;
          display: flex;
          flex: 1;
        }
        
        .photo {
          border: 0.3rem solid var(--cellphone-bg-color);
          border-radius: 50%;
          box-shadow: 5px 5px 20px var(--shadow-color-btn-2);
          margin-right: 0.6rem;
          width: 3rem;
        }
        
        .input,
        .button,
        .link-social {
          background-color: var(--btn-bg-color);
          border: 0;
          border-radius: 0.5rem;
          font-size: 1rem;
          outline: 0;
          padding: 1rem;
          text-shadow: 1px 1px 0 var(--shadow-color-btn-1);
        }
        
        .button {
          box-shadow: -5px -5px 20px var(--shadow-color-btn-1),
            5px 5px 20px var(--shadow-color-btn-2);
          color: var(--btn-color);
          color: var(--cellphone-text-color);
          cursor: pointer;
          font-weight: 700;
          margin-right: 1rem;
          position: relative;
          transition: all 200ms ease-in-out;
        }
        
        .badget {
          background-color: #f3a520;
          border-radius: 2rem;
          color: #fff;
          font-size: 0.85rem;
          font-weight: 400;
          padding: 0.1rem 0.25rem;
          position: absolute;
          right: -0.85rem;
          text-shadow: none;
          top: -0.5rem;
          z-index: 1;
        }
        
        .button:hover {
          box-shadow: -2px -2px 5px var(--shadow-color-btn-1),
            2px 2px 5px var(--shadow-color-btn-2);
        }
        
        .button:active {
          box-shadow: inset 1px 1px 2px var(--shadow-color-btn-2),
            inset -1px -1px 2px var(--shadow-color-btn-1);
        }
        
        .content-btn {
          border-radius: 0.5rem;
          color: var(--cellphone-text-color);
          margin-bottom: 1rem;
          margin-right: 0;
        }
        
        .cellphone-content {
          display: flex;
          flex: 1;
          flex-direction: column;
          padding: 1rem 0.5rem 0.5rem;
        }
        
        .cellphone-footer {
          background-color: var(--cellphone-footer-bg-color);
          border-radius: 0 0 1rem 1rem;
          display: flex;
          justify-content: space-between;
          padding: 1rem;
        }
        
        .footer-btn {
          align-items: center;
          background-color: transparent;
          border-radius: 50%;
          box-shadow: none;
          display: flex;
          font-size: 1.3rem;
          height: 3rem;
          justify-content: center;
          width: 3rem;
        }
        
        .footer-btn:hover {
          box-shadow: inset 1px 1px 3px var(--shadow-color-btn-2),
            inset -1px -1px 3px var(--shadow-color-btn-1);
        }
        
        .footer-btn:active {
          box-shadow: inset 5px 5px 8px var(--shadow-color-btn-2),
            inset -5px -5px 8px var(--shadow-color-btn-1);
          color: #2de15e;
        }
        
        .no-margin {
          margin: 0;
        }
        
        .general-title {
          color: var(--cellphone-text-color);
          font-size: 1.2rem;
          line-height: 1.1;
          margin-bottom: 0.5rem;
          margin-top: 0.4rem;
          text-align: center;
        }
        
        .input {
          box-shadow: inset 4px 4px 8px var(--shadow-color-btn-2),
            inset -2px -2px 5px var(--shadow-color-btn-1);
          color: var(--cellphone-text-color);
          margin-bottom: 1.5rem;
          transition: all 200ms ease-in-out;
          width: 100%;
        }
        
        .input::-webkit-input-placeholder {
          color: var(--cellphone-text-color);
        }
        
        .input:-ms-input-placeholder {
          color: var(--cellphone-text-color);
        }
        
        .input::placeholder {
          color: var(--cellphone-text-color);
        }
        
        .input:focus {
          box-shadow: inset 1px 1px 2px var(--shadow-color-btn-2),
            inset -1px -1px 2px var(--shadow-color-btn-1);
        }
        
        .textarea {
          height: 30rem;
          resize: none;
          /* font-weight: bold; */
        }
        
        .text{
        	font-size:17px;
        }
        
        .text-center{
        	text-align: center;
        }
        
        .author{
        	margin:25px;
        	font-size:14px;
          /* font-weight: bold; */
          font-style: italic;
        	transition: 0.5s;
        	transition-timing-function: ease-in;
        	font-family: 'Open Sans Condensed', sans-serif;
        }
        
        .social-media {
          display: flex;
          justify-content: space-evenly;
        }
        
        .link-social {
          align-items: center;
          border-radius: 50%;
          display: flex;
          font-size: 1.2rem;
          height: 3rem;
          justify-content: center;
          padding: 0;
          text-decoration: none;
          width: 3rem;
        }
        
        .block__main {
        	/*min-width: 85vw;*/
        	/*position: absolute;*/
        	transition: all .8s ease;
        	backface-visibility: hidden;
        	/*box-shadow: 0rem 1.5rem 4rem rgba(0, 0, 0, 0.15); */
        	/*box-shadow: 0rem 1.5rem 4rem rgba(75, 74, 74, 0.15);*/
        	/*border-radius: 2rem;*/
        	/*background-image: linear-gradient(to right bottom, #F6F0EA,#F1DFD1); */
        	/*background-image: linear-gradient(to right bottom,  #f095a7a8, #ffedbca8);*/
        }
 
        .block__back { 
        	transform: rotateY(180deg);
        }