body {
  @import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
  background-image: var(--background-url);
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: 100%;
  
  background-color: var(--bg-color);
  color: var(--primary);
  
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:20px;
  
  height:100dvh;
}

div {
  /*border: solid var(--accent1) 1px;*/
  border-color:var(--accent1);
  border-width: 1px;
  
  padding: 1vh 1vw;
}

a {
  color: var(--accent2);
  padding: 0;
}

h2 {
  color: var(--accent2);
}
h1 {
  color: var(--secondary);
}

.jacquard-12 {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
}

.jacquarda-bastarda-9 {
  font-family: "Jacquarda Bastarda 9", serif;
  font-weight: 400;
  font-style: normal;
}
/* ---- */

.navbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  
  padding: 0 1vw;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  
  padding: 0;
  margin: 7vh 20vw;
  height: 100vh;

  }

.header {
  width: 100%;
  height: 10vh;
  margin: 0 0 1vh;
  
  position: relative;
  padding: 0 5vw 0;
  
  display:flex;
  flex-direction:column;
  align-content:center;
  justify-content:center;
}

.sidebar {
  margin: 0 1vw 0 0;
  width: 12vw;
  
}
.sidebar ul {
  color: var(--accent1);
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main {
  flex: 1;
}

.header-img {
  height:50%;
  
}

.floating {
  --size: 250px;
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: calc(var(--size) / -2);
  left: calc(var(--size) / -2);
}

.content {
  background-image: url("/media/divbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
  padding:0 1vw 1vh;
  margin: 0 0 5vh;
  border: solid var(--primary) 1px;
  box-shadow: 5px 5px var(--accent2);
}

.content h1 {
  background-color:var(--accent1);
  margin: 0 -1vw 1vh;
  text-align: center;
  
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 35px;
}

.preview-img {
  background-image: url('https://i.sstatic.net/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

.gridview {
  display:flex;
  flex-wrap:wrap;
}

.griditem {
  flex:0 1 0px;
  width:10vw;
}


.grid-img {
  object-fit: cover;
  width: 5vw;
  height: 5vw;
}

.grid-meta {
  font-size:15px;
  font-weight:bold;
  text-align:center;
  margin:0;
  padding:0;
}

.grid-info {
  width:5vw;

  margin:0;
  padding:0;
  font-size:16px;
  text-align:center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  -moz-box-orient:vertical;
}

.footer {
  margin:0;
  padding:0 0 1vh;
  clear: both;
  position: fixed;
  z-index: 1; 
  bottom:0;
  
  display:flex;
}

.footer a {
  margin: 0 0.25vw 0 0;
}