:root{
    --dark : rgb(97,111,161);
    --darker:#29275c;
    --darkest :rgb(30,28,64);
    --gray : #6B7280;
    --light : #EEE;
   
  }
  * {
      box-sizing: border-box;
      margin: 0;
      font-family: cursive;
  
  }
  body{
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background: var(--dark);
      color: #FFF;
  
  }
  .container{
    display: flex;
  }
  header{
      padding: 2rem 1rem;
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
  }
  header h1{
      font-size: 2.5rem;
      font-weight: 100;
      color : white;
      margin-top: -2rem;
      margin-bottom: 1rem;
  }
  #new-jrnl-form{
      display: flex;
  
  }
  input , button{
      appearance: none;
      border: none;
      outline: none;
      background: none;
  }
  #new-jrnl-input{
      flex :1 1 0%;
      background-color: var(--darker);
      padding: 1rem;
      border-radius: 1rem;
      margin-right: 1rem;
      color : var(--light);
      font-size: 1.25rem;
  }
  #new-jrnl-input::placeholder{
      color: rgb(91, 91, 91);
  }
  #new-jrnl-submit{
    margin-top: 60px;
    height: 50px;
    width: 50px;
      color:crimson;
      font-size: 35px;
      font-weight: 1000;
      background-color:#1e1c40;
      border-radius: 10rem;
      cursor: pointer;
      transition: 0.4s;
  }
  #new-jrnl-submit:hover{
  color: white;
  }
  #new-jrnl-submit:active{
      opacity: 0.6;
  }
  main{
      flex:1 1 0%;
      max-width: 800px;
      width:200%;
      margin: 0 auto;
  }
  .jrnl-list{
      padding: 1rem;
  }
  .jrnl-list h2{
  font-size: 1.5rem;
  font-weight: 100;
  color:white;
  margin-bottom: 1rem;
  }
  #jrnls .jrnl{
    margin-left: -300px;
    margin-right: -270px;
      display: flex;
      justify-content: space-between;
      background-color: var(--darkest);
      padding : 1rem;
      border-radius: 1rem;
      margin-bottom: 1rem;
  }
  #jrnls .jrnl .content{
      flex : 1 1 0%;
  }
  #jrnls .jrnl .content .text{
      color: var(--light);
      font-size: 1.125rem;
      width:100%;
      display: block;
      transition: 0.4s;
  }
  #jrnls .jrnl .content .text:not(:read-only)
  {
      color: var(--pink);
  }
  #jrnls  .jrnl .actions{
      display: flex;
      margin: 0 -0.5rem;
  }
  .jrnl .actions button{
      cursor: pointer;
      margin: 0 0.5rem;
      font-size: 1.1.25rem;
      font-weight: 700;
      text-transform: uppercase;
      transition: 0.4s;
  }
  
  .jrnl .actions button:hover{
      opacity : 0.8;
  }
  .jrnl .actions button:active{
      opacity: 0.6;
  }
  .jrnl .actions .edit{
     color: crimson;
  }
  .jrnl .actions .delete{
      color : crimson;
  }
  img{
    padding-top: 20px;
      height: 120px;
      
  }
  #jrnls-text{
    background-color:#29275c;
    color: white;
    width: 100%;
    height: 100px;
    font-family:cursive;
    resize: vertical;
    font-weight:lighter;
 }