:root{
    ---background_color : #4F80E2;
    ---background_color2 :#F0F0F1;
    ---text_color : rgb(155, 151, 151);
    ---text_color2 : black;
    ---text_color1 :white;
    ---text_color3:#26c7c4;
    ---text_color4:rgb(0, 119, 255);
}

body,*,*::after, *::before{
    margin:0;
    padding:0;
}
body
{
    text-align:center;
    box-sizing: border-box;
    /* background-image: url("images/uranus_bg.jpg"); */
    background-color: rgb(48, 46, 46);
    color:var(---text_color);
    font-family : Verdana, sans-serif;
    backdrop-filter: blur(15px);
}
#main_header
{
    position:sticky;
    top:0;
    z-index:999;
    background-color: var(---background_color);
}

.uranus_headerMain
{
    padding-top: 1rem;
    padding-bottom:1rem;
}
.uranus_logo img
{
    position:relative;
    width:8%;
    height:30px;
    animation-name:myanim;
    animation-timing-function:ease-in-out;
    animation-iteration-count: infinite;
    animation-direction:alternate;
    animation-duration:10s;
}
@keyframes myanim{
    0%{left:-25%;}
    100%{left:20%;}
}
@media (min-width:728px){
    .uranus_logo img{animation-duration:5s;}
    .uranus_headerText{position:relative;left:8%;}
    @keyframes myanim{
        0%{left:0%;}
        100%{left:100%;}
    }
}

.uranus_headerText
{
    font-size:1.6rem;
    font-weight:800;
    padding-top:0.5rem;
    color:var(---text_color1);
}
.uranus_headerText span
{
    display:block;
    font-size:1.3rem;
    color:black;
}
#sticky_control
{
    background-image:url("images/attach.png");
    width:30px;
    height:40px;
    background-size: contain;
    background-repeat: no-repeat;
    filter:invert(100%) sepia(1%) saturate(7497%) hue-rotate(43deg) brightness(105%) contrast(101%);
    transform: rotate(90deg);
    position: absolute;
    right:1rem;
    top:0.5rem;
    display:block;
    margin:0 auto;
    cursor: pointer;
    padding-bottom:0rem;
}
/* Section 1 , main content */

.USec1_main
{
    padding-top:0rem;
}
.USec1_title
{
    font-size:clamp(1rem,20vw,1.4rem);
    font-weight:700;
    padding:0.6rem;
    line-height:2rem;
    padding-top:1rem;
    padding-bottom:1rem;
    text-align:center;
    /* background-color:var(---background_color); */
    color:var(---text_color1);
}
.USec1_contentText
{
    color:var(---text_color1);
    padding-top:1rem;
    font-size:0.8rem;
    padding:0.6rem;
    line-height:1.05rem;
    text-align: center;
    padding-bottom:3rem;
}
.USec1_contentText p + p
{
    padding-top:0.5rem;
}


/* Uranus key features of why become a joke*/
.USCec10_main
{
    padding-bottom: 2rem;
}
.USec10_title
{
    font-size:clamp(1rem,20vw,1.4rem);
    font-weight:700;
    padding:0.6rem;
    line-height:2rem;
    padding-top:2rem;
    padding-bottom:1.5rem;
    text-align:center;
    color:white;
}
.USec10_cDivControl
    {
        display:grid;
        grid-template-columns: repeat(1,1fr);
        gap:1.5rem;
        text-align:center;
        justify-content:center;
        width:95%;
        margin:0 auto;
    }
.USec10_cDiv
{
    position:relative;
    background-color:var(---background_color2);
    box-shadow:0 2px 5px var(---background_color3);
    color:var(---text_color2);
    border-radius:1rem;
}
.USec10_cDiv:hover
{
    box-shadow: 3px 3px 8px rgb(52, 52, 177);
    border:1px solid white;
    bottom:5px;
    background-color:var(---background_color2);
}
.USec10_header
{
    font-size:clamp(1rem,20vw,1.3rem);
    padding-top:1rem;
    padding-bottom:0.5rem;
    font-weight:600;
}
.USec10_content
{
    padding-top:1rem;
    font-size:1.05rem;
    padding:0.6rem;
    line-height:1.4rem;
    text-align: left;
    padding-bottom:1rem;
    display:flex;
    justify-content: center;
    align-items: center;
}


/* Memes Cart Section*/
.USec01_title
{
    font-size:clamp(1rem,20vw,1.4rem);
    font-weight:700;
    padding:0.6rem;
    line-height:2rem;
    padding-top:2rem;
    padding-bottom:0rem;
    text-align:center;
    color:white;
}
.USec01_mainCart
{
    padding: 0.6rem;
    padding-top:3rem;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    justify-items:center;
    gap:1rem;
}
.USec01_mainCart div
{
    width:95%;
    position:relative;
    font-size:1rem;
    font-weight:500;
    min-height:8rem;
    line-height: 1.2rem;
    padding:0.5rem;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:var(---background_color2);
    box-shadow:0 2px 5px var(---background_color3);
    color:var(---text_color2);
    border-radius: 1rem;
}
.USec01_mainCart div:hover
{
    background-color:var(---background_color2);
    bottom:5px;
    box-shadow:3px 3px 8px rgb(52, 52, 177);
}


/* Memes Section with images */
.USec2_title
{
    font-size:clamp(1rem,20vw,1.4rem);
    font-weight:700;
    padding:0.6rem;
    line-height:2rem;
    padding-bottom:1rem;
    text-align:center;
    color:var(---text_color1);
    margin-top:4rem;
    margin-bottom:0.7rem;
}
.USec2_images
    {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:0rem;
        margin:0rem;
    }
.USec2_images img
{
    width:90%;
    height:150px;
    margin-top:1.2rem;
    box-shadow:0 2px 5px rgb(51, 250, 240);
}
.USec2_images img:hover
    {
        box-shadow:3px 3px 8px rgb(52, 52, 177);
        transform: scale(101%);
    }
.USec2_title
{
    margin-top:3rem;
}

/* Embeded vide from Youtube */

.USec3_embeddVid iframe
{
    width:90%;
    height:200px;
    outline:2px solid var(---background_color3);
    box-shadow:0 2px 5px rgb(51, 250, 240);
    margin-top:1rem;
}
.USec3_title
{
    margin-top:4rem;
    font-size:clamp(1rem,20vw,1.4rem);
    font-weight:700;
    padding:0.6rem;
    line-height:2rem;
    text-align:center;
    color:var(---text_color1);
}

/* Footer Section */
.footer_main
{
    padding-top:2rem;
    margin-top:2rem;
    background-color:var(---background_color);
    color:var(---text_color2);
}
.footer_header
{
    font-size:1.2rem;
    font-weight:600;
    padding-bottom:0.4rem;
}
.footer_topSectionLists div
{
    padding-bottom:0.6rem;
}
.footer_bottomSection
{
    margin-top:0.5rem;
    padding:0.6rem;
    background-color:var(---background_color);
    font-size:1rem;
}
.footer_img
{
    display:flex;
    justify-content:center;
    gap:2rem;
    padding:1rem 0;
}
.footer_img img
{
    width:20px;
    height:20px;
}
.footer_topSectionLists a
{
    text-decoration: none;
    color:var(---background_color2);
    font-weight:600;
    font-size:0.9rem;
}

.rocket_main
{
    background-color: var(---background_color);
    padding:1rem 0.6rem;
    color:var(---background_color2);
    font-size:1rem;
    font-weight:600;
}
.rocket_mv
{
    position:relative;
    bottom:0;
    cursor: pointer;
    z-index:999;
}
.rocket_img img
{
    width:30px;
    height:60px;
}

/* Desktop Responsive*/

@media (min-width:728px){
    
    body
    {
        backdrop-filter: blur(10px);
    }

    #main_header{
        background-color: var(---background_color);
        display:flex;
        justify-content: space-between;
    }
    #sticky_control
    {
        background-image:url("images/attach.png");
        filter:invert(60%) sepia(89%) saturate(421%) 
        hue-rotate(129deg) brightness(93%) contrast(92%);
        width:30px;
        height:40px;
        background-size: contain;
        background-repeat: no-repeat;
        transform: rotate(90deg);
        position:relative;
        top:8px;
        display:inline-block;
        margin:0;
        cursor: pointer;
        padding-bottom:unset;
    }
    .uranus_headerMain
    {
        display:flex;
        gap:6rem;
        justify-items: center;
        color:var(---text_color2);
        padding-bottom:0rem;
    }
    .uranus_logo img
    {
        width:50%;
        height:40px;
        margin-left :2rem;
        position:relative;
        bottom:0.3rem;
    }
    .uranus_headerText
    {
        padding-top:0rem;
    }
    .uranus_headerText span
    {
        display:inline;
        font-size:1.3rem;
        position: relative;
        bottom:0.1rem;
    }

    .USec1_title
    {
        font-size:2rem;
        text-align:center;
        padding:1rem 0;
        background-color:unset;
        color:var(---text_color1);
        margin-top:2rem;
        animation-name:titleAnim;
        animation-timing-function:ease-in-out;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration:10s;
    }
    @keyframes titleAnim{
        0%{transform: scale(50%);}
        100%{transform:scale(100%)}
    }
    .USec1_title::before
    {
        content: " ";
        display: block; 
        position:relative;
        top:25px;
        left:22%;
        width: 10%; 
        height: 4px; 
        background-color:var(---background_color);
        animation-name:beforeAnim;
        animation-timing-function:ease-in-out;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration:5s;
    }
    @keyframes beforeAnim{
        0%{left:13%;}
        100%{left:22%;}
    }
    .USec1_title::after
    {
        content: " ";
        display: block; 
        position:relative;
        top:-10px;
        left:68%;
        width: 10%; 
        height: 4px; 
        background-color:var(---background_color);
        animation-name:afterAnim;
        animation-timing-function:ease-in-out;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration:5s;
    }
    @keyframes afterAnim{
        0%{left:76%;}
        100%{left:68%;}
    }
    .USec1_contentText
    {
        background-color:unset;
        color:var(---text_color);
        margin-top:1rem;
        font-size:1.2rem;
        padding:0.6rem;
        line-height:1.7rem;
        text-align: left;
    }

    .USec10_cDivControl
    {
        display:grid;
        grid-template-columns: repeat(2,1fr);
        gap:1.5rem;
        text-align:center;
        justify-content:center;
        width:98%;
        margin:0 auto;
    }
    .USec10_content
    {
        padding-bottom:1.5rem;
    }
    .USec10_cDiv
    {
        margin-top:0rem;
    }
    .USec10_fullWid
    {
        grid-column: 1/ span 2;
    }
    .USec10_title
    {
        padding-bottom:3rem;
    }

    .USec01_title
    {
        font-size:2rem;
        padding-top:3.5rem;
    }
    .USec01_mainCart
    {
        grid-template-columns:repeat(3,1fr);
    }
    .USec01_mainCart div
    {
        border:1px solid rgb(255, 255, 255);
    }
    

    .USec2_title
    {
        font-size:2rem;
        text-align:center;
        padding:1rem 0;
        /* background-color:var(---background_color2); */
        color:var(---text_color1);
        /* border-bottom:1px solid white; */
    }
    .USec2_images img
    {
        width:95%;
        height:250px;
        border:1px solid white;
        box-shadow:3px 3px 8px;
    }
    .USec2_images img:hover
    {
        box-shadow:3px 3px 8px rgb(52, 52, 177);
        transform: scale(102%);
    }
    .USec2_images
    {
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:20px;
        margin-left:0rem;
    }
    .USec2_img9
    {
        grid-row: 2 / 4;
    }
   


    .USec3_embeddVid iframe
    {
        width:50%;
        height:400px;
        border:1px solid white;
        margin-top:1rem;
    }
    .USec3_embeddVid iframe+iframe
    {
        margin-top:1rem;
    }
    .USec3_title
    {
        margin-top:6rem;
        font-size:2rem;
        text-align:center;
        padding:1rem 0;
        color:var(---text_color1);
    }


    .footer_topSection
    {
        display:flex;
        justify-content:center;
        gap:4rem;
    }
    .footer_topSectionLists div
    {
        padding-bottom:0.8rem;
        text-align:left;
    }
    .footer_bottomSection
    {
        margin-top:1rem;
        padding:0.6rem;
        background-color:var(---background_color);
        font-size:1.2rem;
        color:var(---text_color2);
    }  
}
/*auto write paragraph enable and adjustment*/

@media (min-width:1284px){
    .USec1_contentText
    {
        height:40rem;
    }
}