@import url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");

button {
  cursor: pointer;
}

.div-9a {
  width: 200px;
  height: 200px;
  background-color: red;
}

.div-9b {
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.div-9c {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 500;
  border: solid;
  border-width: 1px;
  width: 300px;
  padding: 5px;
  border-color: rgb(177, 177, 177);
}

.div-9c p,
button {
  margin: 10px 5px 10px 5px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 500;
}

.div-9d {
  background-color: rgb(39, 39, 39);
  width: 390px;
  padding: 10px;
}

.p-9d-1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 25px;
  color: white;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 260px;
  cursor: pointer;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.p-9d-1:hover {
  color: rgb(255, 81, 81);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.p-9d-2 {
  color: rgb(151, 151, 151);
  margin-left: 10px;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 500;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* 7G */

.textbox-7g-twitter {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "San Francisco",
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  border-radius: 10px;
  box-shadow: 0px 0px 6px -1px black;
  font-weight: 400;
  padding: 11px;
  display: flex;
  flex-direction: row;
  border: none;
  width: 412px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.profile-img {
  vertical-align: middle;
  border-radius: 50px;
  margin: 0;
  padding: 0;
  object-fit: cover;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  filter: none;
  -webkit-filter: none;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.profile-img:hover {
  filter: brightness(90%);
  transition: filter 0.2s ease-in-out;
  -webkit-transition: filter 0.2s ease-in-out;
  -moz-transition: filter 0.2s ease-in-out;
  -ms-transition: filter 0.2s ease-in-out;
  -o-transition: filter 0.2s ease-in-out;
}

.after-image {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.input-textbox-twitter {
  border: none;
  padding-right: 60px;
  font-size: 17px;
  margin-left: 10px;
}

.input-textbox-twitter:focus {
  outline: none;
}

.btn-textbox-twitter {
  background-color: rgb(38, 141, 206);
  color: white;
  margin: 0;
  padding: 7px 15px 7.5px 15px;
  font-weight: bold;
  font-size: 14px;
  border: none;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
}

.btn-textbox-twitter:hover {
  background-color: rgb(34, 127, 185);
  transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
}

.recreate-9f {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 190px;
  height: 318px;
  box-shadow: 0px 0px 6px -2px black;
}

.image-card {
  object-fit: cover;
  width: 190px;
  height: 200px;
  margin: 0;
  filter: none;
  -webkit-filter: none;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.image-card:hover {
  transition: filter 0.2s ease-in-out;
  filter: brightness(90%);
  -webkit-filter: brightness(90%);
  -webkit-transition: filter 0.2s ease-in-out;
  -moz-transition: filter 0.2s ease-in-out;
  -ms-transition: filter 0.2s ease-in-out;
  -o-transition: filter 0.2s ease-in-out;
}

.name-9f {
  margin-left: 10px;
  margin-top: 2px;
  width: 150px;
  height: 24px;
  display: inline-block;
  margin-bottom: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
  color: black;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

.name-9f:hover {
  color: rgb(65, 65, 65);
}

.friend-9f {
  font-family: arial;
  font-weight: 400;
  display: block;
  text-decoration: none;
  color: rgb(90, 90, 90);
  margin-top: 2px;
  margin-left: 10px;
  margin-bottom: 0;
}

.friend-9f:hover {
  color: rgb(139, 139, 139);
  text-decoration: underline;
}

.btn-9f {
  background-color: rgb(41, 119, 221);
  color: white;
  margin-left: 10px;
  font-size: 16px;
  padding: 10px 10px 10px;
  width: 120px;
  border: none;
  border-radius: 5px;
  transition: 0.2s;

}

.btn-9f:hover {
  background-color: rgb(49, 138, 255);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

/* 1 */
.recreate-9g-1 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 190px;
  margin-right: 20px;
  height: 318px;
  box-shadow: 0px 0px 6px -2px black;
}

/* 2 */
.recreate-9g-2 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 190px;
  margin-right: 20px;
  height: 318px;
  box-shadow: 0px 0px 6px -2px black;
}

/* 3 */
.recreate-9g-3 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 190px;
  height: 318px;
  box-shadow: 0px 0px 6px -2px black;
}

/* GOOGLE (9H) */

.google-9h {
    width: 667px;
}

.image-configure {

    padding: 15px 187px 15px 187px;
    display: block;
    flex-direction: column;
}

.google-img {
    width: 290px;
    height: 90px;
  }

.input-7e {
  display: inline-block;
  background-color: rgb(255, 255, 255);
  padding: 20px 147.5px 20px 17px;
  text-overflow: ellipsis;
  width: 500px;
  font-size: 20px;
  box-shadow: 0px 1px 5px -2px black;
  border: none;
  border-radius: 50px;
  display: block;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  margin-bottom: 25px;
}

.centering {
    padding: 0px 135.5px 0px 135.5px;
    width: 400px;
    display: inline-flex;
}

.btn-google-1 {
    background-color: rgb(241, 241, 241);
    color:black;
    padding: 15px 31.5px;
    font-size: 20px;
    border: none;
    margin-right: 5px;
    margin-left: 117px;
}

.btn-google-2 {
    background-color: rgb(241, 241, 241);
    color:black;
    padding: 15px 31.5px;
    font-size: 20px;
    border: none;
    margin-left: 5px;
    margin-right: 117px;
}

.btn-google-2:hover, .btn-google-1:hover {
    background-color: rgb(211, 211, 211);
}

.google-9h input:focus {
    outline: none;
}