/* Structure ========== */
body {
    background-color:#333233;
    margin:0px;
}

div, input {
    box-sizing:border-box;
}

main {
    max-width:1200px;
    min-height:100vh;
    margin-left:auto;
    margin-right:auto;
    padding-right:50px;
    padding-left:50px;
}

.page-container {
    display: table-cell;
    vertical-align: middle;
    height: 100vh;
    padding-top:0px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
}

.container {
    padding-top:25px;
    padding-bottom:25px;
}

.top-border {
    border-top:2px solid #dddddd;
}

/* Fonts ========== */
body, p, span, input {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size:19px;
    color:#ffffff;
}

button {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size:19px;
}

h1, h2, h3, h4, h5, h6, strong {
    font-family: "rift-soft", sans-serif;
    font-weight: 700;
    font-style: italic;
}

/* Logo ========== */
.flex-20px-gap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 40px;
    row-gap:0px;
}

.logo {
    width:550px;
    overflow:hidden;
    display:flex;
    align-items: center;
      -webkit-transition: 0.25s;
      transition: 0.25s;
}

.cut-logo {
    width: 140px;
}

.text {
    flex:1;
    display:flex;
    align-items: center
}

.text p {
      -webkit-transition: 0.25s;
      transition: 0.25s;
}

.fade {
    opacity:1 !important;
}


/* Input */
#social-input {
    width: 100%;
    display: block;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 0px;
    color: #333233;
    background-color: #ffffff;
    outline:none;
    font-size: 1.3em;
    border: 3px solid #dddddd;
      -webkit-transition: 0.35s;
      transition: 0.35s;
}

#social-input:focus {
    border: 3px solid #ffffff;
}

::placeholder {
  color: #dddddd;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #dddddd;
}

/* Output ========== */
#output {
    height:0px;
      -webkit-transition: 0.4s;
      transition: 0.4s;
}

.on-select {
    height:100px !important;
}

/* Prompts ========== */
.buttons-container {
  width: 100%;
  margin-top:25px;
}

.text-buttons {
    max-width:20%;
}

.main-buttons {
    width:80%;
    margin-top:25px;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 10px;
    row-gap:10px;
}

.col {
  display: flex;
  flex-direction: column;
}

.buttons-container button {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size:19px;
    padding: 5px 20px;
    border: 0px;
    border-radius: 5px;
    background: linear-gradient(90deg, #0fc4c8, #ffaafe, #ffb801);
    background-attachment: fixed;
    background-size: 100%;
    cursor:pointer;
    height:40px;
    filter: brightness(90%);
      -webkit-transition: 0.35s;
      transition: 0.35s;
}

.buttons-container .prompt:hover {
     filter: brightness(110%) !important;
}

.buttons-container .prompt .fa {
     width:00px;
     margin-left:0px;
     opacity:0;
     overflow:hidden;
     -webkit-transition: 0.35s;
      transition: 0.35s;
}

.buttons-container .prompt:hover .fa {
     width:20px;
     margin-left:10px;
     opacity:1;
     overflow:visible;
}

#change-tone {
   position:relative;
   width:180px;
     -webkit-transition: 0.5s;
     transition: 0.5s;
}

#change-tone:hover #change-tone-container {
    opacity:1 !important;
    z-index:999999;
    top: 50%;
}

.hover-container {
    position: absolute;
    top: 0px !important;
    opacity: 0;
    padding: 0px 0px 30px 0px;
    border-radius: 10px;
    background-color: #333233;
      -webkit-transition: 0.15s;
      transition: 0.15s;
}

.hover-container button {
    display:block;
    width:180px;
    margin-bottom:10px;
    filter: brightness(90%) !important;
      -webkit-transition: 0.35s;
      transition: 0.35s;
}

.hover-container button:hover {
    filter: brightness(110%) !important;
}