.sfdcDevDiv {
    text-align: center;
 }

 .main {
    background-color: black;
    color: white;
    height: 50px;
 }

 .dev {
    background-color: ivory;
    padding-top: 20px;
    display: none;
 }

 .devArchive {
   background-color: ivory;
   padding-top: 20px;
   display: block;
 }

 .pageTitle {
    text-align: center;
    /*text-decoration: underline;*/
    font-family: cursive;
 }

 /*.devNav {
    padding: 5px; 
    background-color: #FFE7E7;
    border-radius: 5px;
    filter: drop-shadow(0 0 2px black);
    height: auto;
    width: 40%;
    /*margin: auto;*
    cursor: pointer;
    margin-top: 10px;
}*/

.releaseSec {
    float:left; 
    color: #585858; 
    font-weight: bold; 
    font-size: small; 
    font-style: oblique;
}

.releaseName {
    font-size: 15px; 
    font-style: normal;
    color: darkblue;  
}

.archiveSec {
    float:right; 
    color: #585858; 
    font-weight: bold; 
    font-size: small; 
    font-style: oblique;
 }

 .releaseTitle {
    text-align:center; 
    margin-top: -20px; 
    margin-bottom: -10px;
    /*margin-left: 10rem;*/
 }

 .navTitle {
   /*text-align:center;*/
   color: #f00;
   margin: 10px 10px 0 10px;
 }

 .navPara {
   font-size: 13px;
   padding: 10px 10px 15px 10px; 
   line-height: 1rem;
   color: #585858;
 }

 .indexDev {
   font-family: sans-serif;
   padding: 2rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }

/*.navTextDiv {
   display:flex;
   flex-direction:row; 
   flex-wrap: wrap;
 }*/

.devNav:hover {
   filter: drop-shadow(0 0 1pc black);
}

.footerSection {
   text-align: center; 
   background-color: ivory;
 }

 .container {
   flex-grow: 1;
   margin: 0 auto;
   position: relative;
   width: auto
}

.notificationContainer {
   white-space: nowrap; 
   overflow: hidden; 
   padding: 4rem 4rem 2rem 4rem;;
}

.notificationText {
   animation: 20s linear 0s infinite normal none running marqueeAnimation; 
   font-size: medium; 
   font-weight: bold; 
   font-stretch: normal; 
   font-style: normal; 
   font-family: sans-serif; 
   color: darkred;
}

@media screen and (min-width: 1080px) {
   .devNav {
      padding: 5px; 
      background-color: #FFE7E7;
      border-radius: 5px;
      filter: drop-shadow(0 0 2px black);
      height: auto;
      width: 40%;
      /*margin: auto;*/
      cursor: pointer;
      margin: 10px 10px 10px 10px;
  }
  
  .navbutton {
      padding: 20px;
      margin: 20px;
      background-color: white;
      border-radius: 5px;
      width: 40%;
  }

  .navbutton span {
      font-size: 1.25rem;
      text-decoration:none;
      color: #f00;
      font-weight: 700;
  }

  .navTextDiv {
      display:flex;
   }

   @-webkit-keyframes marqueeAnimation  { 
      from { -webkit-transform: translateX(100%); }
      to { -webkit-transform: translateX(-125%); }
   }
}

@media screen and (min-width: 900px) and (max-width: 1080px) {
   .devNav {
      padding: 5px; 
      background-color: #FFE7E7;
      border-radius: 5px;
      filter: drop-shadow(0 0 2px black);
      height: auto;
      width: 40%;
      /*margin: auto;*/
      cursor: pointer;
      margin: 10px 10px 10px 10px;
  }

  .navbutton {
      padding: 20px;
      margin: 20px;
      background-color: white;
      border-radius: 5px;
      width: 45%;
   }

   .navbutton span {
      font-size: 1rem;
      text-decoration:none;
      color: #f00;
      font-weight: 700;
   }

   .navTextDiv {
      display:flex;
   }

   @-webkit-keyframes marqueeAnimation  { 
      from { -webkit-transform: translateX(100%); }
      to { -webkit-transform: translateX(-125%); }
   }
}

@media screen and (min-width: 700px) and (max-width: 900px) {
   .devNav {
      padding: 5px; 
      background-color: #FFE7E7;
      border-radius: 5px;
      filter: drop-shadow(0 0 2px black);
      height: auto;
      width: 45%;
      /*margin: auto;*/
      cursor: pointer;
      margin: 10px 10px 10px 10px;
  }

  .navbutton {
      padding: 20px;
      margin: 20px;
      background-color: white;
      border-radius: 5px;
      width: 45%;
   }

   .navbutton span {
      font-size: 0.7rem;
      text-decoration:none;
      color: #f00;
      font-weight: 700;
   }

   .navTextDiv {
      display:flex;
   }

   @-webkit-keyframes marqueeAnimation  { 
      from { -webkit-transform: translateX(100%); }
      to { -webkit-transform: translateX(-155%); }
   }
}

@media screen and (min-width: 500px) and (max-width: 700px) {
   .devNav {
      padding: 5px; 
      background-color: #FFE7E7;
      border-radius: 5px;
      filter: drop-shadow(0 0 2px black);
      height: auto;
      width: 100%;
      /*margin: auto;*/
      cursor: pointer;
      margin: 10px 10px 10px 10px;
  }

  .navbutton {
      padding: 20px;
      margin: 20px;
      background-color: white;
      border-radius: 5px;
      width: 30%;
   }

   .navbutton span {
      font-size: 1rem;
      text-decoration:none;
      color: #f00;
      font-weight: 700;
   }

   .navTextDiv {
      display:flex;
   }

   @-webkit-keyframes marqueeAnimation  { 
      from { -webkit-transform: translateX(100%); }
      to { -webkit-transform: translateX(-210%); }
   }
}

@media screen and (min-width: 400px) and (max-width: 500px) {
   .devNav {
      padding: 5px; 
      background-color: #FFE7E7;
      border-radius: 5px;
      filter: drop-shadow(0 0 2px black);
      height: auto;
      /*width: 100%;
      margin: auto;*/
      cursor: pointer;
      margin: 10px 10px 10px 10px;
  }

  .navbutton {
      padding: 20px;
      margin: 20px;
      background-color: white;
      border-radius: 5px;
      width: 40%;
   }

   .navbutton span {
      font-size: 0.7rem;
      text-decoration:none;
      color: #f00;
      font-weight: 700;
   }

   .navTextDiv {
      display:flex;
   }

   @-webkit-keyframes marqueeAnimation  { 
      from { -webkit-transform: translateX(100%); }
      to { -webkit-transform: translateX(-330%); }
   }
}

@media screen and (max-width: 400px) {
   .devNav {
      padding: 5px; 
      background-color: #FFE7E7;
      border-radius: 5px;
      filter: drop-shadow(0 0 2px black);
      height: auto;
      /*width: 100%;
      margin: auto;*/
      cursor: pointer;
      margin: 10px 10px 10px 10px;
  }

  .navbutton {
      padding: 20px;
      margin: 20px;
      background-color: white;
      border-radius: 5px;
      width: 40%;
   }

   .navbutton span {
      font-size: 1rem;
      text-decoration:none;
      color: #f00;
      font-weight: 700;
   }

   .navTextDiv {
      display:flex;
      flex-direction:row; 
      flex-wrap: wrap;
      justify-content: center;
   }

   @-webkit-keyframes marqueeAnimation  { 
      from { -webkit-transform: translateX(100%); }
      to { -webkit-transform: translateX(-500%); }
   }
}