@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

*{
    box-sizing: border-box; /* paddiing or border does not affect width */
}

body{
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column; 
    align-items: center;  
    justify-content: center;   
    height: 100vh;
    overflow: hidden; /* no scroll bars showed */  
    margin: 0;
    background-color: #000;
    color: #fff;
}

:root {
    /* dark shades of primary color*/
    --clr-primary-1: hsl(205, 86%, 17%);
    --clr-primary-2: hsl(205, 77%, 27%);
    --clr-primary-3: hsl(205, 72%, 37%);
    --clr-primary-4: hsl(205, 63%, 48%);
    /* primary/main color */
    --clr-primary-5: hsl(205, 78%, 60%);
    /* lighter shades of primary color */
    --clr-primary-6: hsl(205, 89%, 70%);
    --clr-primary-7: hsl(205, 90%, 76%);
    --clr-primary-8: hsl(205, 86%, 81%);
    --clr-primary-9: hsl(205, 90%, 88%);
    --clr-primary-10: hsl(205, 100%, 96%);
    /* darkest grey - used for headings */
    --clr-grey-1: hsl(209, 61%, 16%);
    --clr-grey-2: hsl(211, 39%, 23%);
    --clr-grey-3: hsl(209, 34%, 30%);
    --clr-grey-4: hsl(209, 28%, 39%);
    /* grey used for paragraphs */
    --clr-grey-5: hsl(210, 22%, 49%);
    --clr-grey-6: hsl(209, 23%, 60%);
    --clr-grey-7: hsl(211, 27%, 70%);
    --clr-grey-8: hsl(210, 31%, 80%);
    --clr-grey-9: hsl(212, 33%, 89%);
    --clr-grey-10: hsl(210, 36%, 96%);
    --clr-white: #fff;
    --clr-red-dark: hsl(360, 67%, 44%);
    --clr-red-light: hsl(360, 71%, 66%);
    --clr-green-dark: hsl(125, 67%, 44%);
    --clr-green-light: hsl(125, 71%, 66%);
    --clr-black: #222;
    --ff-primary: "Roboto", sans-serif;
    --ff-secondary: "Open Sans", sans-serif;
    --transition: all 0.3s linear;
    --spacing: 0.1rem;
    --radius: 0.25rem;
    --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    --max-width: 1170px;
    --fixed-width: 620px;
  }

.card-container{
    display: flex;
    flex-direction: row;
    align-items: center;  
    justify-content: center;  
   /* flex-wrap: wrap; */
   flex-wrap: wrap;

}

.card{
    flex-basis: 33.333333%;
}


/* card styling */
.google-card, 
.yt-card,
.reddit-card,
.twit-card,
.stack-card,
.git-card{
    margin: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;  
    justify-content: center;  
    border-radius: 3px;
    padding: 25px;
}

/* card colors */
.google-card{
    background-color: #CC51C8;
}

.yt-card{
    background-color: #6CB40E;
}

.reddit-card{
    background-color: #1A41E1;
}

.twit-card{
    background-color: #9354FB;
}

.stack-card{
   /* background-color: rgb(226, 205, 166); */
    background-color: #EDBF85;
}

.git-card{
    background-color: #E87461;
}


.input{
    background: #fff;
    color: var(--clr-black);
    border: 2px solid var(--clr-black);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
    padding: 0.7rem 3rem;
    display: block;
    margin : 0 auto;
}

.btn{
    font-family: var(--ff-primary);
    text-transform: uppercase;
    background: transparent;
    color: var(--clr-black);
    letter-spacing: var(--spacing);
    display: inline-block;
    font-weight: 700;
    transition: var(--transition);
    border: 2px solid var(--clr-black);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    margin: 0.7rem;
}

.btn:hover {
    color: var(--clr-white);
    background: var(--clr-black);
  }

.btn:hover .fa-google{
    color: #EA4335;
} 

.btn:hover .fa-youtube{
    color: #c4302b;
} 

.btn:hover .fa-reddit-alien{
    color: #FF5700;
}  

.btn:hover .fa-twitter{
    color: #1DA1F2;
} 

.btn:hover .fa-stack-overflow{
    color: #F48024;
}

.btn:hover .fa-github-alt{
    color: #fff;
}

/*
.fa-arrow-alt-circle-right,
.fa-arrow-alt-circle-left{
    color: #bbe6e4;
}
*/