#smallScreenWarn {
  display: none;
  padding: 5px;
  background-color: orange;
}

#noWarn {
  background-color: indianred;
  border-color: indianred;
  color: gainsboro;
}

#title {
  font-size: 77px;
  font-family: 'Nothing You Could Do';
  font-weight: 900;
  vertical-align: 25%;
  line-height: 0.9;
  word-spacing: -25px;
}

#fullTitle {
  margin: 15px 0px;
  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.333)) drop-shadow(0px 0px 5px rgba(195, 91, 255, 0.5));
}

#header {
  text-align: center;
  background-image: radial-gradient(at 0% 0%, cornflowerblue, blueviolet);
  display: grid;
  grid-template-columns: 40% 30% 30%;
  border-bottom: 10px outset blueviolet;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.75));
  position: sticky;
  top: 0;
  z-index: 1;
}

#CountdownBox {
  margin: 10px;
  padding: 0px 10px;
  border-top: 10px inset rgb(89, 70, 187);
  border-left: 10px inset rgb(119, 96, 232);
  border-bottom: 10px inset rgb(167, 90, 240);
  border-right: 10px inset blueviolet;
  background-color: rgb(26, 0, 51);
  color: rgb(194, 218, 255);
  text-shadow: 0 0 15px rgb(64, 169, 255),0 0 40px rgb(98, 0, 255);
  font-weight: normal;
}

#Countdown {
  font-size: 77px;
  font-family: 'Libre Barcode 128 Text';
}

#CountdownLabel {
  font-size: 20px;
  font-family: 'Syne Mono';
}

#thirdContainer{
  margin-top: -1%;
}

.thirdthing {
  margin: 10px;
  font-size: 16px;
  display: none;
}

.thirdbutton {
  font-family: 'Nothing You Could Do';
  font-size: 20px;
  padding: 3px 10px;
  background-image: linear-gradient(160deg, silver 20%, WhiteSmoke 35%, darkgrey 53%, WhiteSmoke 65%, darkgrey 73%, silver 77%);
  border: 5px outset silver;
  border-top: 5px outset whitesmoke;
  border-right: 5px outset whitesmoke;
  color: gray;
  text-shadow: -1px -1px 0 rgb(71, 71, 71), 0.5px 0.5px 0 whitesmoke;
  font-weight: bold;
}

.thirdbutton:hover{
  color: rgb(160, 160, 160);
  text-shadow: -1px -1px 0 rgb(131, 131, 131), 0.5px 0.5px 0 rgb(255, 255, 255);
}

.thirdbutton:disabled{
  color: rgb(160, 160, 160);
  text-shadow: -1px -1px 0 rgb(131, 131, 131), 0.5px 0.5px 0 rgb(255, 255, 255);
}

body {
  margin: 0px;
  font-family: 'Fuzzy Bubbles';
  font-weight: normal;
  background-image: url("./24hrImages/foad-roshan-unsplash.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  font-size: 16px;
  line-height: 1.25;
}

#bgcredit {
  position: fixed;
  width: 125px;
  height: 30px;
  bottom: 10px;
  right: 10px;
  padding: 5px;
  line-height: 1.25;
  background-color: rgba(245, 245, 245, 0.33);
  color: darkgrey;
  z-index: -100;
  font-size: 12px;
}

.creditlinks {
  color: rgb(63, 63, 63);
}

#bodyInfo {
  margin-top: 25px;
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 15px;
}

.leftInfo, .rightInfo, #FAQ {
  margin: 0px 20px;
}

#FAQ {
  margin-bottom: 65px;
  grid-column: auto / span 2;
}

.info {
  margin: 0px;
  padding: 10px;
  background-color: rgba(157, 184, 233, 0.5);
}

#faqInfo {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 30px;
}

h2 {
  margin: 0px;
  padding: 10px;
  padding-bottom: 5px;
  border: 5px inset rgba(101, 132, 190, 0.5);
  background-color: rgba(101, 132, 190, 0.5);
  font-family: 'Nothing You Could Do';
}

html {
  container-type: scroll-state;
}

.hiddenScrollable {
  overflow: hidden;
}

.miniHeader {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  font-size: 20px;
}

.material-symbols-outlined {
  font-size: 24px;
  vertical-align: -10%;
  color:#2d2c6e;
}

:root {
  --checkbox-border-color: #8b8c89;
  --checkbox-checked-color: #3534a3;
}

input[type="checkbox"] {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: auto 0px;
  margin-left: 3px;
  padding: 0;
  border: 2px solid var(--checkbox-border-color);
  appearance: none;
  background-color: transparent;
  outline: none;
}

input[type="checkbox"]:checked {
  background-size: cover;
  padding: 2px;
}

input[type="checkbox"]:checked {
  border-color: var(--checkbox-checked-color);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23274c77" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}

.bullet {
  margin-top: -30px;
}

label {
  display: block;
  margin-left: 55px;
  margin-top: -24px;
}

.indent1 {
  margin-left: 30px;
  margin-top: -2px;
}

.indent1Text{
  margin-top: -22px;
}

i {
  font-size: 14px;
  opacity: 0.5;
}

#startDate, #endDate, #submitDate {
  background-color: rgba(100, 148, 237, 0.5);
}

#scheduleDiagram {
  display: grid;
  grid-template-columns: 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4% 4%;
}

.workEven, .workOdd, .break, .games, .submission {
  writing-mode:sideways-lr;
  padding: 10px 0px;
  align-content: center;
  text-align: center;
}
.workEven {
  background-color:rgb(94, 130, 230);
  color: rgb(28, 46, 97);
}
.workOdd {
  background-color:cornflowerblue;
  color:rgb(33, 54, 92);
}
.break {
  background-color:rgb(172, 88, 228);
  color:rgb(57, 15, 85);
}
.games {
  background-color:rgb(109, 207, 109);
  color:rgb(42, 80, 42);
}
.submission {
  background-color:rgb(235, 211, 76);
  color:rgb(92, 82, 29);
}








@media screen and (max-width: 1500px) {
  #header {
    grid-template-columns: auto auto 34%;
  }
  .thirdthing {
    margin: 5px;
    font-size: 14px;
  }
  .thirdbutton {
    font-size: 18px;
    padding: 3px 10px;
  }
  #title {
    font-size: 40px;
    word-spacing: -15px;
  }
  #logo {
    width: 50px;
    height: 50px;
  }
  #Countdown {
    font-size: 60px;
  }
  #CountdownLabel {
    font-size: 16px;
  }
  h2 {
    font-size: 24px;
  }
}

@media screen and (max-width: 1160px) {
  #header {
    grid-template-columns: auto 44% 34%;
  }
}

@media screen and (max-width: 999px) {
  #smallScreenWarn {
    display: inline;
  }
  #thirdContainer{
    margin-top: -4%;
  }
  #bodyInfo {
    grid-template-columns: 100%;
    row-gap: 0px;
  }
  .leftInfo, .rightInfo {
    margin: 0px 20px !important;
    margin-bottom: 15px !important;
  }
  #FAQ {
    grid-column: auto;
  }
  #faqInfo {
    grid-template-columns: 100%;
  }
  #scheduleDiagram {
    font-size: 14px;
  }
}

@media screen and ((max-device-width: 600px) or (max-width: 600px)) {
  #smallScreenWarn {
    display: none;
  }
  #header {
    grid-template-columns: 100%;
  }
  #bodyInfo {
    width: 100%;
  }
  #CountdownBox {
    margin-top: 0px;
  }
  .thirdthing {
    font-size: 16px;
    padding: 0px 10px;
  }
  #scheduleDiagram {
    font-size: 12px;
  }
  .workEven, .workOdd, .break, .games, .submission {
    text-orientation: upright;
    letter-spacing: -4px;
    padding: 5px 0px; 
  }
  #orig {
    color:black !important;
  }
}