//  Design inspired by https://transformer.huggingface.co/doc/gpt2-large

header {
  width: 100%;
  height: auto;
  left: 0;
  background-color: white;
  z-index: 100;
}


header h1{
  font-weight: 600;
  display: inline;
  margin: 0;
  font-size: 180%;
}

header .inner-heading {
  padding: 1em;
}

.title-logo {
  height: 2.5em;
  border: 0;
  display: block;
  margin: 0;
  margin-left: 0.3em;
  padding: 0;
  width: auto;
}

.logo {
  height: 3.1em;
  border: 0;
  display: block;
  margin: 0;
  width: auto;
  padding: 0;
  position: relative;
  top: -0.4em;
  cursor: default;
}

// a tags Tooltip
a[data-title]:hover::after {
  content: attr(data-title);
  background-color: #27272c;
  color: whitesmoke;
  font-size: 90%;
  position: absolute;
  padding: 1px 5px 2px 5px;
  text-decoration: none;
  z-index: 1000;
}

.shadow:hover{
  // Shadow on hover
  box-shadow: 0 0 10px rgba(33,33,33,.2); 
}


// Collapsible description
.description {
  width: 100%;
  left: 0;
  text-align: center;
  position: relative;
  top: -5em;
  font-size: 1em;
}

// Remove black --- bottom border
summary {
  outline: none;
}

.desciption-txt {
  margin: 0;
  padding: 0;
}


// Interactive header options
.options {
  margin-top: 0.5em;
  margin-left: 0.3em;
  font-size: 105%;
}

.options-el {
  display: inline-block;
  margin-right: 1em;
}

.clickable a {
  color: #2780e3;
  text-decoration: none;
}

.clean-format a{
  color: black;
  text-decoration: none !important;
  cursor: default;
}

// High-Quality text
.clean-switch {
  text-decoration: none;
  // top | right | bottom | left
  padding: 0;
  margin: 0;
  display: inherit;
}

// sec after options
.timing{
  font-size: smaller;
  padding-left: 0.2em;
}

.header-style{
  padding-right: 0.5em;
}

.header-el {
  display: inline-block;
  padding-right: 0.7em;
}

// Images Style Transfer Menu
.header-imgs {
  flex-direction: row;
  display: inline-flex;
  position: absolute;
  top: 1.5em;
}

.header-btn-img {
  margin: 0 0.1em;
}

.header-style-img {
  padding: 0;
  margin: 0;
}

// Images Styles

.none {
  filter: none;
}

.sepia{
  filter:sepia(100%);
}

.sketch{
  filter:grayscale(100%);}

.invert{
  filter:hue-rotate(90deg);
}

//  Article attributes taken from https://codepen.io/tomhodgins/pen/BKPJaN
article {
  font-family: inherit;
  // top | right | bottom | left
  margin: 5em auto 3em auto;
  padding: 5em;
  font-size: 100%;
  width: 100%;
  background: white;
  box-shadow: rgba(0,0,0,.05) 0 3px 15px;
  display: inline-block;
}

details[open] summary::after {
  content: "Help";
  font-weight: bolder;
}

.editor {
  text-align: center;
  top: -8em;
  position: relative;
}

article p {
  margin: 0;
  color: #333;
  font-size: 1.7em;
  text-align: center;
}

h2 {
  font-size: 3.2em !important;
  text-align: center;
  font-weight: bolder;
  margin-bottom: 0.5em;
}

// + for elements placed immdiately after
article p + p {
  margin-top: 1em;
}

[contenteditable] {
  outline: 0px solid transparent;
}

// For generated text decoration
.generated {
background-color: #eaf2fb;
border-radius: 6px;
padding: 3px 1px;
}

s {
  text-decoration: solid;
  background-color: #eaf2fb;
}

code {
  background-color:#eee;
  color: black;
}

.editable {
  outline: none;
}

.info-icon {
  padding: 0.5em;
}

a,
a label {
    cursor: pointer;
    z-index: 1000
}

.options span {
  cursor: default;
}

img {
  display: block;
  margin: 0.5em auto 1em auto;
  width:35%;
  height: 35%;
  border-radius: 6px;
  cursor: pointer;
}

.sticky {
  position: fixed;
  top:0;
}

.noscroll {
  overflow: hidden;
}

.vpartial {
  max-height: 90vh;
}

.scrolling {
  overflow: auto;
  max-height: 98%;
}

// Options

.options-popup{
  position: fixed;
  z-index: 1000;
}

.options-imgs{
  flex-direction: row;
  display: inline-flex;
}

.options-img{
  max-width: 28%;
  max-height: 28%;
  margin: 0;
}

.options-imgs-icon{
  padding-left: 0.2em;
  outline: white;
}

.v-card {
  text-align: left;
}

// Options images
.v-list-item {
  padding: 0 0.5em;
}

.v-list-item__title {
  white-space: normal;
}

.v-list-item__icon {
  // top | right | bottom | left
  margin: 1em 0.5em 0em 0.5em !important;
}

// Color changing loader taken from: https://codepen.io/zFunx/pen/apqgYJ
.loader,.loader:before,.loader:after{
  top:0;
  bottom:0;
  left:0;
  right:0; 
  content:"";
  position:absolute;
  border-radius:50%;
}

.loader{
  width:35px;
  height:35px;
  margin:0;
  -webkit-animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;

}

@-webkit-keyframes spin{
  100%{transform:rotate(360deg);filter:hue-rotate(360deg)}
}

@keyframes spin{
  100%{transform:rotate(360deg);filter:hue-rotate(360deg)}
}


.loader:before{
  border:5px solid #aaa;
  border-bottom:5px solid pink;
  border-left:5px solid pink;
  animation:spin1 1s linear infinite;
}

.loader:after{
  border:5px solid #aaa;
  border-top:5px solid transparent;
  border-right:5px solid transparent;
  animation:spin2 1s linear infinite;
}

@keyframes spin1{
  20%{transform:rotate(150deg)}
  40%{transform:rotate(300deg)}
  80%{transform:rotate(300deg)}
  100%{transform:rotate(360deg)}
}

@keyframes spin2{
  0%{transform:rotate(-30deg)}
  20%{transform:rotate(-30deg);
      border-color:transparent transparent #aaa #aaa}
  21%{border-color:pink pink transparent transparent}
  40%{transform:rotate(-30deg)}
  60%{transform:rotate(120deg);
      border-color:pink pink transparent transparent}
  61%{border-color:transparent transparent #aaa #aaa}
  80%{transform:rotate(270deg)}
  100%{transform:rotate(330deg);}
}
// Ratings card

.rating-el-title-el {
  display: inline-block;
  margin-right: 0.1em;
}

.card-title {
  font-weight: bolder;
  padding: 0;
  margin: 0;
}

.card-main-title {
  font-size: 180%;
  font-weight: bolder;
  text-align: center;
  padding-bottom: 1em;
}

.v-rating .v-icon {
  color: orange;
}

//  Rating headers
.clean-format {
  color: black;
  text-decoration: none;
  cursor: default;
}

// Validation errors
.v-messages__message {
  color: red;
  font-size: medium;
}

.story-submit{
  background-color: #57ce5b !important;
  border-color: #4caf50 !important;
  font-weight: bolder;
}

.container {
  border-style: dotted;
  border-color: gray;
}

// Submission pop-up & share
.v-dialog {
  overflow-y: visible;
  font-weight: bolder;
  text-decoration: none !important;
  }

.popup-header{
    background-color: #72e476  !important;
    border-color: #4caf50  !important;
  }

.v-dialog > .v-card > .v-card__title {
    font-size: 2em;
    font-weight: 500;
    letter-spacing: 0.0125em;
    padding: 1em;
}


// Footer
.footer {
  width: 100%;
  text-align: center;
  background-color: #eee;
  font-size: 70%;
}

.footer-txt{
  margin: 0.5em;
  padding: 0;
}

.footer a {
  color: inherit;
  text-decoration: underline;
}

.seperator {
  color: #ebe5e5;
  border-top: 0.25em solid;
}

// Disable Vuetify theme
.v-application {
  background: none !important;
}

/* If the screen size is big enough (not mobile), show the app */
@media only screen and (min-width: 601px) {
  .small-screen {
    display: none;
  }
}

/* If the screen size is small, show notice */
@media only screen and (max-width: 600px) {
  .big-screen {
    display: none;
  }
  .small-screen {
    position: absolute;
    width: 80%;
    min-height: 100%;
    font-size: 6vw;
    text-align: center;
    top: 0;
  }
}