@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --tf-light: #fff;
    --tf-dark: #666;
    --tf-primary: #008DD2;
    --tf-warning: #d20000;
    --tf-light-bg: rgba(239,239,239, .3);
    --tf-lighter: #D9D9D9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

.tf_hidden {
    display: none !important;
}

body {
    width: 100%;
    height: 100vh;
    background-color: var(--tf-light-bg);
}

#TRACKING_FORM {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0rem auto;
    width: 100%;
    max-width: 800px;
    height: 100%;
    padding: 2.5rem;
    position: relative;
}

#TRACKING_FORM h3 {
    text-transform: uppercase;
    text-align: center;
    color: var(--tf-primary);
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 3rem;
}
#TRACKING_FORM button, #TRACKING_FORM a {
    text-decoration: none;
    outline: 0;
    border: 0;
    color: var(--tf-light);
    padding: .5rem 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--tf-primary);
    cursor: pointer;
}
#TRACKING_FORM button:hover, #TRACKING_FORM a:hover {
    opacity: .9;
}
#TRACKING_FORM button:active, #TRACKING_FORM a:active {
    opacity: .8;
}

/* 
<div id="TF_FORM">
    <h3>Track your order</h3>
    <div class="tf_form_group">
        <p>order id</p>
        <input type="number" id="TF_INPUT_ORDER_ID">
    </div>
    <div class="tf_form_group">
        <p>email</p>
        <input type="email" id="TF_INPUT_EMAIL">
    </div>
    <button id="TF_SUBMIT">Submit</button>
</div>
*/
#TF_FORM {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#TF_FORM_ERROR {
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--tf-warning);
}
.tf_form_group {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-bottom: 1.5rem;
}
.tf_form_group p {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--tf-dark);
    font-size: 1rem;
}
.tf_form_group input {
    margin-top: .5rem;
    border: 1px solid var(--tf-lighter);
    outline: 0;
    padding: .5rem;
    font-size: 1rem;
    color: var(--tf-dark);
    transition: .3s;
}
.tf_form_group input:focus {
    border-color: var(--tf-dark);
}
#TF_FORM button {
    width: 8rem;
    margin-left: auto;
    margin-top: 2rem;
}
/* 
<div id="TF_FAIL" class="">
    <h3>Tracking Failed</h3>
    <p id="TF_ERROR">Order #<span class="tf_blue">2567</span> does not appear on our system under the email <span class="tf_blue">hellokitty@yahoo.com</span></p>
    <div class="tf_button_group">
        <button id="TF_CTA_ANOTHER">Track Another</button>
        <a href="#">Contact Support</a>
    </div>
</div>
*/
#TF_ERROR {
    margin-bottom: 3rem;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--tf-dark);
}
.tf_blue {
    color: var(--tf-primary);
    font-weight: bold !important;
}
.tf_button_group {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.tf_button_group * {
    margin: 0 4px;
}
.tf_button_group *:last-child {
    background-color: var(--tf-dark) !important;
}
/* 
<div id="TF_DETAILS" class="">
    <div class="tf_countdown_group">
        <div class="tf_countdown_component">
            <h1 id="TF_CD_DAYS">30</h1>
            <p>days</p>
        </div>
        <div class="tf_countdown_component">
            <h1 id="TF_CD_HOURS">10</h1>
            <p>hours</p>
        </div>
        <div class="tf_countdown_component">
            <h1 id="TF_CD_MINUTES">05</h1>
            <p>minutes</p>
        </div>
    </div>
    <hr>
    <p>Order #<span id="TF_ORDER_ID" class="tf_blue">2567</span> will be complete on <br><span id="TF_COMPLETE_DATE" class="tf_blue">Thurs 20th March 5pm</span></p>
    <p><strong>Order Details:</strong><br><span id="TF_ORDER_DETAILS">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum facere vero, enim quod explicabo odio.<span></p>
    <p>Current Status:<br><span id="TF_STATUS">Awaiting Printing</span></p>
    <button id="TF_CTA_ANOTHER">Track Another</button>
</div>
*/
#TF_DETAILS {
    display: grid;
    grid-template-rows: repeat(5, auto);
    row-gap: 3rem;
    width: 100%;
}
#TF_DETAILS button {
    width: 12rem;
    margin-left: auto;
}
#TF_DETAILS h3 {
    margin: 0;
}
#TF_DETAILS p {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--tf-dark);
    font-size: 1.1rem;
}
#TF_DETAILS p span {
    font-weight: 400;
}
.tf_countdown_group {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--tf-dark);
}
.tf_countdown_component {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-left: 2rem;
}
.tf_countdown_component h1 {
    font-size: 4rem;
}
.tf_countdown_component p {
    margin-left: .5rem;
    font-weight: 400 !important;
}
/* 
<div id="TF_SEARCHING">
    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"/></svg>
</div>
*/
#TF_SEARCHING svg {
    fill: var(--tf-primary);
    position: absolute;
    animation: moveMagnifyingGlass 6s infinite;
    left: 50%;
    top: 50%;
}
#TF_SEARCHING p {
    color: var(--tf-dark);
    text-transform: uppercase;
}
@keyframes moveMagnifyingGlass {
    0% { transform: translate(-20px, -20px); } /* Starting position */
    25% { transform: translate(20px, -20px); } /* Move right */
    50% { transform: translate(20px, 20px); } /* Move down */
    75% { transform: translate(-20px, 20px); } /* Move left */
    100% { transform: translate(-20px, -20px); } /* Move up, back to starting position */
}

@media only screen and (max-width: 600px) {
    .tf_countdown_component h1 {
        font-size: 3rem;
    }
    .tf_countdown_group {
        justify-content: space-between;
    }
    .tf_countdown_component {
        margin-left: 0;
    }
}
@media only screen and (max-width: 500px) {
    .tf_countdown_component h1 {
        font-size: 2.5rem;
    }
    .tf_button_group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 4px;
    }
    .tf_button_group * {
        margin: 0;
    }
}