p {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
}

li {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    max-width: 700px;
}

body {
    margin-left: 5%;
    max-width: 1000px;
    margin-right: 5%;
}

head {
    margin-left: 5%;
    max-width: 1000px;
    margin-right: 5%;
}

#main {
    top: 50%;
    margin-top: 0px;
}

i {
    padding-left: 8px;
}

a {
    color: inherit;
    font-weight: bold;
    text-decoration: none;
    -webkit-transition: 0.25s; /* Safari 3.1 to 6.0 */
    transition: 0.25s;
    opacity: 1;
}

a:hover {
    opacity: 0.5;
}

b {
    font-weight: bolder;
}

#hello {
    -webkit-transition: 0.25s; /* Safari 3.1 to 6.0 */
    transition: 0.25s;
    opacity: 1;
}

#instagram {
    color: #C13584;
}

#waymo {
    color: #04eb9c;
}

#google-blue {
    color: #4285F4;
}

#google-red {
    color: #DB4437;
}

#google-yellow {
    color: #F4B400;
}

#google-green {
    color: #0F9D58;
}

#nokia {
    color: #124191;
}

#uiuc1 {
    color: #0455A4;
}

#uiuc2 {
    color: #E84A27;
}

#spotify {
    color: #1DB954;
}
  
.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 ;
  width: 100%;
  height: auto;
}