body {
  color: white;
  background: #1A2636;
  text-align: center;
  font-family: Serif;
  align-content: center;
  overflow: auto;
  margin: 10px;
  
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a:hover{
    color:#D17D89;
    text-decoration:underline;
}

#button:hover{
    cursor:pointer;
    opacity:.9;
}

textarea{
    width:80%;
    max-width:500px;
    height:120px;
}

#title {
    font-size: 4em;
    text-align: center; 
    color: white; 
    font-family: cursive;
    line-height: 0.8;
    padding: 5px;
    display: block;
   margin: 20px;
    }

#subtitle {
  font-size: 1.5em;
  display: block;
  margin: 10px;
 }
   

.paragraph { 
  font-family: Fantasy;
  font-weight: 200;
  line-height: 2.0;
  background: #D4A7B0 ;
  color: #312E43 ;
  padding: 25px;
  
}

.paragraph:focus {
    color: #D4A7B0 ;
}

table { 
   width:99%;
   font-style:oblique;
   font-weight: 100;
   padding: 20px;
   color: #ffd5bf ;
   border:solid #D17D89;
   border-width: 2px, 0;
   border-left: none;
   border-right: none;
   margin: 5px;
   background-image:   radial-gradient( #312E43, #1A2636);
   vertical-align: baseline;
   line-height: 1.3;
}


#quote {
  font-family: cursive;
  line-height: 1.3;
  background: #D4A7B0 ;
  color: #312E43;
  padding: 7px;
  margin: 10px;
  line-height: 2.0;
}


h3 {
  font-size: 1.2em;
  margin: 10px;
}              
  
textarea {
  color: #ffd5bf ;
  text-align: center;
  padding: 5px;
  border: 1px solid #D17D89;
  background: #1A2636;
  transition-duration: 0.5s;
  transition-timing-function: linear;
  margin: 10px;
}


textarea:focus {
  background: #D4A7B0 ;
  color: #312E43;
  border: none ;
  outline: none;
}

#button {
   border: none;
   background:#D17D89;
   color: white;
   margin: 10px;
  
}

#button:focus { 
   border: 1px dashed #D17D89;
   background: #1A2636;
}



a {
  color: #ffd5bf;
  font-family: Verdana;
  font-weight: 300;
  text-decoration: none;
  display: block;
  padding: 10px;
}


.braid { 
   color: #D17D89;
   display: inline;
   vertical-align: baseline;
}

span .braid { animation: colors 20s linear 0s infinite reverse forwards;}

@keyframes colors {

0% { color: #1A2636 ;  }
 
10% { color: #ffd5bf ; }
 
15% { color: #8098ff ; }

20% { color: #312E43 ; }

25% { color: #ffaaf4 ; }
      
30% { color: #D17D89 ; }

35% {color: #005e9f ; }
      
40% { color: white ; }

45% { color: #ffe795 ; }
      
50% { color: grey ; }

55% { color: #80ff98 ; }
      
60% { color: black ; }

65% { color: #ff6a6a ; }
      
70% { color: #D4A7B0 ; }

75% { color: #ff00c7 ; }
      
80% { color: hsl(287,25%,85%) ; }

85% { color: #ff005e ; }
      
90% { color: #1A2636 ; }

95% { color: #5000ff ; }
      
100% { color: #1A2636 ; }
}
  


/*
colors:

pink title 209, 125, 137 #D17D89
background #1A2636 deepblue 
p light pink #D4A7B0
expbg light cream hsl(287,25%,85%)
ex background #312E43
gold #ffd5bf
*/