#caesarCipher { /* flex item & flex box */
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  height: auto;
}

#caesarCipher { /* flex box */
  background-image: linear-gradient(90deg, #849ead 50%, rgb(255,255,240) 50%); /* Blue Stone lightness 60%  | ivory */
}

/* header */
#caesarCipher header {/* flex item */
  margin: 60px 0 2px 0;
}

#caesarCipher h2 {
  font: normal small-caps 400 30px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
  text-transform: capitalize;
  padding: 36px 0 5px 0;
  height: 77px;
}

#caesarCipher p.description {
  border-top: 3px inset #577284; /* Blue Stone */
}

/* paragraphs */
#caesarCipher div.paraContainer {/* flex box */
  padding: 35px 32px 49px 32px; /* visual effect */
}

div.para p.comment {
  margin-inline: auto;
  max-width: 800px;
  line-height: 1.4;
  letter-spacing: 0.0375rem;
  text-align: left;
}

/* pseudo-element to add a special style to the first letter of a text. */
.first-paragraph::first-letter {
  font-size: 3.75rem;
  color: #614705;
  margin-right: 1rem;
  float: left;
}

div.para  p:nth-of-type(1),
div.para  p:nth-of-type(3){
  padding: 0 0 16px 0;
}

div.para p.symbols {
  font: normal small-caps 500 1.3rem "Raleway", sans-serif;
}

/* an example of the result of applying the caesarCipher */
#caesarCipher div.gallery {
  margin: 0;
}
#caesarCipher div#pageMaker { /* flex box | flex item  */
  max-width: 800px;
}

div#pageMaker div#ivoryColor { /* flex item*/
  margin: 20px 0;
  width: 100%;
}

div#pageMaker div#yellowColor { /* flex item */
  margin: 20px 0 40px 0;
  width: 100%;
}

div#pageMaker blockquote#cryptography2,
div#pageMaker blockquote#cryptography1 {/* flex item */
  margin-top: 16px;
  margin-inline: auto;
  border-radius: 5px;
  border: none;
}

div#pageMaker blockquote#cryptography2 q,
div#pageMaker blockquote#cryptography1 q {
  display: block;
  margin: 0 auto;
  font: italic 400 1.3rem "Raleway", sans-serif;
  line-height: 1.6;
}

div#pageMaker blockquote#cryptography1 {
  background-color: #fffff0;
  padding: 8px;
}

div#pageMaker blockquote#cryptography2 {
  background-color: #bdb76b; /* DarkKhaki*/
  padding: 8px;
}

#caesarCipher span.fcc {
  font: normal small-caps 400 1.3rem "Raleway", sans-serif;
}

#caesarCipher a#fccLink,
#caesarCipher a#ROT13{
  margin: 0;
  padding: 0;
  display: inline-block;
}

/* form
*************************************************/
div.formContainer { /* flex item */
  max-width: 1400px;
  margin-inline: auto;
  background-image: linear-gradient(90deg, #849ead 50%, rgb(255,255,240) 50%); /* Blue Stone lightness 60%  | ivory */
}

form#writingZone {
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  padding: 32px 32px;
}

form#writingZone div.card {
  height: 100%;
  border-radius: 5px;
  background-color: #fffff0;
}

/* <heather> tag container <button> languages */
form#writingZone header#languages { /* flex box */
  margin: 0; /* the header of the section has a margin. */
  border-radius: 5px 5px 0 0; /* top-left, top-right, bottom-right, bottom-left.*/
}

/* <div> tag with width = 45% for each element with <button> tag. */
form#writingZone div.btnLangContainer {
  height: 50px;
  border-top-left-radius: 5px;
}

form#writingZone div.btnLangContainer:last-of-type {
  border-radius: 0 5px 0 0; /* top-left, top-right, bottom-right, bottom-left.*/
}

/* <button type="button" class="heatherText"> tag */
header#languages button.headerText {
  height: 50px;
  font: 400 20px "Raleway", sans-serif;
  background-color:  #fffff0;
}

/* <button type="button" class="heatherText"> tag with different id */
#en1 {/* active */
  color: #577284;
  border-top-left-radius: 5px;
  border-bottom: 3px solid #577284;
}

#cC2 {/* active */
  color: #577284;
  border-bottom: 3px solid #577284;
}

#cC1 {
  border-bottom: 3px solid #fffff0;
}

#en2 {
  border-top-right-radius: 5px;
  border-bottom: 3px solid #f5f5dc;
}

header#languages button.headerText:hover {
  background-color: rgba(87,114,132,0.3);
}

/* and 10% for the button to alternate. */
/* <button type="button" id="alternate"> to altenate languages.*/
button#alternate {
  width: 40px;
  height: 40px;
  color: #000;
  background-color: #fffff0;
  border-radius: 50%;
  border: 1px solid rgba(87,114,132,0.5);
  cursor: default;
}

span.doubleArrow {
  display: block;
  font: 300 20px "Raleway", sans-serif;
}

#alertContainer {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding-inline: 20px;
}

#alertMessage {
  display: block;
  visibility: hidden;
  color: #800000;
  margin-inline: auto;
  max-width: 400px;
  border-left: 6px solid #800000;
  background-color: transparent;
  padding: 0 0 0 5px;
}

#arrowDown {
  visibility: hidden;
  display: inline-block;
  border: solid #800000;
  border-width: 0 3px 3px 0;
  margin-top: 5px;
  padding: 10px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* textarea
===========*/
/* A <div> tag containing two <div> tags with half of width each.*/
div#divideSpace { /* flex box */
  height: calc(100% - 54px); /* calc() function |  <heather> tag container <button> languages has height: 54px.*/
  border-radius: 0 0 5px 5px; /* top-left, top-right, bottom-right, bottom-left.*/
}

/* A <div> tag for each <textarea> tag with space for the <button type="reset">.*/
div.areaToWrite { /* flex item  & flex box */
  height: auto;
  background-color: #fffff0; /* because div.resetContaier has a height of 50px and does not cover the entire height.*/
}

div#langOrCode {/* flex item  & flex box */
  align-items: flex-start;
  border-radius: 0 0 0 5px; /* top-left, top-right, bottom-right, bottom-left.*/
  background-color: #fffff0;
}

div#output {/* flex item */
  border-radius: 0 0 5px 0; /* top-left, top-right, bottom-right, bottom-left.*/
}

/* <textarea> tag */
textarea#outputText,
textarea#enterText {
  padding: 16px 0 0 16px;
  height: 100%;
  resize: none;
  user-select: text;/* It is necessary because if not, it does not work */
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

textarea#outputText {
  font: 400 20px "Raleway", sans-serif;
  color: rgba(77,0,0,1);
  background-color: #f5f5dc;
  border-bottom-right-radius: 5px;
}

textarea#enterText {/* flex item */
  width: calc(100% - 60px); /* calc() function */
  border-bottom-left-radius: 5px;
  font: 400 20px "Raleway", sans-serif;
  color: rgba(0,0,0,1);
  background-color: #fffff0;
}

#enterText:focus,
#enterText:hover {
  outline: none;
  outline-color: transparent;
  color: #000;
}

/* A <div> container a <button type="reset"> */
div.resetContainer {/* flex item */
  width: 60px;
  height: 100%;
  padding: 5px 0 0 0;

}

/* <button type="reset"> */
button#clearArea {
  width: 40px;
  height: 40px;
  color: #000;
  background-color: #fffff0;
  border-radius: 50%;
  border: 1px solid #577284;
  cursor: pointer;
}

/* Mouse over button: Change color on hover */
button#clearArea:hover {
  color: #fffff0;
  background-color: #577284;
}

span#ex {
  display: inline-block;
  font: 400 18px "Raleway", sans-serif;
}

/* submit the form
==================*/
/* <div> tag container a <button typa="submit"> submit the form */
div.submitContainer {
  width: 100%;
  height: 30%;
  margin: 50px 0 0 0;
}

button#textSubmit {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  padding: 20px 0;
  font: 400 18px "Raleway", sans-serif;
  color: #fffff0;
  background-color: rgb(128,0,0);
  border-radius: 7px;
  cursor: pointer;
}

/* on hover */
button#textSubmit:focus,
button#textSubmit:hover { /* class="boxShadow"*/
  color: #fffff0; /* ivory */
  background-color: #800000; /* maroon */
  border-radius: 7px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  -webkit-box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  -moz-box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

div.formContainer div.paraContainer {
  padding: 0 32px 64px 32px ;
}

div.formContainer p.comment {
  margin: 0 auto;
  max-width: 800px;
  line-height: 1.4;
  letter-spacing: 0.0375rem;
  text-align: left;
}

div.formContainer p.comment:last-of-type {
  text-align: center;
  font: normal small-caps 500 24px "Raleway", sans-serif;
}

/* BREAKPOINTS WITH */
/* CSS3 MEDIA QUERIES 
*********************
*/
/* Very small devices | Reduce the size of some elements.
********************************************************* */
@media only screen and (max-width: 599px) {
  /* paragraphs */
  #caesarCipher div.paraContainer {/* flex box */
    padding: 35px 0 49px 0; /* visual effect */
  }

  form#writingZone {
    padding: 32px 16px;
  }

  div.formContainer div.paraContainer {
    padding: 0 16px 64px 16px ;
  }

  div.para  p:nth-of-type(4){
    text-align: center;
  }

  div#divideSpace {
    flex-direction: column;
  }

  /* A <div> tag for each <textarea> tag with space for the <button type="reset">.*/
  div.areaToWrite { /* flex item  & flex box */
    width: 100%;
    height: 100%;
  }

  textarea#enterText,
  div#langOrCode {/* flex item  & flex box */
    border-bottom-left-radius: 0px;
  }

  textarea#outputText,
  div#output {/* flex item */
    border-radius: 0 0 5px 5px; /* top-left, top-right, bottom-right, bottom-left.*/
  }

  #en1,
  #cC2 {
    width: 100%;
  }

  #cC1,
  #en2 {
    display: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up)
******************************************************************/
@media only screen and (min-width: 600px) and (orientation: landscape){
  div#pageMaker div#ivoryColor,/* flex item */
  div#pageMaker div#yellowColor {
    max-width: 49%; /* it is equal to 392px for each block and 16px of column-gap = 800px */
    margin: 20px 0 40px 0;
  }

  #cC1,
  #en2 {
    display: block;
  }
}

/* Medium devices (landscape tablets, 768px and up)
***************************************************/
@media only screen and (min-width: 768px) and (orientation: landscape){
  #caesarCipher p.comment {
    max-width: 800px;
  }

  #caesarCipher p.comment:last-of-type {
    text-align: center;
  }

  #caesarCipher h2 {/* Subtitle page | sections title */
    font: normal small-caps 400 34px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
  }

  #caesarCipher p.description {
    font: 400 24px "Raleway", sans-serif;
    padding: 5px 0 24px 0;
  }

  #caesarCipher p.comment:nth-of-type(6),
  #caesarCipher a#fccLink,
  #caesarCipher a#ROT13{
    text-align: center;
  }

  #caesarCipher div.paraContainer {/* flex box */
    padding: 35px 0 49px 0;
  }
}

/* Large devices (laptops/desktops, 992px and up)
**************************************************/
@media only screen and (min-width: 992px) and (orientation: landscape){
  /* paragraphs */
  form#writingZone {
    padding: 32px 0;
  }

  div.formContainer div.paraContainer {
    padding: 0 0 64px 0;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up)
******************************************************************/
@media only screen and (min-width: 1200px) {
  #caesarCipher {
    background-image: linear-gradient(149deg, #849dae 50%, #fffff0 50%); /* beige | ivory */
  }

  div.formContainer {
    background-image: linear-gradient(32deg, #849dae 50%, #fffff0 50%); /* beige | ivory */
  }
}

/* Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.*/
/*
  Bootstrap's grid system allows up to 12 columns across the page.
  ================================================================*/
/* grid-view, the page is divided into columns:*/
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }