@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');
body,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   
}


:root {
    --primary-color : #990F02;
    --header-shade: #AA0000;
    --secondary-color : #00BFFF;
    --accent-colour : #FFC72C;
    --text-color: #F9F6EE;
    --general-font : 'Nunito sans', 'sans-serif';
    --red-shade-mobile : #e3243b;
    --red-shade-desktop : #d0312d; 
    --yellow-shade-mobile: #d8b863;
    --yellow-shade-desktop: #d6b85a;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: none; 
        text-size-adjust: none; 
    }
}

/* Device query */

/* mobile query */
@media screen and (max-width: 999px) {
    .header {
        background-color: var(--primary-color);
        color: var(--text-color);
        padding: 4px 0 8px 25px;
        height: 50px;  
    }

    .header h3{
        text-align: center;
        font-family: var(--general-font);
    }

    .main-div{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        background-color: var(--header-shade);
        color: var(--text-color);
    }

    .domain{
        font-style: italic;
        font-size: 25px;
        font-family: var(--general-font);
    }

    .left-space{
        padding: 0 35px 0 35px;
    }

    .left-space h4{
        font-size: 20px;
        font-family: var(--general-font);
    }
    
    .left-space p {
        font-family: var(--general-font);
        line-height: 20px;
        font-weight: bolder;
    }
    
    .right-space{
        text-align: center;
        padding: 10px 30px 10px 30px;
    }

    .right-space h4{
        font-family: var(--general-font);
        font-size: large;
    }
    
    .right-space h5{
        font-family: var(--general-font);
    }

    .link-element {
        text-decoration: none; 
        color: var(--text-color);  
    }
    
    .link-element span{
        margin-right: 4px;
        font-size: 20px;
        font-family: var(--general-font);
        background: var(--primary-color);
        padding: 2px 2px 2px 4px;
        color: var(--secondary-color);
        border-radius: 2px;

    }

    
    .get-price{
        padding: 2px;
        background-color: var(--red-shade-mobile);
        color: var(--text-color);
        text-align: center;
        width: auto;
    }

    .get-price h3{
        font-family: var(--general-font);
        font-size: small;
    }

    .form-div{
        margin: 0 0 0 40px;
        width: auto;
    }

    .names-input input{
        padding: 5px;
        font-size: larger;
        font-weight: bold;
        font-family: var(--general-font);
        margin: 10px 0 10px 0;
        outline: none;
        width: inherit;

    }

    #input-item{
        display: block;
        padding: 5px;
        font-size: larger;
        font-weight: bold;
        font-family: var(--general-font);
        margin: 10px 0 10px 0;
        outline: none;
        width: inherit;
    }

    #submit-button{
        width: 200px;
        padding: 10px;
        font-weight: 100;
        margin: 10px 0 0 0;
        background-color: var(--red-shade-desktop);
        color: var(--text-color);
        border: none;
        border-radius: 2px;
        font-family: var(--general-font);

    }

    #submit-button:hover{
        background-color: var(--header-shade);
    }


    footer {
        display: flex;
        justify-content: space-around;
        background-color: var(--yellow-shade-mobile);
        color: var(--general-font);
        padding: 4px;
        margin: 15px 0 0 0;
    }

    footer a{
        text-decoration: none;
        color: var(--text-color);
        font-size: smaller;
    }
    

}










  /* Desktop */

  @media screen and (min-width: 1000px) {

    .header{
        background-color: var(--primary-color);
        color: var(--text-color);
        padding: 4px 0 8px 25px;
        height: 50px;
    }
    
    .header h3{
        font-size: medium;
    }
    
    .header h3{
        font-family: var(--general-font);
        font-size: large;
    }
    
    .main-div{
        display: flex;
        justify-content: space-around;
        background-color: var(--header-shade);
        color: var(--text-color);
        padding: 20px 0 20px 0;
    }
    
    .left-space{
        max-width: 30%;
    }
    
    .left-space h3{
        font-style: italic;
        font-size: 35px;
        font-family: var(--general-font);
    }
    
    .left-space h4{
        font-size: 25px;
        font-family: var(--general-font);
    }
    
    .left-space p {
        font-family: var(--general-font);
        line-height: 20px;
    }
    
    
    .right-space h4{
        font-family: var(--general-font);
        font-size: large;
    }
    
    .right-space h5{
        font-family: var(--general-font);
    }
    
    .link-element {
        text-decoration: none; 
        color: var(--text-color);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .link-element span{
        margin-right: 4px;
        font-size: 20px;
        background: var(--primary-color);
        padding: 2px 2px 2px 4px;
        color: var(--secondary-color);
        border-radius: 2px;

    }
    
    .link-element:hover{
        color: var(--yellow-shade-desktop);
        text-decoration: none;
    }

    .get-price{
        padding: 2px;
        background-color: var(--red-shade-desktop);
        color: var(--text-color);
        text-align: center;
        margin-bottom: 20px;
    }

    .get-price h3{
        font-family: var(--general-font);
        font-size: large;
    }

    .form-div{
        margin: auto;
        width: 50%;
    }

    .names-input input{
        padding: 5px;
        font-size: larger;
        font-weight: bold;
        font-family: var(--general-font);
        margin: 15px;
        outline: none;
        width: 249px;

    }

    #input-item{
        display: block;
        padding: 5px;
        font-size: larger;
        font-weight: bold;
        font-family: var(--general-font);
        margin: 15px;
        outline: none;
        width: 80%;
    }

    #submit-button{
        width: 200px;
        padding: 10px;
        font-weight: 100;
        margin: 10px;
        background-color: var(--red-shade-desktop);
        color: var(--text-color);
        border: none;
        border-radius: 2px;
        font-family: var(--general-font);

    }

    #submit-button:hover{
        background-color: var(--header-shade);
    }


    footer {
        display: flex;
        justify-content: space-around;
        background-color: var(--yellow-shade-desktop);
        color: var(--general-font);
        padding: 4px;
        margin: 15px 0 0 0;
    }

    footer a{
        text-decoration: none;
        color: var(--text-color);
        font-size: smaller;
        font-family: var(--general-font);
    }

    
  }