@font-face {
    font-family: Hack;
    src: url('../htd-fonts/Hack-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Hack;
    src: url('../htd-fonts/Hack-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Hack;
    src: url('../htd-fonts/Hack-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: Hack;
    src: url('../htd-fonts/Hack-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: Sephora;
    src: url('../htd-fonts/Sephora.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Sephora;
    src: url('../htd-fonts/Sephora-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Sephora;
    src: url('../htd-fonts/Sephora-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

:root {
    /*
    * COLOURS
    */
    --background-color: #071404;
    /* rgb(7, 20, 4)#0c2207 */
    --navbar-background: #0c2207;
    --navbar-hover-background: #12330a;
    --text-white: #edf4ed;
    /* rgb(237, 244, 237) */
    --text-green: #5ec12d;
    /* rgb(94, 193, 45) */
    --text-light-green: #7dde4e;
    /* rgb(125, 222, 78) */
    --text-orange: #d9793a;
    /* rgb(217, 121, 58) */
    --text-light-orange: #f28841;
    --text-red: #C22E2D;
    /* rgb(194, 46, 45) */
    --text-grey: #4D4C4D;
    /* rgb(77, 76, 77) */
    --text-light-gray: #7c797c;
    --neon-background-color: #1c4811;
    /* rgb(28, 72, 17) #472711, #995325*/
    --neon-orange-background-colour: #663718;
    --card-icon-background-color: #11300A;
    /* rgb(17, 48, 10) */
    --card-hover-background-color: #0f3007;
    /* rgb(15, 48, 7) */
    --text-black: #000000;
    /*
    * MEASUREMENTS
    */
    --dashboard-border-thickness: 1px;
    /*
    * CURSORS
    */
    --normal-cursor: url('../img/icons/small/cursor.png'), auto;
    --pointer-cursor: url('../img/icons/small/pointer.png'), auto;
    --text-cursor: url('../img/icons/small/text-editor.png'), auto;

    --main-font: Hack, 'Courier New', monospace;
    --hacker-bytes-font: Sephora, Hack, 'Courier New', monospace;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    font-family: var(--main-font);
}

.copy-dash {
    content: "\2014";
    font-size: 1.2em;
}

html {
    box-sizing: border-box;
    font-size: 100%;
    cursor: var(--normal-cursor);
}

body {
    margin: 0;
    padding: 0;
    background: var(--background-color);
    background: linear-gradient(90deg, rgba(7, 20, 4, 1) 0%, rgba(12, 34, 7, 1) 35%, rgba(18, 51, 10, 1) 100%);
    color: var(--text-white);
}

.page-container {
    margin: 2% 2% 2% 2%;
}

.landing-page-container {
    margin: 8.2% 5% 2% 5%;
}

.headline {
    color: var(--text-orange);
    font-size: 3.0em;
}

.supporting-copy {
    font-size: 1.3em;
}

/* scrollbar width */
::-webkit-scrollbar {
    height: 7.5px;
    width: 7.5px;
}

/* scrollbar track (container) colour */
::-webkit-scrollbar-track {
    background-color: rgba(18, 51, 10, 1);
}

::-webkit-scrollbar-track:hover {
    background: var(--background-color);
}

/* the thumb the user moves */
::-webkit-scrollbar-thumb {
    width: 5px;
    background: var(--text-grey);
}

::-webkit-scrollbar-thumb:hover {
    width: 7.5px;
    background: var(--text-light-gray);
}

.two-column-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
        flex-direction: column;
    }

    .two-column-grid__column {
        flex: 50%;

        @media (max-width: 768px) {
            margin-bottom: 5%;
        }

        .normal-column-image {
            width: 70%;
            border-radius: 2%;
        }

        .small-column-image {
            width: 60%;
            border-radius: 2%;
        }

        .medium-column-image {
            width: 80%;
            border-radius: 2%;
        }
    }

    .two-column-grid__column--center-aligned {
        flex: 50%;

        @media (max-width: 768px) {
            margin-bottom: 5%;
        }

        .normal-column-image {
            width: 70%;
            border-radius: 2%;
        }

        .small-column-image {
            width: 60%;
            border-radius: 2%;
        }

        .medium-column-image {
            width: 80%;
            border-radius: 2%;
        }

        text-align: center;
    }

    .centre-grid-image {
        text-align: center;
    }
}

.countdown-squares {
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown-container {
    margin-top: 5%;
    background-color: transparent;
    box-sizing: border-box;
    animation: fadeIn 1s ease-out;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0.75rem;
    /* Spacing between items */
    min-width: 100px;
    /* Ensure consistent width for the square */
    height: 100px;
    background-color: transparent;
    background: var(--neon-background-color);
    border: 2px solid var(--text-green);
    color: var(--text-green);
    box-shadow: 0px 0px 10px var(--neon-background-color);
    /* Subtle shadow for squares */
    transition: transform 0.2s ease-in-out;
    /* Smooth hover effect */
    aspect-ratio: 1/1;
    /* Ensure perfect square aspect ratio */
}

.countdown-item:hover {
    transform: translateY(-5px);
    /* Lift effect on hover */
}

.countdown-value {
    font-size: 3.5rem;
    /* Larger numbers */
    font-weight: 700;
    color: #1a202c;
    /* Dark text */
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow: 0px 0px 2px var(--text-green);
    /* Gradient background for numbers */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.countdown-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-green);
    text-shadow: 0px 0px 2px var(--text-green);
    letter-spacing: 0.05em;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .countdown-container {
        padding: 1.5rem;
    }

    .countdown-item {
        min-width: 70px;
        /* Smaller squares on small screens */
        height: 70px;
        margin: 0 0.4rem;
        border-radius: 0.5rem;
    }

    .countdown-value {
        font-size: 2.2rem;
        /* Smaller numbers on small screens */
    }

    .countdown-label {
        font-size: 0.75rem;
    }

    .title {
        font-size: 1.75rem;
    }

    .message {
        font-size: 1.2rem;
    }
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

.float-animation {
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
}

.single-form-element {
   .form-group {
       padding-top: 0.75rem;
       padding-bottom: 0.75rem;
   }

   .status-message-small {
       margin-top: .5rem;
       margin-bottom: 0;
       display: flex;
       color: var(--text-orange);
       text-shadow: 0px 0px 10px var(--text-orange);
       font-size: 0.8rem;
   }

   .status-message-small--success {
       color: var(--text-green);
   }
  
   input {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       font-size: 1.25rem;
       background-color: transparent;
       border: 2px solid var(--text-green);
       display: block;
       padding: 0;
       margin: 0;
       box-sizing: border-box;
       border-radius: 0;
       width: 100%;
       padding: 0.5rem 0.75rem;

       @media (max-width: 768px) {
           font-size: 1rem;
       }
   }

   input {
       border: 1px solid var(--text-green);
       margin-top: .5rem;
       padding: .5rem;
       color: var(--text-green);
       box-shadow: 0px 0px 5px var(--text-green);
   }

   input::placeholder {
       color: var(--text-green);
       font-style: italic;
   }

   input:hover {
       cursor: var(--text-cursor);
   }

   input[type="date"] {
       color: var(--text-green);
       font-size: 18px;
       outline: none;
       border: 1px solid var(--text-green);
       cursor: var(--pointer-cursor);
   }

   ::-webkit-calendar-picker-indicator {
       background-color: var(--text-green);
       padding: 5px;
       cursor: var(--pointer-cursor);
       border-radius: 3px;
   }

   ::-webkit-calendar-picker-indicator:hover {
       background-color: var(--text-white);
   }
}

.form-container {
   font-family: Hack;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

   form {
       color: #5ec12d;
       display: flex;
       flex-direction: column;
       max-width: 100%;
   }

   fieldset,
   input,
   legend,
   select,
   textarea {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       font-size: 1.25rem;
       background-color: transparent;
       border: 2px solid var(--text-green);
       display: block;
       padding: 0;
       margin: 0;
       box-sizing: border-box;
       border-radius: 0;
       width: 100%;
       padding: 0.5rem 0.75rem;

       @media (max-width: 768px) {
           font-size: 1rem;
       }
   }

   .form-red-border {
       border: 2px solid var(--text-red);
   }

   .form-heading--centred {
       text-align: center;
   }

   .paragraph--centred {
       text-align: center;
   }

   .standard-select {
       position: relative;
   }

   select {
       border-radius: 0.25rem;
       cursor: var(--pointer-cursor);
       color: var(--text-green);
       box-shadow: 0px 0px 5px var(--text-green);
   }

   select:hover {
       background-color: var(--text-white);
   }

   .standard-select::before,
   .standard-select::after {
       --select-border-size: 0.3rem;
       position: absolute;
       content: "";
       right: 1rem;
       pointer-events: none;
   }

   .standard-select::before {
       border-left: var(--select-border-size) solid transparent;
       border-right: var(--select-border-size) solid transparent;
       border-bottom: var(--select-border-size) solid var(--text-green);
       top: 40%;
   }

   .standard-select::after {
       border-left: var(--select-border-size) solid transparent;
       border-right: var(--select-border-size) solid transparent;
       border-top: var(--select-border-size) solid var(--text-green);
       top: 55%;
   }

   input {
       border: 1px solid var(--text-green);
       margin-top: .5rem;
       padding: .5rem;
       color: var(--text-green);
       box-shadow: 0px 0px 5px var(--text-green);
   }

   input::placeholder {
       color: var(--text-green);
       font-style: italic;
   }

   input:hover {
       cursor: var(--text-cursor);
   }

   input[type="date"] {
       color: var(--text-green);
       font-size: 18px;
       outline: none;
       border: 1px solid var(--text-green);
       cursor: var(--pointer-cursor);
   }

   ::-webkit-calendar-picker-indicator {
       background-color: var(--text-green);
       padding: 5px;
       cursor: var(--pointer-cursor);
       border-radius: 3px;
   }

   ::-webkit-calendar-picker-indicator:hover {
       background-color: var(--text-white);
   }

   .toggle {
       position: relative;
       display: inline-block;
       width: 60px;
       height: 34px;
   }

   .toggle input {
       opacity: 0;
       width: 0;
       height: 0;
   }

   .slider {
       position: absolute;
       cursor: var(--pointer-cursor);
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: var(--text-grey);
       -webkit-transition: .4s;
       transition: .4s;
       border: 1px solid var(--text-grey);
   }

   .slider:before {
       position: absolute;
       content: "";
       height: 26px;
       width: 26px;
       left: 4px;
       bottom: 4px;
       background-color: var(--text-white);
       -webkit-transition: .4s;
       transition: .4s;
   }

   .toggle input:checked+.slider {
       background-color: var(--text-green);
   }

   .toggle input:focus+.slider {
       box-shadow: 0 0 1px var(--text-green);
   }

   .toggle input:checked+.slider:before {
       -webkit-transform: translateX(26px);
       -ms-transform: translateX(26px);
       transform: translateX(26px);
   }

   textarea {
       color: var(--text-green);
       cursor: var(--text-cursor);
   }

   textarea::placeholder {
       color: var(--text-green);
       font-style: italic;
   }

   .form-content-constant {
       font-style: italic;
       text-shadow: 0px 0px 10px var(--text-green);
   }

   label {
       margin-bottom: 0.5rem;
       display: flex;
       text-shadow: 0px 0px 10px var(--text-green);
       cursor: var(--normal-cursor);
   }

   small {
       margin-bottom: 0.5rem;
       display: flex;
       text-shadow: 0px 0px 10px var(--text-green);
       font-size: 0.8rem;
   }

   .status-message-small {
       margin-top: .5rem;
       margin-bottom: 0;
       display: flex;
       color: var(--text-orange);
       text-shadow: 0px 0px 10px var(--text-orange);
       font-size: 0.8rem;
   }

   .status-message-small--success {
       color: var(--text-green);
   }

   .green-quote {
       color: var(--text-green);
       font-style: italic;
   }

   fieldset {
       cursor: var(--pointer-cursor);
   }

   .form-checkmark {
       display: block;
       position: relative;
       padding-left: 35px;
       margin-bottom: 12px;
       cursor: var(--pointer-cursor);
       font-size: 22px;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
   }

   .form-checkmark input {
       position: absolute;
       opacity: 0;
       cursor: var(--pointer-cursor);
       height: 0;
       width: 0;
   }

   .checkmark {
       position: absolute;
       top: 0;
       left: 0;
       height: 25px;
       width: 25px;
       background-color: var(--text-black);
       border: 3px solid #5ec12d;
   }

   /* On mouse-over, add a grey background color */
   .form-checkmark:hover input~.checkmark {
       background-color: #1c4811;
   }

   /* When the checkbox is checked, add a blue background */
   .form-checkmark input:checked~.checkmark {
       background-color: #5ec12d;
   }

   /* Create the checkmark/indicator (hidden when not checked) */
   .checkmark:after {
       content: "";
       position: absolute;
       display: none;
   }

   /* Show the checkmark when checked */
   .form-checkmark input:checked~.checkmark:after {
       display: block;
   }

   /* Style the checkmark/indicator */
   .form-checkmark .checkmark:after {
       left: 9px;
       top: 5px;
       width: 5px;
       height: 10px;
       border: solid var(--text-white);
       border-width: 0 3px 3px 0;
       -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       transform: rotate(45deg);
   }

   /* radio button styling */
   .radio-option {
       position: absolute;
       top: 0;
       left: 0;
       height: 25px;
       width: 25px;
       background-color: var(--text-black);
       border: 3px solid var(--text-green);
       border-radius: 50%;
   }

   /* On mouse-over, add a grey background color */
   .form-checkmark:hover input~.radio-option {
       background-color: #1c4811;
   }

   /* When the checkbox is checked, add a blue background */
   .form-checkmark input:checked~.radio-option {
       background-color: var(--text-green);
       border-color: var(--text-white);
   }

   /* Create the checkmark/indicator (hidden when not checked) */
   .checkmark:after {
       content: "";
       position: absolute;
       display: none;
   }

   /* Show the checkmark when checked */
   .form-checkmark input:checked~.radio-option:after {
       display: block;
   }

   /* Style the checkmark/indicator */
   .form-checkmark .radio-option:after {
       top: 9px;
       left: 9px;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--text-black);
   }

   .form-group-divider {
       margin-bottom: 2rem;
       height: 0.5px;
       border-width: 0;
       color: var(--text-green);
       background-color: var(--text-green);
   }

   .form-group {
       padding-top: 0.75rem;
       padding-bottom: 0.75rem;
   }

   .form-inline-group {
       padding-top: 0.75rem;
       padding-bottom: 0.75rem;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       gap: 0.75rem;
   }

   .form-group--extra-top {
       padding-top: 2rem;
       padding-bottom: 0.75rem;
   }

   .form-group__hidden {
       @extend .form-group;
       display: none;
   }
}

.form-container ::placeholder {
   color: #069e06;
}

.email-holder {
    width: 50%;
    margin-top: 2.5%;
    margin-left: 25%;
}

.button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   cursor: var(--pointer-cursor);
   font-size: 1.25rem;

   background-color: transparent;
   background: var(--neon-background-color);
   border: 2px solid var(--text-green);
   color: var(--text-green);
   display: block;
   margin: 0;
   box-sizing: border-box;
   border-radius: 0;
   width: 100%;
   padding: .5rem;
   text-shadow: 0px 0px 10px var(--text-green);
   box-shadow: 0px 0px 10px var(--neon-background-color);

   @media (max-width: 768px) {
       font-size: 1rem;
   }
}