@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
* {
  box-sizing: border-box;
}

:root {
  --box-width: 120px;
  font-size: 16px;
}

@media(max-width: 320px) {
   :root {
    font-size: 12px;
  }
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  margin: 0;
  background-color: #f6f7fb;
  /* background-color: #edeef8; */
  /* a little better like it was -- less likely to clash */
  /* background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
  /* not sure which is better. But lg above isn't covering whole body ???? */
}

.header {
  /* font-family: 'Poppins', sans-serif; */
  /* font-family: "Times New Roman", Times, serif; */
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  text-align: center;
  padding: 0 25px 25px 25px;
  user-select: none;
}

.header a {
  text-decoration: none;
}

.title {
  margin: 20px 0 0;
  padding: 20px 0 0;
  /* color: rgb(84, 7, 148); */
  /* color: rgb(73, 6, 128); */
  /* color: rgb(24, 6, 128); */
  color: rgb(30, 5, 168);
}

#random {
  display: none;
  /*just for testing what happens when come back from project */
}

#projects-container {
  /* width: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* the above actually does it?? (when using columns)*/
  /* padding: 20px; */
  padding-bottom: 40px;
}

#projects {
  width: 100%;
  padding: 0 30px;
  margin-top: 30px;
  /* margin: 20px auto; */
  /* width: 100%; */
  /* above makes no diff */
  display: flex;
  justify-content: space-around;
  /* align-items: space-around; */
  flex-wrap: wrap;
  /* padding: 0 20px; */
  /* margin: 0 20px; */
  /* Column-count fills down columns, it seems */
  /* column-count: 8;
  column-width: var(--box-width);
  column-gap: 14px; */
  /* column-fill: balance; */
}

.project {
  height: var(--box-width);
  width: var(--box-width);
  margin: 14px;
  border: 1px solid black;
  box-shadow: -3px -2px 5px inset rgb(40, 3, 109);
}

.project.clicked {
  transform: scale(.95);
}

.project.visited {
  border: 2px solid #fff;
  box-shadow: none;
  /* This would reset every time when went to project and back until started using session storage */
}

.project-inner {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  padding: 0 .5em;
}

.project-inner.clicked {
  opacity: 0.8;
}

.project-inner.visited {
  background-color: #000;
  /* above doesn't work for some reason ??? */
}

.link {
  font-size: 16px;
  text-decoration: none;
  color: rgb(90, 6, 158);
  color: rgb(30, 1, 53);
  /* color: rgb(87, 9, 151) */
}

.link:hover {
  opacity: 0.7;
}

.link:active {
  transform: scale(0.95);
  color: black;
}

.link.visited {
  color: #33f;
  /* only if has class 'visited' */
}

.link:visited {
  /* color: rgb(8, 40, 143);
  color: blue; */
  /* color: #22A; */
  /* the link visited thing seems to be in the browser history, so won't go away when clear session or local storage */
  /* Seems to always be active in Chrome, works in Firefox, but sometimes you have to refresh the screen after coming back from link */
}