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

a[title="Hosted on free web hosting 000webhost.com. Host your own website for FREE."] {
    display:none;
  }
  
  body {
      background-color: #eee;
  }
  #all_feed
  {
      margin-top: 3rem;
  }
  .time {
      font-size: 9px !important
  }
  
  .socials i {
      margin-right: 14px;
      font-size: 17px;
      color: #d2c8c8;
      cursor: pointer
  }
  
  .feed-image img {
      width: 100%;
      height: auto
  }
  
  .likes
  {
      position: absolute;
      margin-left: 40px;
      font-size: 12px;
      color: grey;
      left: 0;
  }
  
  #top-input
  {
      border: none;
      outline: none;
      color: black !important;
      width: 100%;
      height: 200px;
  }
  
  #blah
  {
      width:auto !important;
      height:auto !important;
      max-height: 100%;
      max-width: 100%;
  }
  .rounded-circle.post-img
  {
      border: 1px solid transparent;
      padding: 2px;
      min-height: 45px;
  }
  
  #popup
  {
      position: absolute;
      top:3rem;
      left:0;
      width: 100%;
      height: 100%;
      z-index: 9;
      background: #eee;
  
      visibility: hidden;
      opacity: 0;
  
      transition: opacity 250ms ease-in-out;
  }
  

  
  html,
  body {
      min-height: 100%;
      overflow-x: hidden;
      width: 100%;
  }
  .card {
      border-radius: 10px;
      font-family: 'Manrope', sans-serif;
      height: 100%;
  }
  
  h6,
  p,
  form {
      color: black;
      font-size: 0.9rem
  }
  
  .form-control {
      border: 1px solid #545454
  }
  
  .form-control:focus {
      border: 0px;
      outline: 0
  }
  
  #notch
  {
      background-color: #ddd;
      height: 1rem;
  }
  
  .btn {
  
      border-radius: 4px;
      border: 0px;
      width: 75px;
      text-align: center;
      display:block;
      margin:15px auto;
      height: 50px;
  }
  
  .btn:focus,
  .btn:hover {
  
      border: 0px;
      outline: none;
      box-shadow: none
  }
  .mb-5
  {
      margin-bottom: 5rem !important;
  }
  #rothrybox
  {
      border: none !important;
      
      background-image: linear-gradient(#C8A2C8, lightpink);
      padding-top: 1.5rem !important;
  }
  #rothry
  {
      font-weight: bolder;
      width: 80px;
      text-align: center;
      font-size: large;
      height: 30px;
      margin-top: 6px;
      border-radius: 3px 20px 10px 3px;
      border: black solid 1px;
      color: black;
      cursor: pointer;
      box-shadow: 0 0 5px 0 rgb(0 0 0 / 25%) inset, 0 3px 10px 3px rgb(0 0 0 / 25%);
  }
  *:focus {
      outline: none
  }
  #img-div
  {
      display: block;
      margin: auto;
      opacity: 0;
      visibility: hidden;
      transition: visibility,opacity 150ms ease-in-out;
  }
  .btn-close
  {
      transform: rotate(45deg);
      font-size: 40px;
      font-weight: 100;
      color: grey;
      cursor: pointer;
  }
  
  #menu
  {
      font-size: 25px;
      line-height: 0;
      width: 100vw;
      margin: auto;
      border: none !important;
      padding-bottom: 1.75rem !important;
  }
  .lozad
  {
      min-height: 100px;
  }
  .rotated
  {
      object-fit: cover;
      transform: rotate(90deg);
      height: 100vw !important;
      width: 100vh !important;
      max-height: 594px;
  }
  
  .menu-icon
  {
      display: block !important;
  }
  .under-icon
  {
      font-size: 10px;
  }
  
  #loader {
      border: 12px solid #f3f3f3;
      border-radius: 50%;
      border-top: 12px solid #444444;
      width: 70px;
      height: 70px;
      animation: spin 1s linear infinite;
  }
    
  @keyframes spin {
      100% {
          transform: rotate(360deg);
      }
  }
    
  .center {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  
  @media only screen and (min-width: 501px) {
      .rotated
      {
      
          transform: rotate(90deg) scale(0.7);
          height: 100% !important;
          width: 100% !important;
      }
  }
  
  @media only screen and (max-width: 500px) {
      
      #menu
      {
          padding-bottom: 35px !important;
          width: 100%;
      }    
      #notch
      {
          height: 3rem;
      }
      #popup
      {
          overflow-x: hidden;
      }
      .col-md-8
      {
          padding-right: 0;
          padding-left: 0;
      }
  
      .my-4
      {
          margin-top:0px !important;
          
      }
      .mx-3
      {
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
      .container-fluid
      {
          padding-right: 0px !important;
          padding-left: 0px !important;
      }
      .likes
      {
          margin-left: 15px;
      }
      .mt-2 
      {
          margin-top: .15rem!important;
          border-left: none !important;
          border-right: none !important;
      }
      #all_feed
      {
          padding: .5rem 0 !important;
          margin-top: 4.25rem !important;
      }
      .img-fluid 
      {
          max-width: 110% !important;
          width: 110% !important;
          margin-left: -5% !important;
      }
      #rothrybox
      {
          padding-top: 4rem !important;
      }
      .modal
      {
          height: calc(100% - 4.25rem);
          top: 4.25rem;
      }
  
  }
  
  @media screen and (max-width: 400px) {
      .mx-3
      {
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
      #top-input
      {
          height: 125px;
      }
  }
  
  @media (prefers-color-scheme: dark) {
      body
      {
          background-color: #171717;
          color: lightgray;
      }
      .likes-ig
      {
          color:white !important;
      }
      #notch
      {
          background-color: #171717;
      }
      .bg-white
      {
          color: white;
          background-color: #202124 !important;
          border-color: black !important;
      }
      .text-black-50
      {
          color: lightgray !important;
      }
      #popup
      {
          background-color: #171717;
          color: lightgray;
      }
      .card
      {
          background-color: #202124;
      }
      #top-input
      {
          background-color: #202124;
          color: white !important;
      }
      hr
      {
          border-color: black;
      }
      .border-bottom
      {
          border-bottom: black 1px solid !important;
      }
      #rothry
      {
          color: lightgrey;
          border-color: lightgrey;
      }
      
      .modal-content
      {
          background-color: #202124;
      }
      .modal-header, .modal-footer
      {
          border-color: black;
      }
      .font-medium
      {
          color: lightgray;
      }
      .close
      {
          color: white;
      }
      .form-control, .form-control:focus
      {
          background-color: #202124;
          border-color: lightgray;
          color: white;
      }
      #rothrybox
      {
          background: red;/*#171717;*/
          
      }
  }