* {
      box-sizing: border-box;
    }

    ::selection {
      background: transparent;
    }

    body {
      background-image: url('https://file.garden/aekRj9vojSCYQ73S/bg/bedroom.jpeg');
      background-size: cover;
      background-repeat: repeat;
      background-attachment: fixed;
      display: flex;
      font-family: 'ms pgothic';
      color: #626262;
      font-size: 13px;
    }

    a {
      color: #626262;
      text-decoration: none;
      margin-left: 10px;
    }

    a:hover {
      color: #626262;
      font-style: italic;
    }

    p {
      color: #626262;
      padding-left: 26px;
      letter-spacing: 0.01px;
    }

    :root {
      --scale: 0.90;
    }


    @font-face {
      font-family: spirit;
      src: url(https://file.garden/aekRj9vojSCYQ73S/font/spirit.ttf);
    }


    @-webkit-keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }



    #everything {
      margin: 0 auto;
      padding-top: 15px;
      display: flex;
      flex-direction: column;
      zoom: var(--scale);
    }


    .footer {
      margin-top: 1em;
      text-align: center;
      color: white;
    }

    #content {
      border: 1px solid #9d9d9d;
      border-radius: 41px;
      margin: auto;
      background-color: white;
      height: 51em;
      width: 39em;
      box-shadow: -24px 10px 25px -26px rgb(0 0 0)
    }


    #main-content {
    height: 51em;
    -webkit-box-shadow: inset -8px -19px 100px 0 #E1E1E1;
    border-radius: 41px;
    background-color: #f1f1f1;
    }

    #main-content,
    #main {
      justify-items: center;
    }


    #text,
    #arrow,
    .bottom {
      height: fit-content;
    }


    #everything,
    #main-content,
    #main,
    #chat,
    #user,
    #heart,
    #arrow,
    .top,
    .bottom {
      position: relative;
    }

    #main-content,
    #main,
    .texto,
    button,
    .top {
      display: grid;
    }

    .top,
    .bottom,
    #everything {
      width: 100%;
    }


    #everything,
    #main-content,
    #main,
    .top,
    .bottom {
      align-items: center
    }

    #chat::-webkit-scrollbar-track,
    #chat::-webkit-scrollbar-thumb {
      border-radius: 0;
    }


    p::selection, mark::selection {
      color: #626262;
      background: #ffe6f4;
    }

    .texto {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 0px;
      grid-row-gap: 0px;
    }

    #apple {
      background: white;
      border: 1px solid #737373;
      background-size: 10em;
      width: 34em;
      border-radius: 1em;

    }


    #chat {
      height: 41.7em;
      overflow-y: scroll;
    }

    #chat::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

    #chat::-webkit-scrollbar-thumb {
      background: transparent;
    }


    .bubble {
      border-radius: 40px 0px 40px 40px;
      padding: 7px;
      background: #E1E1E1;
      box-shadow: inset 13px 0 6px -10px rgb(66 66 66 / 56%), inset -13px 0 6px -10px rgb(66 66 66 / 56%), inset 0 13px 6px -10px #fff, inset 0 -13px 6px -10px rgb(66 66 66 / 38%),-10px 9px 14px -17px rgb(0 0 0);
      margin: 10px;
      border: 1px solid #9d9d9d;
    }

    .bubble img {
      width: 50px;
      float: left;
      border: 1px solid #9d9d9d;
      border-radius: 100%;
      margin-left: 10px;
      margin-right: 0.5em;
    }



    #user {
      top: 0.5em;
      font-family: spirit;
      color: #af9280;
    }

    mark {
      color: #af9280;
      background: transparent;
    }


    button {
      margin-left: 10px;
      line-height: 1.4;
      text-align: center;
      color: #626262;
      background-color: #D6D6D6;
      border: 1px solid #9d9d9d;
      border-radius: 8px;
      grid-template-areas: "symbol love";
      grid-gap: 0.5em;
    }

    button:hover {
      margin-left: 10px;
      border: 1px solid #9d9d9d;
      font-style: italic;
      box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #fff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);

    }


    #heart {
      width: 15px;
      top: 2px;
      grid-area: symbol;
    }



    #text {
      grid-area: love;
    }

    .top {
      top: -5px;
    }

    .top,
    .bottom {
      height: 3em;
      justify-items: center;
    }

    .cam {
      width: 6px;
      height: 6px;
      background: #898989;
      border-radius: 50%;
    }


    #arrow {
      margin-top: 0.5em;
      width: fit-content;
    }

    #arrow a {
      color: white;
      text-decoration: underline;
    }

    #arrow p {
      color: white;
      font-size: 1.1em;
    }


    .bottom {
      margin-top: 0.8em;

    }

    .home {
      border: 1px solid #9d9d9d;
      border-radius: 100%;
      background-color: #E1E1E1;
      width: 3em;
      height: 3em;
    }

    .home:hover {
      box-shadow: inset 0 0px 9px 0px #d9d9d9;
      background: #E1E1E1;
}
    
    .home:active {
      box-shadow: inset 0 -9px 4px 0px #d9d9d9;
      transform: scale(0.9);
      background: #E1E1E1;
}

@media screen and (max-width: 768px) {
      :root {
      --scale: 0.50;
    }
    
    #everything {
      zoom: var(--scale);
    }
}