@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

/*GLOBAL RULES*/

:root {
  --black: #0B0C10;
  --grey_d: #1F2833;
  --grey_l: #D1E8E2;
  --blue_l: #66FCF1;
  --blue_d: #45A29E;
}

* {
  color: var(--grey_l);
  font-family: 'Josefin Sans', sans-serif;
}


.center {
  text-align: center;
}

body {
  background-color: var(--black);
}

h1 {
  color: var(--blue_l);
  font-size: calc(50px + 1.5vw);
}
h2 {
  color: var(--blue_l);
}
/*Other h values*/
p, a {
  font-size: calc(15px + 0.5vw);
}

#project-container {
    margin: auto;
    width: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.project-div {
    border: 2px solid var(--blue_d);
    padding: 0.7vw;
    margin: 0.4vw;
    max-width: 25%;
}

.project-div:hover {
    background-color: var(--grey_d);
    cursor: pointer;
}

.project-div:active {
    border: 2px solid var(--blue_l);
}

.project-div p {
    font-size: 15px + 0.3vw;
}

@media only screen and (max-width: 768px) {

  .project-div {
    max-width: 85%;
    margin-bottom: 2vw;
  }

}