@import url('../css/fonts.css');

/*-----------------------------------*\
 OVERFLOW Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as scrollLeft or the scrollTo() method), so the element is still a scroll container.
\*-----------------------------------*/
html,
body {

    margin: 0%;
    box-sizing: border-box;
   /* overflow-x: hidden; */
}




.content h1:hover {
    -webkit-text-stroke: 2px #fff;

    color: orange;
  }
  
  
  
  
  .content {
    text-align: center;
  }
  
  
  .content h1 {
    font-size: 50px;
    color: black;
    font-weight: 600;
  }
  
  
  
  
  
  .content a {
    text-decoration: none;
    display: inline-block;
    color: black;
    font-size: 24px;
    border: 2px solid #fff;
    padding: 14px 70px;
    border-radius: 50px;
    /*GO OVER */
    margin-top: 20px;
  }


:root {

    /*      Theme colors        */
    --text-gray: #3f4954;
    --text-light: #686666da;
    --bg-color: #0f0f0f;
    --white: #ffffff;
    --midnight: #104f55;

    /* gradient color   */
    --sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    --help: linear-gradient(315deg, #fce043 0%, #fb7ba2 74%);
    --explore: linear-gradient(315deg, #f6d327 0%, #de4daa 74%);

    /*      theme font-family   /*
    --Abel: 'Abel', cursive;
    --Anton: 'Anton', cursive;
    --Josefin: 'Josefin', cursive;
    --Lexend: 'Lexend', cursive;
    --Livvic: 'Livvic', cursive; */
}


/* ---------------- Global Classes ---------------*/

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

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

ul {
    list-style-type: none;
}

h1 {
    font-family: var(--Abel);
    font-size: 2.5rem;
}

h2 {
    font-family: var(--Abel);
}

h3 {
    font-family: var(--Abel);
    font-size: 1.3rem;
}

button.btn {
    border: none;
    border-radius: 2rem;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-family: var(--Livvic);
    cursor: pointer;
}

span {
    font-family: var(--Abel);
}

.container {
    margin: 0 5vw;
}

.text-gray {
    color: var(--text-gray);
}
/*-----------------------------------*\
specficy auto font famiy
\*-----------------------------------*/
p {
    font-family: var(--Abel);
    color: var(--text-light);
}

/* ------x------- Global Classes -------x-------*/

/* --------------- navbar ----------------- */


/* -------x------- navbar ---------x------- */


/* ----------------- Main Content----------- */

/* --------------- Site title ---------------- */


/* --------x------ Site title --------x------- */

/* --------------- Blog Carousel ------------ */







/* -------x------- Blog Carousel -----x------ */

/*-----------------------------------*\
  grid template usees set of precentages to contain site content
\*-----------------------------------*/

main .event-content {
    display: grid;
    grid-template-columns: 80% 20%;
}

main .content-edit {
    width: 100%;

}
/*-----------------------------------*\
  select the decendents, space between the title and info
\*-----------------------------------*/
main .event-content .content-edit>.post-image,
.post-content {
    padding: 1rem 2rem;
    position: relative;
}
/*-----------------------------------*\
  color and shape for the post info tab
\*-----------------------------------*/
main .event-content .content-edit>.post-image .event-date {
    background: var(--help);
    padding: 1rem;
    position: absolute;
    bottom: 0%;
    left: 20vw;
    border-radius: 6rem;
}

/*-----------------------------------*\
 OVERFLOW Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as scrollLeft or the scrollTo() method), so the element is still a scroll container.
 using this to allow to scroll with out messing with flow
\*-----------------------------------*/
main .event-content .content-edit>.post-image>div {
    overflow: hidden;
}

/*-----------------------------------*\
 calling the img tag to set up a hover effect and its width and scale it 
\*-----------------------------------*/
main .event-content .content-edit>.post-image .img {
    width: 100%;
    transition: all 1s ease;
}

/*-----------------------------------*\
 calling parents and actual blog image to hover zoom when holing over it
\*-----------------------------------*/
main .event-content .content-edit>.post-image .img:hover {
    transform: scale(1.2);
}


/*-----------------------------------*\
targets span and gives margin for space in the info tab 
\*-----------------------------------*/
main .event-content .content-edit>.post-image .event-date span {
    margin: 0 .5rem;
}

/*-----------------------------------*\
targets the actual titles and make the text larger 
\*-----------------------------------*/
main .content-edit .post-content a {
    font-family: var(--Anton);
    font-size: 1.5rem;
}

/*-----------------------------------*\
roomove border raidus in order to set up new botton at bottom 
\*-----------------------------------*/

.event-content .content-edit .post-content .post-btn {
    border-radius: 0;
    padding: .7rem 1.5rem;
    background: var(--explore);
}

.post-btn:hover {
    border: none;
    padding: 15px;
    border-radius: 15px;
    box-shadow: inset 0 0 8px #f9f8fc;
}

.event-content .pagination {
    justify-content: center;
    color: var(--text-gray);
    margin: 4rem 0;
}

.event-content .pagination a {
    padding: .6rem .9rem;
    border-radius: 2rem;
    margin: 0 .3rem;
    font-family: var(--Lexend);
}

.event-content .pagination .pages {
    background: var(--text-gray);
    color: var(--white);
}



/* ----------------- Footer --------------------- */


/* ---------x------- Footer ----------x---------- */

/*              Viewport less then or equal to 1130px            */

@media only screen and (max-width: 1130px) {
    .event-content .content-edit>.post-image .event-date {
        left: 2rem !important;
        bottom: 1.2rem !important;
        border-radius: 0% !important;
    }

    .event-content .sidebar .popular-post .event-date {
        display: none !important;
    }

     .container {
        grid-template-columns: repeat(2, 1fr);
    }

}

/*      x       Viewport less then or equal to 1130px    x     */


/*              Viewport less then or equal to 750px            */

@media only screen and (max-width: 750px) {



    main .event-content {
        grid-template-columns: 100%;
    }

    .container {
        grid-template-columns: repeat(1, 1fr);
    }

}


/*        x      Viewport less then or equal to 750px       x     */


/*              Viewport less then or equal to 520px            */

@media only screen and (max-width: 520px) {
    main .blog {
        height: 125vh;
    }

    .event-content .content-edit>.post-image .event-date {
        display: none;
    }

    

}