@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;1,400;1,600&display=swap');

*
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body
{
    margin: 40px auto;
    max-width: 1000px;
    background-color: #ADE792;
}
.main-div
{
    padding: 30px;
    background-color: #495579;
    border: 7px solid black;
}
/* .main-div::selection
{
    background: none;
} */
/* ::selection 
{
  color: red;
  background: yellow;
} */
.hello
{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F3ECB0;
    margin-bottom: 20px;
}
.item
{
    background-color: #6ECCAF;
    padding: 20px;
    font-size: 15px;
    font-family: 'Unbounded', cursive;
    font-weight: 500;
    margin: 15px;
}
.item-1
{
    order: 0;
    flex-grow: 1;
    text-align: center;
}
.item-2
{
    order: 4;
    flex-grow: 1.5;
    text-align: center;
}
.item-3
{
    order: 1;
    flex-grow: 1.5;
    text-align: center;
}
.item-4
{
    order: 2;
    flex-grow: 1.5;
    text-align: center;
}
.item-5
{
    order: 3;
    flex-grow: 1;
    text-align: center;
}
.main
{
    order: 5;
    text-decoration: none;
    color: inherit;
}
.sub-page
{
    order: 6;
    text-decoration: none;
    color: inherit;
}


/*      main heading    */

/* a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
} */
.heading-main
{
    text-align: center;
    font-family: 'Unbounded', cursive;
    font-weight: 700;
    font-style: normal;
    background-color: tomato;
    padding: 10px;
    line-height: 2;
    margin-bottom: 20px;

    border: 2px solid;
    box-shadow: 10px 11px 4px -3px rgba(0,0,0,0.62);
    -webkit-box-shadow: 10px 11px 4px -3px rgba(0,0,0,0.62);
    -moz-box-shadow: 10px 11px 4px -3px rgba(0,0,0,0.62);
}
.heading-main::selection
{
    color: yellow;
    background: none;
}
.heading-main2
{
    font-family: 'Unbounded', cursive;
    font-weight: 600;
    font-style: normal;
    padding: 10px;
    line-height: 2;
    margin-bottom: 20px;
}
.heading-main2::selection
{
    background: greenyellow;
}
.heading-main3
{
    font-family: 'Unbounded', cursive;
    font-weight: 500;
    font-style: normal;
    color: white;
    padding: 10px;
    line-height: 2;
}
.heading-main3::selection
{
    background: none;
}
p
{
    padding: 10px;
    font-family: 'Unbounded', cursive;
}


/*   css grid   */
.grid-container
{
    display: grid;
    background-color: white;
    padding: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
    border-radius: 15px;
    margin-bottom: 10px;
}
.g-item
{
    background-color: steelblue;
    margin: 10px;
    font-size: 30px;
    padding: 20px;
    line-height: 1.5;
}
.g-item:hover
{
    background-color: wheat;
}
.g-item1
{
    background-color: white;
    color: black;
    grid-row: 1/4;
    transition-duration: 2s;
    height: 200px;
    width: 200px;
    
    padding-top: 60px;
    align-self: center;
    justify-self: center;
    text-align: center;
    vertical-align: middle;
    font-family: 'Nunito Sans', sans-serif;
}
.g-item1:hover
{
    background-color: black;
    color: white;
    transition-duration: 500ms;
}
.g-item2
{
    background-color: crimson;
    grid-column: 2/4;
    transition-duration: 500ms;
}
.g-item3
{
    background-color: black;
    color: white;
    grid-column: 2/4;
    transition-duration: 1s;
}
.g-item4
{
    grid-row: 4/5;
    transition-duration: 500ms;
}
.g-item5
{
    background-color: red;
    grid-column: 2/4;
    grid-row: 2/4;
    transition-duration: 1s;
}
.g-item6
{
    grid-column: 1/3;
    background-color: darkgoldenrod;
}
.g-item8
{
    grid-column: 1/4;
}

/*paragraph*/
.no-marg
{
    margin-bottom: 0;
}
.para-text
{
    font-family: 'Nunito Sans', sans-serif;
    font-size: large;
    padding: 10px;
    font-weight: 600;
    color: whitesmoke;
    font-style: italic;
}
.para-text::selection
{
    color: black;
    background: none;
}

/* fonts */
.span
{
    background-color: red;
    color: black;
    padding: 0px;
    display: inline-block;
}
/* .span::selection
{
    background: greenyellow;
} */
.fonts_css
{
    padding: 20px;
}
.fonts_css p::selection
{
    background: orange;
}
.fonts_css::selection
{
    background: none;
}

/*  line heights using rem */
.span1
{
    line-height: 1rem;
}
.span1_5
{
    line-height: 1.5rem;
}
.span2
{
    line-height: 2rem;
}
.span2_5
{
    line-height: 2.5rem;
}
.span3
{
    line-height: 3rem;
}
.span3_5
{
    line-height: 3.5rem;
}
.span4
{
    line-height: 4rem;
}
.span4_5
{
    line-height: 4.5rem;
}

/*  line heights using px  */
.span_1
{
    line-height: 1px;
}
.span_3
{
    line-height: 3px;
}
.span_5
{
    line-height: 5px;
}
.span_7
{
    line-height: 7px;
}
.span_10
{
    line-height: 10px;
}
.span_12
{
    line-height: 12px;
}
.span_15
{
    line-height: 15px;
}
.span_20
{
    line-height: 20px;
}
.span_25
{
    line-height: 25px;
}
.span_30
{
    line-height: 30px;
}
.span_40
{
    line-height: 40px;
}
.span_50
{
    line-height: 50px;
}
.span_70
{
    line-height: 70px;
}
.span_100
{
    line-height: 100px;
}

/*  font size using rem  */
.chan1
{
    font-size: 1rem;
}
.chan1_25
{
    font-size: 1.25rem;
}
.chan1_5
{
    font-size: 1.5rem;
}
.chan1_75
{
    font-size: 1.75rem;
}
.chan2
{
    font-size: 2rem;
}
.chan2_5
{
    font-size: 2.5rem;
}
.chan3
{
    font-size: 3rem;
}

/*  font size using px  */
.chan_10
{
    font-size: 10px;
}
.chan_12
{
    font-size: 12px;
}
.chan_15
{
    font-size: 15px;
}
.chan_20
{
    font-size: 20px;
}
.chan_25
{
    font-size: 25px;
}
.chan_30
{
    font-size: 30px;
}
.chan_40
{
    font-size: 40px;
}
.chan_50
{
    font-size: 50px;
}

/*  font weights   */
.weigh
{
    font-size: 20px;
    line-height: 2.5rem;
    padding: 3px;
}

/*  playing with image   */
.img1
{
    display: block;
    margin: auto;
    height: 300px;  
    border: 5px solid black;
    zoom: 120%;
}

/* CSS Display */
.dis_play
{
    padding: 20px;
}
.dis_play::selection
{
    background: none;
}
.dis_play p
{
    background-color: cadetblue;
    margin: 10px;
    font-size: 1.25rem;
    color: white;
}
.dis_play p::selection
{
    background: red;
    color: black;
}
.bl
{
    display: block;
}
.inbl
{
    display: inline-block;
    width: 400px;
}
.in
{
    display: inline;
    width: 400px;
}

@media (max-width: 980px)
{
    .hello
    {
        /* flex-wrap: wrap; */
        flex-direction: column;
        background-color: black;
    }
}
@media (max-width: 600px)
{
    .hello
    {
        /* flex-wrap: wrap; */
        flex-direction: column;
        background-color: black;
    }
    .grid-container
    {
        grid-template-columns: 1fr;
    }
}