@font-face {
  font-family: "IBM 3270 Narrow";
  src: url("https://sharadcodes.github.io/fonts/tzone/ibm.eot"); /* IE9 Compat Modes */
  src: url("https://sharadcodes.github.io/fonts/tzone/ibm.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://sharadcodes.github.io/fonts/tzone/ibm.otf") format("opentype"), /* Open Type Font */
    url("https://sharadcodes.github.io/fonts/tzone/ibm.svg") format("svg"), /* Legacy iOS */
    url("https://sharadcodes.github.io/fonts/tzone/ibm.ttf") format("truetype"), /* Safari, Android, iOS */
    url("https://sharadcodes.github.io/fonts/tzone/ibm.woff") format("woff"), /* Modern Browsers */
    url("https://sharadcodes.github.io/fonts/tzone/ibm.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Curved square";
  src: url("https://sharadcodes.github.io/fonts/tzone/cs.eot"); /* IE9 Compat Modes */
  src: url("https://sharadcodes.github.io/fonts/tzone/cs.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://sharadcodes.github.io/fonts/tzone/cs.otf") format("opentype"), /* Open Type Font */
    url("https://sharadcodes.github.io/fonts/tzone/cs.svg") format("svg"), /* Legacy iOS */
    url("https://sharadcodes.github.io/fonts/tzone/cs.ttf") format("truetype"), /* Safari, Android, iOS */
    url("https://sharadcodes.github.io/fonts/tzone/cs.woff") format("woff"), /* Modern Browsers */
    url("https://sharadcodes.github.io/fonts/tzone/cs.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Algol";
  src: url("https://sharadcodes.github.io/fonts/tzone/algol.eot"); /* IE9 Compat Modes */
  src: url("https://sharadcodes.github.io/fonts/tzone/algol.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://sharadcodes.github.io/fonts/tzone/algol.otf") format("opentype"), /* Open Type Font */
    url("https://sharadcodes.github.io/fonts/tzone/algol.svg") format("svg"), /* Legacy iOS */
    url("https://sharadcodes.github.io/fonts/tzone/algol.ttf") format("truetype"), /* Safari, Android, iOS */
    url("https://sharadcodes.github.io/fonts/tzone/algol.woff") format("woff"), /* Modern Browsers */
    url("https://sharadcodes.github.io/fonts/tzone/algol.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Lazenby Computer";
  src: url("https://sharadcodes.github.io/fonts/tzone/lc.eot"); /* IE9 Compat Modes */
  src: url("https://sharadcodes.github.io/fonts/tzone/lc.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://sharadcodes.github.io/fonts/tzone/lc.otf") format("opentype"), /* Open Type Font */
    url("https://sharadcodes.github.io/fonts/tzone/lc.svg") format("svg"), /* Legacy iOS */
    url("https://sharadcodes.github.io/fonts/tzone/lc.ttf") format("truetype"), /* Safari, Android, iOS */
    url("https://sharadcodes.github.io/fonts/tzone/lc.woff") format("woff"), /* Modern Browsers */
    url("https://sharadcodes.github.io/fonts/tzone/lc.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Alien Encounters";
  src: url("https://sharadcodes.github.io/fonts/tzone/ae.eot"); /* IE9 Compat Modes */
  src: url("https://sharadcodes.github.io/fonts/tzone/ae.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://sharadcodes.github.io/fonts/tzone/ae.otf") format("opentype"), /* Open Type Font */
    url("https://sharadcodes.github.io/fonts/tzone/ae.svg") format("svg"), /* Legacy iOS */
    url("https://sharadcodes.github.io/fonts/tzone/ae.ttf") format("truetype"), /* Safari, Android, iOS */
    url("https://sharadcodes.github.io/fonts/tzone/ae.woff") format("woff"), /* Modern Browsers */
    url("https://sharadcodes.github.io/fonts/tzone/ae.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}



*{
  padding: 0;
  margin: 0;
}

body{
  background: #383838;
  color: rgb(230, 230, 230);
  font-family: "IBM 3270 Narrow";
  font-size: 18px;
}

body h1,h2,h3,h4,h5 {
  color: yellow;
}

.top{
  font-size: 2em;
}
#tagline{
  font-size: 30px!important;
}

.header{
  font-family: "Algol"!important;
  font-size: 6rem;
}

body a{
  color: yellow;
  text-decoration: none;
}

body img{
  margin-top: 5%;
  margin-bottom: 5%;
  max-width: 100%;
}

.active{
  /*background-color: rgb(230, 230, 230);*/
  background-color: yellow!important;
  border-color: yellow!important;
  color: #383838!important;
}

.navigation{
  font-size: 25px;
  text-align: right;
  margin: 5% 15% 0% 15%;
  font-family: "Lazenby Computer";
}

.navigation a{
  padding: 4px;
  border: solid 2px rgb(230, 230, 230);
  border-radius: 5px;
  color: rgb(230, 230, 230);
  text-decoration: none;
}

.navigation a:hover{
  border: solid 2px cyan;
  background-color: cyan;
  color: #383838;
  transition-duration: .25s;
}

.hero{
  margin: 2% 15% 2% 15%;
  font-size: 3rem;
  font-family: "Alien Encounters";
}

.jumbo{
  margin: 2% 15% 2% 15%;
}

.foot{
  text-align: center;
  margin: 5% 15% 5% 15%;
}

#events{
  font-size:5rem;
  color: cyan;
}

#enquiry{
  font-size:5rem;
  color: cyan;
}

#poster{
  font-size:5rem;
  color: cyan;
}

.top{
  color: cyan;
}

#tagline{
  color: cyan;
}




#tagline, #enquiry, #poster, #events{
  border-bottom: .05em dotted;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}



@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .jumbo{
    margin: 2% 10% 2% 10%;
  }

  .foot{
    margin: 2% 10% 2% 10%;
    font-size: .6em;
  }

  .hero{
    margin: 2% 10% 2% 10%;
    font-size: 2rem;
  }

  .navigation{
    text-align: left!important;
    margin: 8% 10% 8% 10%;
    font-size: 18px;
  }

  .top{
    font-size:55px!important;
  }

  #tagline{
    font-size: .4em!important;
  }

  #events{
    font-size:3rem;
  }

  #enquiry{
    font-size:2rem!important;
  }

  #poster{
    font-size:3rem;
  }

  .jumbo ul{
    font-weight: bold;
    font-size: .9rem;
  }

  .row{
    display: block!important;
  }
  .column {
    padding: 20%!important;
    flex: 100%;
    font-size: 1em!important;
  }

  .reg_button{
    font-size: 1rem!important;
  }

}

.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  background:rgba(0,0,0,0.4);
  margin: 2%;
  font-size: 2em;
  font-family: "Lazenby Computer";
  padding: 10%;
  border: 2px cyan solid;
  border-radius: 5px;
}

.column:hover{
  background-color: cyan;
  color: black;
  transition-duration: .5s;
  cursor: pointer;
}


.reg_button{
  font-size: 2rem;
  padding: 4px;
  border: solid 2px yellow;
  border-radius: 5px;
  color: yellow;
  text-decoration: none;
}

.reg_button:hover{
  border: solid 2px yellow;
  background-color: yellow;
  color: #383838;
  transition-duration: .25s;
}