:root {
    --cardbgcolor: #f0f5f2;
    --cardfontcolor: #080d27;
    --white: #ffffff;

    --cardmargin: .1%;
    --standalonecardradius: 0.5em;
    --leftsidecardradius: 0.5em 0.2em 0.2em 0.5em;
    --rightsidecardradius: 0.2em 0.5em 0.5em 0.2em;
    --middlecardradius: 0.2em 0.2em 0.2em 0.2em;
    --cardheight: 20rem;
    --iconsize: 5em;
  }


body {
    height: 100%;
    font-family: 'Roboto', sans-serif;

    

}

.main {

    width: 100%;
    display: flex;
    background-color: rgb(255, 255, 255);


    
 
}

.categories {
    display: flex;
    justify-content: space-between;
    margin: 1rem ;

}
.card1 {
    margin: var(--cardmargin);
    border-radius: var(--leftsidecardradius);
    background: var(--cardbgcolor);
    color:var(--cardfontcolor) ;
    padding: 1% 1%; 
    width: 38%;
    height: var(--cardheight);   
    font-size:2vw;
    
}
.card2 {
    margin: var(--cardmargin);
    border-radius: var(--rightsidecardradius);
    background: var(--cardbgcolor);
    color:var(--cardfontcolor) ;
    padding: 1% 1%;
    width: 61%;
    height: 38%;  
    font-size:2vw;  
}

.featured {

    /*display: flex;*/
   justify-content: space-between;
   
   }
   
.featimg {
       width: 100%;
       max-width: 400px;
       height: auto;
   }

.openmenu{

    height: var(--iconsize);

}

.signupform {
display:grid;
background-color: aqua;

}