@font-face
{
   font-family: "logo_font";
   src: url("/fonts/Orbitron.ttf") format("truetype");
}
@font-face
{
   font-family: "heading_font";
   src: url("/fonts/BrunoAce-Regular.ttf") format("truetype");
}
@font-face
{
   font-family: "nav_font";
   src: url("/fonts/Orbitron.ttf") format("truetype");
}
@font-face
{
   font-family: "main_font";
   src: url("/fonts/Michroma-Regular.ttf") format("truetype");
}



:root
{
   --colour_white:  #FFFFFF; 
   --colour_black:  #000000;
   --colour_purple: #7700DD;
   --colour_cyber_blue: #1199FF;
   --colour_cyber_purple: #9955FF;
}





BODY
{
   font-family: "main_font", sans-serif;
   text-decoration: none;
   font-size: 20px;
   background: #000000;
   padding: 0;
   margin: 0;
}


TABLE
{
   border-collapse: collapse;
   border-spacing: 0;
   border: 0;
   padding: 0;
   margin: 0;
}


P, LI
{
   font-family: "main_font", sans-serif;
   text-decoration: none;
   font-size: 14px;
   line-height: 1.75em;
   color: #99BBCC;
   padding: 0 10px;
   text-align: justify;
}
P STRONG, LI STRONG
{
   font-weight: bold;
   color: #CCEEFF;
}

A
{
   text-decoration: none;
   color: inherit;
}


P A
{
   text-decoration: none;
   /*outline: none;*/
   padding: 0;
   margin: 0;
   color: var(--colour_cyber_blue);
   position: relative;
   transition: all 0.2s ease-in-out;
}
P A:hover
{
   color: #EEEEEE;
}
P A::before
{
   content: '';
   /* background-image: linear-gradient(#4F2A6C, #777777); */
   background-color: #4F2A6C;
   position: absolute;
   left: -2px;
   bottom: 0;
   width: 100%;
   height: 2px;
   z-index: -1;
   transition: all 0.2s ease-in-out;
   padding: 0 2px;
}

P A:hover::before
{
   bottom: 0;
   height: 100%;
}





HEADER
{
   background-image: linear-gradient(#000000, #220055);
   width: 100%;
   font-family: "main_font", sans-serif;
   padding: 0;
   margin: 0;
   top: 0;
   z-index: 10;
}
@media screen and (min-width: 1000px)
{
   HEADER
   {
      position: sticky;
   }
}

.header
{
   padding: 0;
   width: 100%;
   text-align: center;

   margin: 0 auto;
}


.header_title
{
   display: inline-block;
   padding: 30px 0;
   text-align: center;
   font-family: "logo_font", sans-serif;
   line-height: 20px;
   font-size: 30px;
   white-space: nowrap;
   filter: drop-shadow(2px 2px #000000);
}

.logo_image
{
   vertical-align: middle;

   animation-duration: 30s;
   animation-name: logo_rotate;
   animation-iteration-count: infinite;
   animation-direction: normal;

   margin: 0 0 10px 0;
}

.logo_digital,
.logo_cyber,
.logo_security
{
   font-family: "logo_font", sans-serif;
   font-size: 24px;
   font-weight: bold;
   color: #FFFFFF;
   vertical-align: middle;
}
.logo_cyber
{
   color: var(--colour_purple);
   font-size: 40px;
   line-height: 40px;
}
@keyframes logo_rotate
{
   0%
   {
      -webkit-transform: rotateY(0deg);
              transform: rotateY(0deg);
   }
   90%
   {
      -webkit-transform: rotateY(0deg);
              transform: rotateY(0deg);
   }
   100%
   {
      -webkit-transform: rotateY(360deg);
              transform: rotateY(360deg);
   }
}



/*
@media screen and (max-width: 1100px)
{
   .logo_image{ height: 70px; }

   .logo_digital,
   .logo_security
   {
      font-size: 20px;
   }
   .logo_cyber
   {
      font-size: 40px;
   }
}
@media screen and (max-width: 500px)
{
   .logo_image{ height: 50px; }

   .logo_digital,
   .logo_security
   {
      font-size: 14px;
   }
   .logo_cyber
   {
      font-size: 22px;
   }
}
*/








.nav_block
{
   border-top: var(--colour_cyber_blue) 1px solid;   
}



.nav_item
{
   background: #000000;
   font-family: "nav_font", sans-serif;
   font-weight: bold;
   font-size: 24px;
   color: var(--colour_cyber_blue);
   text-align: center;
   padding: 30px 0;
   border-bottom: var(--colour_cyber_blue) 1px solid;
}















FOOTER
{
   background-color: #000000;
   width: 100%;
   font-family: "main_font", sans-serif;
   color: #FFFFFF;
   padding: 0;
   margin: 0;
}



.footer2
{
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   padding: 20px 0;

   font-family: "main_font", sans-serif;
   font-size: 12px;
   color: #555555;
}
.footer2_text
{
   display: block;
   padding: 5px 10px;
   margin: auto 0;
   text-align: center;
}






















H1, H2, H3, H4, H5
{
   font-family: "heading_font", sans-serif;
   color: var(--colour_cyber_blue);
   padding: 0 10px;
   margin: 0 auto;

   max-width: 100%;
}

H1
{
   font-weight: bold;
   font-size: 40px;
   line-height: 50px;
}
.h1_sub
{
   font-weight: normal;
   font-size: 24px;
   line-height: 24px;
   text-transform: uppercase;
}
H2
{
   font-weight: normal;
   font-size: 24px;
   line-height: 34px;
}
H3
{
   font-weight: normal;
   font-size: 20px;
   line-height: 30px;
}
H4
{
   font-weight: normal;
   font-size: 16px;
   line-height: 26px;
}
/*
   H5 = Special
   H6 = Footer
*/
H5
{
   font-weight: normal;
   font-size: 30px;
   line-height: 40px;
   text-transform: uppercase;
}