@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Dosis:200,300,400');

body, row
{
    font-family: 'Roboto';
    padding: 0;
    margin: 0;
    width: 100vw;
    margin: 0;
}

a
{
    text-decoration: none;
}

#name
{
    color: rgb(195, 195, 195);
    text-align: center;
    width: 100%;
    padding-top: 30px;
    margin: 0 auto;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 25px;
    letter-spacing: 3px;
}


#left, #right 
{
    width: 45%;
    height: 500px;
    float: left;
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

#left
{
    margin-left: 4.9%;
}

#rgb-wrap
{
    width: auto;
    height: 500px;
}

.circle
{
    color: white;
    width: 170px;
    height: 170px;
    position: relative;
    border-radius: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: 400;
    box-shadow: 10px 10px 25px lightgray;
    font-family: 'Dosis', sans-serif;
    opacity: .7;
}

.circle:hover
{
    z-index: 10;
    opacity: 1;
}

.red
{
    top: 130px;
    left: -80px;
    background-color: rgba(252, 104, 88, 0.733);
}

.green
{
    bottom: -20px;
    left: 40px;
    background-color: rgba(141, 236, 17, 0.541);
}

.blue
{
    bottom: 80px;
    left: -60px;
    background-color: rgba(23, 183, 211, 0.507);
}

.title
{
    color: rgb(90, 90, 90);
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 30px;
}

.divider
{
    background-color: rgb(200, 200, 200);
    width: 1px;
    height: 33vh;
    float: left;
    margin-top: 25vh;
}

.code-symb
{
    font-size: 120px;
    color: white;
    text-shadow: 8px 8px 15px rgba(128, 128, 128, 0.822);
    padding-bottom: 150px;
    display: flex;
    align-content: center;
    padding-right: 10px;
}

.code-symb div
{
    display: inline-block;
}

.nav-indicate
{
    color: white;
    padding: 0;
    margin: 0;
}

/* DESIGN HTML PAGE------------------------------ */

#navbar
{
    margin-bottom: 40px;
    width: 100%;
    height: auto;
    background-color: rgb(197, 197, 197);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px;
}

.nav-link
{
    font-size: 20px;
    color: gray;
} 

.bs-contain
{
    margin: 0;
    padding: 0;
    /* width: 95vw; */
    margin: 0;
}

.design-title
{
    text-align: center;
    /* margin-top: 8px; */
    font-size: 20px;
    font-weight: 100;
}

#list 
{
    padding:0;
    margin: 0;
}

.list-item
{
    margin-top: 45px;
}

.imgs
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.design-link
{
    width: 100%;
    height: 100%;
}

.design-thumb
{
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 6px 6px 18px gray;
}

.icons
{
    margin: 5px 0;
}

.image-icons
{
    margin: 0 5px;
    margin-top: 10px;
}

#list h1
{
    color: rgb(168, 168, 168);
    font-weight: 100;
}


/* DESIGN LEGEND---------------------------------- */

#legend
{
    padding: 20px;
    margin-top: 30px;
    background-color: rgb(54, 54, 54);
}

.legend-title
{
    font-size: 40px;
    font-weight: 300; 
    color: rgb(221, 221, 221);
    /* padding: 30px 0; */
}

.icon-bank
{
    padding: 0 30px;
    display: flex;
    justify-content: space-around;
}

.legend-item
{
    font-weight: 100;
    font-size: 18px;
    color: rgb(219, 219, 219);
    line-height: 15px;
    align-content: center;
    margin: 30px 0;
}

.legend-icons
{
    margin-left: 20px;
    margin-right: 50px;
}

/* DEV HTML PAGE---------------------------- */

#dev-body
{
    height: 60vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.dev-link
{
    text-align: center;
}

.dev-title, .dev-link:hover
{
    text-decoration: none;
    color: gray;
    font-weight: 100;
}

.dev-flex-wrap
{   
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.flex-a
{   
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 5px;
    /* justify-content: center; */
}

.flex-a a 
{
    margin-left: 15px;
}

.bstrap
{
    /* padding-left: 20px; */
}

.space
{
    width: 10px;
}

.nav-indicate
{
    color: white;
    padding: 0;
    margin: 0;
}

.contact
{
    margin-right: 30px;
}