@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Montserrat:wght@300&family=Playfair+Display&display=swap');
:root {
    --black: #010101;
    /* vermilion rgba(227,31,24,1)*/
    --vermilion: #E31f18;
    /* spanish-gray rgba(145,145,145,1) */
    --spanish-gray: #919191;
    /* pale-silver rgba(210,201,199) */
    --pale-silver: #D2C9C7;
    --space-cadet: #2e2c56;
    --xiketic: #1B0F1B;
    --grey: #5B5959;
    /* imperial-red: rgb(239, 54, 61) */
    --imperial-red: #EF363D;
    /*
    *font
    */
    --comfortaa: 'Comfortaa', cursive;
    --montserrat: 'Montserrat', sans-serif;
    --raleway: 'Raleway', sans-serif;
    --barlow: 'Barlow', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--comfortaa);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: var(--black);
}

p {
    font-weight: 600;
}

.hero-area .scroll-down {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 5;
}

.hero-area .scroll-down img {
    height: 120px;
    cursor: pointer;
    border-radius: 50%;
    border: #ffffff solid 2px;
    border: 2px solid var(--vermilion);
}


/*******************
*
*
* Responsive CSS
*
*
********************/


/********************
* 
* Mobile devices 
*
*********************/

@media only screen and (min-width:320px) and (max-width:480px) {}


/********************
* 
* Ipads, tablets 
*
*********************/

@media only screen and (min-width:481px) and (max-width:768px) {}


/********************
* 
* small screens, laptops 
*
*********************/

@media only screen and (min-width:769px) and (max-width:1024px) {}


/********************
* 
* desktop, large screens 
*
*********************/

@media only screen and (min-width:1025px) and (max-width:1200px) {}


/********************
* 
* extra large screens, tv 
*
*********************/

@media only screen and (min-width:1200px) {}