body {
    background-color: pink;
    color: white;
    font-family: 'Exo 2', sans-serif;
}


/*-- Nav Bar --*/

.navbar-custom {
    color: white;
    padding-right: 50px;
}


.active {
    font-weight: 900;
    border-bottom: solid;
}

.nav-item img {
    width: 50px;
    margin: 5px;
}

.nav-item {
    color:white;
}

.nav-item:hover {
    background: black;
}

/*-- HOMEPAGE --*/

#title {
    font-family: 'Exo 2', sans-serif;
    padding-top: 50px;
    padding-bottom: 30px;
    letter-spacing: 3px;
    width: 360px;
    font-size: 52px;
    font-weight: 600;
}

.description {
    color: black;
    text-align: center;
    letter-spacing: 1px;
    font-size: 20px;
}

/*-- WORK --*/
.control {
    display: inline-block;
    border-bottom: solid;
    font-size: 20px;
    margin: 10px;
}

.control:hover {
    cursor: pointer;
    background: white;
    color: black;
}

.box {
    background-color: blue;
    height: 200px;
    background-size: cover;
    text-align: center;
    padding-top: 90px;
    color: transparent;
    font-size: 18px;
}

.bg-1 {
    background-image: url('/static/work/beyond-underhill-cover.jpg');
}

.bg-2 {
    background-image: url('/static/work/subway.png');
}

.bg-3 {
    background-image: url('/static/work/fos2.jpg');
}

.bg-4 {
    background-image: url('/static/work/prospect1.jpg');
}

.bg-5 {
    background-image: url('/static/work/whitestone.jpg');
}

.bg-6 {
    background-image: url('/static/work/room.png');
}
.bg-7 {
    background-image: url('/static/work/idc.png');
}
.bg-8 {
    background-image: url('/static/work/event1.png');
}
.bg-9 {
    background-image: url('/static/work/title.png');
}
.bg-10 {
    background-image: url('/static/work/event1.png');
}



/*-- About --*/

#headshot {
  max-width: 50%;
  margin: 50px auto;
  display: block;
  border-radius: 50%;
}

#intro {
    padding: 30px;
    color: black;
}

/*-- Project --*/
#project-title {
    text-align: center;
    color: white;
    margin-bottom: 30px;
}

.project-info {
    color: black;
}

.project-info img {
    width: 80%;
    display: block;
    margin: 30px auto;
}

.project-info a {
    color: #dc3545;
}

/*-- workshop --*/
.workshop {
  max-width: 100%;
}