@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;1,300&display=swap");
body {
  font-family: "Ubuntu", sans-serif;
  background-color: rgb(24, 23, 25);
  /* border: 2px solid white; */
  height: 100vh;
  margin: 4rem;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

footer {
  width: 100%;
  margin-top: 10%;
  font-size: x-large;
  text-align: center;
  color: white;
}

header {
  display: flex;
  flex-wrap: wrap;
  /* border: 2px solid white; */
  height: 10%;
  width: 100%;
  justify-content: space-between;
}

main {
  /* border: 2px solid white; */
  height: 70%;
  width: 100%;
}

.one {
  display: flex;
  /* border: 1px solid white; */
  width: 10%;
  height: 100%;
  justify-content: center;
  align-content: center;
}

.button {
  width: 100%;
  height: 50%;
  margin-top: 15%;
}
button {
  font-size: large;
  width: 100%;
  height: 100%;
  background-color: inherit;
  color: white;
  border: white 2px solid;
  /* border: 1px solid white; */
}

.two {
  font-size: x-large;
  /* border: 1px solid white; */
  width: 50%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  color: white;
  justify-content: space-evenly;
  align-content: center;
}

.two > div {
  height: 20%;
}

.minor {
  text-underline-offset: 5px;
  text-decoration: underline;
  font-weight: bold;
}

main {
  /* border: 2px solid white; */
  height: 70%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.main-one {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  width: 30%;
  /* border: 1px solid white; */
}

.main-two {
  width: 59%;
  /* border: 1px solid white; */
}

.menu {
  display: none;
}
.main-one-one {
  width: 100%;
  /* border: 1px solid white; */
  height: 60%;
}

.main-one-one-one {
  color: white;
  font-size: 4rem;
  width: 100%;
  height: 20%;
}

.main-one-one-two {
  font-size: xx-large;
  color: white;
  width: 100%;
  height: 40%;
}

.menu-small {
  display: none;
}
.main-one-one-three {
  width: 100%;
  height: 20%;
  color: white;
  font-size: xx-large;
}

.image1 {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.tweet {
  /* border: 2px solid white; */
  background-color: rgba(24, 23, 25, 0.8);
  height: 30%;
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  position: relative;
  left: 55%;
  bottom: 10%;
  box-shadow: 5px 10px rgba(25, 25, 25);
}

.tweet-head {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* border: 2px white solid; */
  height: 40%;
  padding: 1rem;
  justify-content: space-between;
}

.tweet-body {
  width: 100%;
  /* border: 2px white solid; */
  height: 58%;
}

.tweet-image {
  border-radius: 50%;
  height: 50%;
  border: white 2px solid;
}

.tweet-head-content {
  font-size: xx-large;
  width: 60%;
  display: inline-block;
  vertical-align: text-top;
  color: white;
}

.tweet-head-one {
  width: 30%;
}
.tweet-body {
  padding: 1rem;
  width: 100%;
  /* border: 2px white solid; */
  height: 58%;
  font-size: xxx-large;
  font-weight: bold;
  color: white;
}

@media (max-width: 1710px) {
  .main-one-one-two {
    font-size: xx-large;
    color: white;
    width: 100%;
    height: 60%;
  }

  .main-one-one-one {
    font-size: xxx-large;
  }

  .tweet {
    height: 20%;
    width: 40%;
    bottom: 20%;
  }
  .tweet-image {
    border-radius: 50%;
    height: 40%;
    border: white 2px solid;
  }
  .tweet-body {
    font-size: xx-large;
  }

  @media (max-width: 1610px) {
    button {
      font-size: medium;
    }
  }
}

@media (max-width: 1464px) {
  .tweet {
    bottom: 5%;
  }
  button {
    font-size: small;
  }

  .main-one-one-one {
    font-size: xx-large;
  }
  .main-one-one-two {
    font-size: x-large;
  }
  .tweet {
    height: 15%;
    width: 35%;
    bottom: 20%;
  }
  .tweet-image {
    border-radius: 50%;
    height: 35%;
    border: white 2px solid;
  }
  .tweet-body {
    font-size: x-large;
  }

  .tweet-head-content {
    font-size: x-large;
  }
}

@media (max-width: 1260px) {
  .tweet {
    bottom: 10%;
  }
  button {
    font-size: x-small;
  }

  .tweet {
    height: 15%;
    width: 35%;
    bottom: 20%;
  }
  .tweet-image {
    border-radius: 50%;
    height: 30%;
    border: white 2px solid;
  }
  .tweet-body {
    font-size: large;
  }

  .tweet-head-content {
    font-size: large;
  }
}

.menu-small {
  display: none;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding-top: 10%;
  /* border: 2px solid white; */
}

.inner {
  /* border: 2px solid white; */
  height: 50%;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

.inner-div {
  font-size: x-large;
  color: white;
  width: 100%;
  height: 10%;
  /* border: 2px solid white; */
  text-align: center;
}

.cross {
  color: white;
  font-size: xx-large;
  position: relative;
  left: 20%;
  bottom: 15%;
  cursor: pointer;
}

@media (max-width: 1050px) {
  .tweet {
    bottom: 20%;
  }
  .two {
    display: none;
  }

  button {
    font-size: large;
    width: 250%;
  }
  .menu {
    width: 20%;
    height: 110%;
    display: flex;
    align-content: center;
    padding-top: 0.5rem;
  }

  .menu-img {
    width: 40%;
    height: 40%;
    object-fit: cover;
    cursor: pointer;
  }
  .tweet {
    bottom: 20%;
  }
}

@media (max-width: 950px) {
  .tweet {
    bottom: 30%;
  }
  .main-one-one-one {
    font-size: x-large;
  }
  .main-one-one-two {
    font-size: large;
  }
}

@media (max-width: 750px) {
  .main-one {
    width: 100%;
    height: 20%;
  }
  .main-two {
    width: 100%;
    height: 30%;
  }
  main {
    align-content: space-around;
    justify-content: center;
    height: 100% !important;
  }

  body {
    margin: 0.5rem;
    padding: 0px;
  }

  .image1 {
    object-fit: fill;
  }
  .main-one-one-one {
    font-size: xxx-large;
    margin-bottom: 2rem;
  }

  button {
    font-size: x-small;
    width: 200%;
    height: 90%;
  }

  .tweet {
    width: 50%;
    left: 30%;
  }

  .cross {
    color: white;
    top: 0rem;
  }

  .main-one-one-one {
    margin-bottom: 3rem;
  }
  .main-one-one-two {
    font-size: x-large;
  }
}