/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 1/29/2024 67:26:45 PM
    Author     : Cy



#editorArea
{ 
    background-color: lightgray;
    min-height: 600px;
    
}


*/

body{
    margin: 20px;
}

#editor
{
    background-color: white;
    margin: 10px 10px 10px 10px;
    min-height: 500px;
}



.noteSaveButton {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 5px 3px;
  border-radius: 20px;
  border-style: groove;
  cursor: pointer;
}
/*Adding hover effect to the button*/
.noteSaveButton:hover {
  background-color: #f1f1f1;
  transition-duration: 0.5s;
}

#instructArea{
    height: 20px;
  
}

.box
{
  width:calc(100% - (10px * 2));
  height:calc(100% - (10px * 2));
  margin: 0 auto;
  padding: 2px;
  background-color: #eaab00; /* gold */
  /* Single pixel data uri image http://jsfiddle.net/LPxrT/ */
  /* background-image: gold, gold, white;*/
  
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAOqrAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='),
      url('data:image/gif;base64,R0lGODlhAQABAPAAAOqrAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='),
  url('data:image/gif;base64,R0lGODlhAQABAPAAAP///////yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
  background-repeat: no-repeat;
  background-size: 0 2px, 0 100%, 0% 2px;
  background-position: top center, top center, bottom center;
  -webkit-animation: drawBorderFromCenter 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes drawBorderFromCenter {
    0% {
      background-size: 0 2px, 0 0, 100% 100%;
    }
    20% {
      background-size: 100% 2px, 100% 0, 100% 100%;
    }
    66%
    {
      background-size: 100% 2px, 100% 98%, 100% 100%;
    }
    99%
    {
      background-size: 100% 2px, 100% 98%, 0 2px;
    }
}



.content
{
  background: white;
  padding: 2em;
  text-align: center;
  /*    text-transform: uppercase;*/
}



#save{
   height:25px;
   width:110px;
   background-color:blue;
   border:none;
   color:white;
   border-radius: 50px;
   
}