/* The modal's background */
@charset "utf-8";
/* CSS Document */
*
{
	box-sizing: border-box;
	--redColor: rgba(235,12,16,1.00);
	--yellowColor:  rgba(220,224,20,1.00);
	--orangeColor: rgba(221,142,0,1.00);
	--etherialBlue:  rgba(9,72,64,0.65);
	--greenColor: green;
}
 /* --------------Modal-------------- */
 .modal {
    z-index: 700;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  .modal:target {
    display: block;
    position: fixed;
  }
  
  .modal-dialog {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .modal-content {
    left: 50%;
    transform: translate(-50%, -3px);
    background-color: yellow;
    background-image: radial-gradient(circle, #cfd7bc, #d3e39f, #daed7f, #e4f756, #f0ff00);
    position: absolute;
    padding: auto;
    outline: 5px;
    border: 6px black solid;
    text-align: justify;
    width: 95%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
    font-size: 1em;
    animation-name: example;
    animation-duration: 0.5s;
  }
  
  .closebtn {
    text-decoration: none;
    float: right;
    font-size: 2em;
    font-weight: bold;
    color: var(--redColor);
  }
  
  .closebtn:hover,
  .closebtn:focus {
    color: var(--orangeColor);
    text-decoration: none;
    cursor: pointer;
  }
  
  .modal-container {
    padding: 2px 16px;
  }