@font-face {
  font-family: 'ProximaNova-Extrabold';
  src: url("../fonts/ProximaNova-Extrabold.otf"); }
@font-face {
  font-family: 'ProximaNova-Regular';
  src: url("../fonts/ProximaNovaCond-Regular.otf"); }
.html-css {
  background-color: #FFFFFF;
  height: 100vh; }

nav {
  background-color: #FFFFFF;
  height: 64px; }
  nav .nav-wrapper a {
    color: black;
    font-family: "ProximaNova-Extrabold", sans-serif;
    font-size: 22px; }

.row .col {
  padding: 0 0.25rem; }

h5 {
  font-family: "ProximaNova-Extrabold", sans-serif;
  font-size: 22px; }

@media screen and (max-width: 990px) {
  nav {
    height: 0px; } }

.sidebar {
  margin: 0;
  padding: 0;
  height: auto; }
  @media screen and (max-width: 990px) {
    .sidebar {
      margin-top: 25px;
      height: auto; } }

.brand-logo {
  margin-left: 15px; }

li {
  font-size: 24px;
  font-family: "ProximaNova-Extrabold", sans-serif; }
  @media screen and (max-width: 500px) {
    li {
      font-size: 18px; } }

.sidebar p {
  font-weight: bold; }

.sidebar ul li:nth-child(odd):hover {
  background-color: #C7FAFF; }

.sidebar ul li:nth-child(even):hover {
  background-color: #6EA7FF; }

.thumbnail-wrapper {
  padding-top: 1vh; }
  @media screen and (max-width: 500px) {
    .thumbnail-wrapper {
      padding-top: 0; } }

.project-details {
  max-width: 100%;
  height: auto;
  margin-bottom: 3%;
  box-shadow: 2px 6px 8px 0px rgba(0, 0, 0, 0.3); }
  @media screen and (max-width: 500px) {
    .project-details {
      max-width: 100%; } }

.projects p {
  font-family: "ProximaNova-Regular", sans-serif;
  font-size: 18px;
  letter-spacing: 0.8px;
  text-align: justify; }

.vinyl-project-cover {
  display: inline;
  max-width: 40%;
  height: auto;
  margin-bottom: 1%;
  margin-left: 1%;
  margin-right: 1%; }
  @media screen and (max-width: 500px) {
    .vinyl-project-cover {
      margin-left: 0;
      max-width: 100%; } }

#project1, #project2, #project3, #project4, #project5, #project6, #project7, #project8, #project9 {
  display: none; }

.technology-used-project1 {
  color: #2552A9; }

.technology-used-project2 {
  color: #F76F59; }

.technology-used-project3 {
  color: #224779; }

.technology-used-project4 {
  color: #E40030; }

.technology-used-project5 {
  color: #8671C3; }

.technology-used-project6 {
  color: #CC4C2D; }

.technology-used-project7 {
  color: #006341; }

.technology-used-project8 {
  color: #200F3E; }

.technology-used-project9 {
  color: #015485; }

.logo-detail {
  margin: 0 auto; }

html, body {
  height: 100%; }

.wrapper {
  width: 100%;
  min-height: 100%;
  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, #82FDAD 50%, #82FDAD 100%);
  background: -webkit-linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, #82FDAD 50%, #82FDAD 100%); }
  @media screen and (max-width: 568px) {
    .wrapper {
      background: linear-gradient(to bottom, #FFFFFF 50%, #FFFFFF 50%, #82FDAD 90%, #82FDAD 10%);
      background: -webkit-linear-gradient(to bottom, #FFFFFF 50%, #FFFFFF 50%, #82FDAD 90%, #82FDAD 10%); } }

nav ul li:hover {
  background-color: #82FDAD; }

.hello-text {
  text-align: center;
  font-family: "ProximaNova-Extrabold", sans-serif;
  font-size: 24vw;
  line-height: 20vw; }

.he-text {
  color: #82FDAD; }

.llo-text:hover {
  color: #FFFFFF; }
  @media screen and (max-width: 568px) {
    .llo-text:hover {
      color: #82FDAD; } }

.biography-text {
  font-family: "ProximaNovaCond-Regular", sans-serif;
  width: 50%;
  font-size: 16px;
  padding: 0 6px; }
  @media screen and (max-width: 568px) {
    .biography-text {
      width: 100%; } }

a.button-collapse {
  width: 0px; }

.buttons {
  margin: 0;
  padding: 0;
  width: 49%; }
  @media screen and (max-width: 568px) {
    .buttons {
      width: 100%; } }

.email, .github, .linkedin, .portfolio {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 24%;
  text-align: center;
  font-size: 20px; }
  @media screen and (max-width: 700px) {
    .email, .github, .linkedin, .portfolio {
      width: 24%;
      margin: 0 auto;
      display: block; } }

.wrapper a {
  color: #000000;
  font-family: "ProximaNova-Extrabold", sans-serif; }

/*# sourceMappingURL=index.css.map */
