Fix errors and bugs in the given code, without changing its intended functionality. ONLY return the fixed code and nothing else. Enclose the entire code in a single code block.



  modify all this css to be work on 90 rotate
  <head>
    <title>FADMAKA</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link
      data-n-head="ssr"
      rel="icon"
      data-hid="favicon-32"
      type="image/png"
      size="32"
      href="https://img.icons8.com/color/480w/farmer-female.png"
    />
    <link rel="stylesheet" href="/css/normalize.css" />
    <link rel="stylesheet" href="/css/styles.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/gallery.css" />
    <style>
    body {
      font-family: Poppins, sans-serif !important;
      background: #f3f8fa !important;
      transform: rotate(90deg);
      transform-origin: bottom left;
      position: absolute;
      top: -100vw;
      left: 0;
      height: 100vw;
      width: 100vh;
      overflow: auto;
  }
        img[src*="000webhost"] {
          display: none;
        }
  
        .rectangle {
          width: 42em;
          height: 42em;
          /* border: 2px solid #333; */
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: border-color 0.3s;
          position: relative;
        }
  
        .rectangle:hover {
          border-color: #666;
        }
  
        .rectangle input[type="file"] {
          display: none;
        }
  
        .rectangle img {
          max-width: 100%;
          max-height: 100%;
        }
  
        .rectangle:hover::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
  
        .scan-animation {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, 0.75) 75%,
            transparent
          );
          animation: scan 1.5s linear infinite;
          pointer-events: none;
          display: none; /* Initially hidden */
        }
  
        @keyframes scan {
          0% {
            top: -100%;
          }
          100% {
            top: 25%;
          }
        }
  
        .image-container {
          height: 21em;
          background-size: cover;
          background-position: center;
        }
  
        .rectangle input[type="file"] {
          /* Existing styles */
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          cursor: pointer;
        }
        .btn-primary {
          /* Existing styles */
          font-size: 36px;
          padding: 35px 75px;
          align-self: center;
        }
  
        .btn-primary:focus {
          /* Existing styles */
          outline: none;
        }
  
        .align-items-center {
          /* New styles to center the button vertically */
          align-items: center;
        }
  
        .tooltip {
          font-size: 1.5em;
        }
        /* Define a color scheme */
        :root {
          --primary-color: #0e0e14;
          --secondary-color: #8d99ae;
          --accent-color: #108132;
        }
  
        /* Style the link element */
        .map-link {
          width: 14rem;
          height: 4rem;
          display: flex;
          align-items: center;
          margin: 1rem;
          padding: 0.5rem;
          color: var(--primary-color);
          background-color: var(--secondary-color);
          text-decoration: none !important;
          font-family: "Roboto", sans-serif;
          font-weight: bold;
          font-size: 1.5rem;
        }
  
        /* Style the icon element */
        .map-link i {
          font-size: 3rem;
          margin-right: 0.5rem;
        }
  
        /* Add a hover effect */
        .map-link:hover {
          color: white;
          background-color: var(--accent-color);
          transform: scale(1.1);
          box-shadow: 0 0 10px var(--accent-color);
        }
  
        /* Add a transition */
        .map-link {
          transition: all 0.3s ease-in-out;
        }
      </style>
      <style>
        /* style.css */
  
        /* Custom font */
        @import url("https://fonts.googleapis.com/css?family=Roboto");
  
        /* Body style */
        body {
          font-family: "Roboto", sans-serif;
          background-color: white;
        }
  
        /* Card style */
        .card {
          margin: 10px;
          border: none;
        }
  
        /* Card image style */
        .card-img-top {
          height: 200px;
          object-fit: cover;
        }
  
        /* Card text style */
        .card-text {
          font-size: 18px;
          color: green;
        }
      </style>
      <style>
        .container_scroll {
          margin: 5px;
          width: 100%;
          height: 19vh;
          white-space: nowrap;
        }
  
        /* Flex */
        .flex {
          display: flex;
          flex-wrap: nowrap;
          overflow: auto;
        }
        .flex-item {
          flex: 0 0 auto;
        }
  
        #quickGallery .galleryImage {
          height: 350px;
        }
        #quickGallery {
          margin: 15px;
          overflow: scroll;
        }
      </style>
  </head>