/* Layout */
   body {
      background-image: url('../images/bg.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
      background-color: #2A2826;
      margin: 0 ;
      padding: 0;
      width: 100%;
   }
   header {
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: 40px 40px 0 40px;
   }
   main {
      margin: 20px auto;
      padding: 0 40px;
      max-width: 1080px;
   }
   .row-cards {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: stretch;
      justify-content: space-around;
      margin-bottom: 16px;
   }
   .row-workarea {
      width: 100%;
      height: 100%;
      align-items: stretch;
      justify-content: space-around;
      margin-bottom: 16px;
   }
   .workarea {
      background-color: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #2430F0;
      margin: 24px 12px 24px auto;
      padding: 24px 48px 48px 48px;
      text-align: center;
   }
   .workarea-text {
      color: #2A2826;
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      line-height: 150%;
      text-align: left;
   }
   h3.results, h4.results, p.results {
      color: #2A2826;
      text-align: left;
      margin-bottom: 8px;
   }
   #draggable p {
      color: #F0F0F0;
      background-color: #2430F0;
      border-radius: 8px;
      float: right;
      font-weight: bold;
      padding: 24px;
      transform: rotate(6deg);
      width: fit-content;
   }
   .card {
      background-color: #2A2826;
      border-radius: 8px;
      border: 1px solid #2430F0;
      margin-block-start: 0;
      margin: 0 12px 0 0;
      padding: 24px 24px 32px 24px;
      display: inline-block;
      vertical-align: top;
   }
   a.connect, .card a {
      color:#5285FF;
   }
   .card a:hover {
      color:#F0F0F0;
   }

/* Navigation */
   nav {
      background-image: url('../images/bg.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
      background-color: #2A2826;
      margin: 0 auto;
      padding: 40px 40px 0 0;
      top: 0;
      width: 100%;
      max-width: 1080px;
   }
   nav a {
      color: #F0F0F0;
      display: inline-block;
      font-family: 'Anton', sans-serif;
      font-size: 0.9em;
      font-style: normal;
      font-weight: 400;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
   }
   nav a:hover {
      color: #5285FF;
      text-decoration: underline;
   }
   .logo {
      background-color: #2430F0;
      font-size: 1.7rem;
      font-weight: 400;
      text-decoration: none;
      text-transform: uppercase;
      position: relative;
      clip-path: polygon(0% 30%, 25% 0%, 30% 20%, 55% 0%, 72% 20%, 95% 0%, 100% 60%, 70% 80%, 60% 70%, 50% 100%, 45% 90%, 20% 90%);
      transform: rotate(-6deg);
   }
   .logo:hover {
      background-color: #5285FF;
      color: #F0F0F0;
      text-decoration: none;
   }

/* Typography */
   h1, h2, h3, h4, h5, h6 {
      color: #F0F0F0;
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      text-align: left;
      margin-block-start: 0;
      margin: 1rem auto;
   }
   h1 {
      font-size: 2.6rem;
   }
   h2 {
      color: #2A2826;
      font-size: 2rem;
   }
   h3 {
      color: #F0F0F0;
      font-size: 1.6rem;
   }
   p, ol, ul {
      color: #F0F0F0;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      line-height: 150%;
      margin-block-start: 0;
   }
   a {
      color: #2430F0;
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      text-decoration: underline;
   }
   a:hover {
      color: #5285FF;
      text-decoration: underline;
   }
   .preheader {
      color: #F0F0F0;
      font-weight: 700;
   }

/* Tables */
   table {
      background-color: #F0F0F0;
      border-collapse: collapse;
      border: 1px solid #2430F0;
      padding: 0;
      margin: 0 auto 0 auto;
      width: 100%;
      max-width: 1080px;
   }
   .home-table tr:nth-child(even),
   #table5 tr:nth-child(even),
   #table6 tr:nth-child(even),
   #table7 tr:nth-child(even) {
      background-color: #FFFFFF;
   }
   .table-title {
      padding: 0 20px;
   }
   .table-title h3 {
      color: #2430F0
   }
   th {
      background-color: #2430F0;
      color: #FFFFFF;
      font-family: 'Roboto', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      text-align: left;
      padding: 16px 20px;
   }
   td {
      color: #2A2826;
      font-family: 'Roboto', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      padding: 16px 20px;
   }
   .student-grades {
      max-width: 400px;
      margin-left: 0;
      box-sizing: border-box;
   }
   textarea {
      width: 400px;
      max-width: 400px;
      box-sizing: border-box;
   }
   #hwAvg, #midExam, #finalExam, #participation {
      width: 400px;
      max-width: 400px;
      box-sizing: border-box;
   }
   #table5 th, #table5 td, #table6 th, #table6 td, #table7 th, #table7 td {
      text-align: left;
   }
/* Forms */
form {
   background-color: #F0F0F0;
   border: 1px solid #2430F0;
}
#myform {
   padding: 12px;
}
form table {
   background-color: #F0F0F0;
   border: 0;
}
label {
   color: #2430F0;
}
#myform td {
   font-family: 'Roboto', sans-serif;
   font-size: 0.85rem;
   font-weight: 600;
   text-align: left;
}
input {
   padding: 12px;
   margin: 12px 0;
   border: 1px solid #2430F0;
}
.right-align {
   text-align: right!important;
}
textarea {
   border: 1px solid #2430F0;
   padding: 24px;
   margin: 0;
}
::placeholder {
   color: #2430F0;
}
#inputSubmit, #inputReset, #nextQuestion, #endGame, #checkAnswer, #hw5sub, #hw5clear, #hw5go,#hw5-3get, #hw5-3clear {
   color: #F0F0F0;
   background-color: #2430F0;
   border: 1px solid #2430F0;
   font-family: 'Roboto', sans-serif;
   font-size: 0.85rem;
   font-weight: 400;
   padding: 16px 24px;
   margin-right: 8px;
   width: 12em;
   cursor: pointer;
}
#myform button {
   border: 1px solid #2430F0;
   color: #2430F0;
   background-color: #F0F0F0;
   font-family: 'Roboto', sans-serif;
   font-size: 0.85rem;
   font-weight: 600;
   padding: 16px 24px;
   width: 12em;
}

input[type="text"] {
   width: 100%;
   padding: 12px;
   margin-bottom: 10px;
   box-sizing: border-box;
   transition: background-color 0.3s ease;
}
#error {
   color: red;
   font-size: 1.2rem;
   font-weight: 700;
}

/* Default background color */
input[type="text"] {
   background-color: #F0F0F0;
}

/* Blue background when clicked */
input[type="text"].clicked {
   background-color: #5285FF;
   color: #F0F0F0;
}

/* Math Game*/
#mathGame {
   background-color: #F0F0F0;
   border: 1px solid #2430F0;
   padding: 12px 24px 24px 24px;
}
input[type="button"] {
   border: 1px solid #2430F0;
   color: #2430F0;
   background-color: #F0F0F0;
   font-family: 'Roboto', sans-serif;
   font-size: 0.85rem;
   font-weight: 600;
   padding: 16px 24px;
   width: 12em;
}
/*
.question-box, .answer-box, .feedback, #playAgain {
   padding: 20px;
}
*/
.feedback {
   padding-top: 20px;
}
.question-box, .answer-box, .feedback {
   text-align: left;
}
#playAgain {
   display: none;
   text-align: left;
}
#playAgain p{
   color:#2A2826;
   font-weight: 600;
   text-align: left;
}

/* Panels */
   #panel, #flip {
      border: 1px solid #2430F0;
      font-family: 'Roboto', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
   }
   #flip {
      background-color: #2430F0;
      color: #F0F0F0;
      padding: 12px;
   }
   #panel {
      background-color: #F0F0F0;
      color: #2A2826;
      padding: 24px;
      display: none;
   }

/* Elements */
   hr {
      border-color: #2430F0;
      border-style: solid;
      border-top: 1px;
      margin: 30px 0;
      padding: 0;
   }
   .return {
      margin-bottom: 24px;
   }
   .return-link {
      color: #2A2826;
   }

/* Calculator */
   #calculator tr {
      border: 1px solid #2430F0;
   }
   #calculator td, #calculator th {
      text-align: left;
      font-family: 'Roboto', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      padding: 12px 24px;
   }
   #usdInput, #eurValue, #cadValue, #jpyValue, #mxnValue {
      text-align: right;
   }

/* Generate Square */
   #square-result {
      color: #2430F0;
      font-family: monospace;
      margin-top: 20px;
      text-align: left;
      white-space: pre;
   }
   #square-form {
      text-align: left;
      padding: 20px;
   }
   #square-form input {
      margin: 20px 0;
      width:fit-content;
   }
   .errorSquare {
      color: red;
      font-family: 'Roboto', sans-serif;
   }

/* Data Validation Page */
fieldset {
   border: 0;
   text-align: left;
}
select {
   margin: 0 0 20px 20px;
   padding: 12px;
   text-align: left;
   border-color: #2430F0;
   color: #2430F0;
}
select::after {
   right: 10px;
}
#data-validation, #stateForm {
   padding: 24px;
   text-align: left;
}
#stateForm {
}
#stateForm p {
   color: #2A2826;
   font-weight: 500;
}
#data-validation legend, #data-validation label {
   color: #2430F0;
}
#data-validation fieldset label {
   color: #2A2826;
   font-weight: 500;
}
#output {
   margin: 24px 0;
   color: #2A2826;
   font-weight: 500;
}
#output table tr td {
   color: #2A2826;
   font-weight: 500;
   vertical-align: top;
   margin: 0;
   padding: 0 8px 0 0;
}
.error {
   font-size: 1rem;
   font-weight: 500;
   text-align: left;
}
#dropdown1, #dropdown2 {
   padding: 15px;
   margin: 0;
}
.hw5para {
   text-align: left;
   color: #2A2826;
}
div.dropdownMenus {
   text-align: left;
}

/* Footer */
   footer {
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 40px;
   }
   footer p {
      font-family: 'Roboto', sans-serif;
      font-size: 0.9em;
      font-weight: 700;
   }

   /* Mobile */
   @media (max-width: 900px) {
      .row-cards {
         display:inline-block;
      }
      .card {
         margin-bottom: 12px;
      }
   }