/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root{
  font-family: 'Courier New';
  font-size: 16px;
}

*{margin:0; padding:0;box-sizing: border-box;cursor: url('https://cdn.cursors-4u.net/previews/league-of-legends-pointer-db2baa3d-32.webp') 32 32, auto !important;}
::selection {
  background-color: #222; 
  color: #f1f1f1;           
}
body {
  /*background: #000; color: white;*/
  background-color: #111;
  /*width: 100%;*/
  /*opacity: 0.8;*/
  background-image:  radial-gradient(circle, #333 0.8px, transparent 0.8px), radial-gradient(circle, #333 0.8px, transparent 0.8px) ;
  background-size: 5px 20px, 20px 5px;
  background-position: -2.5px -10px, -10px -2.5px;
  color: white;
  overflow-x:hidden;
}

nav{
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  /*gap: 1rem;*/
  flex-wrap: wrap;
  background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20210827/pngtree-paper-folds-texture-background-image_768391.jpg');
}
nav a{
  color: #222;
  padding-left: 1rem; padding-right: 1rem;
}
nav a:hover{
  background: #222;
  color: #f1f1f1;
}

a {color: white;}
.block{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  /*justify-content: space-between;*/
  /*flex-direction: column;*/
}

.blockStuff{
  padding: 16px;
  width: 300px;
  /*background: #f1f1f1;*/
  /*filter: drop-shadow(6px 6px #222);*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*align-items: center;*/
  overflow: hidden;
  
  background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20210827/pngtree-paper-folds-texture-background-image_768391.jpg');
  
  /*mask-image: url('https://static.vecteezy.com/system/resources/thumbnails/048/773/892/small/stylish-ripped-torn-paper-transparent-texture-free-png.png');*/
  /*-webkit-mask-image: url('https://static.vecteezy.com/system/resources/thumbnails/048/773/892/small/stylish-ripped-torn-paper-transparent-texture-free-png.png');*/
  /*-webkit-mask-size: 100% 100%;*/
  /*mask-size: 100% 100%;*/
  /*filter: drop-shadow(10px 10px 10px #000);*/
}
.blockStuff a, p, h3{
  color: #222;
}
.blockStuff img{
  width: 100%;
}

#me p img{
  width:48px
}
#inspo{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#inspo ul{
  width:100%;
  margin: auto;
  list-style-type: none;
}
#inspo ul li{
  color: #000;
  font-weight: bold;
  width:100%;
  text-align:center;
}
#inspo p{
  font-size:10px;
}

.jitter-text {
  /*display: inline-block;*/
  animation: jitter 0.3s infinite;
}

@keyframes jitter {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1px, 1px); }
  20% { transform: translate(1px, -1px); }
  30% { transform: translate(-1px, -1px); }
  40% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, 2px); }
  60% { transform: translate(1px, -1px); }
  70% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, 1px); }
  90% { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}


@keyframes horizontal-shaking {
 0% { transform: translateX(0) }
 25% { transform: translateX(5px) }
 50% { transform: translateX(-5px) }
 75% { transform: translateX(5px) }
 100% { transform: translateX(0) }
}

.shaking-div{
  animation: horizontal-shaking 0.3s infinite;  
}

/* devlog */

.devtitle{
  width:100%;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom:1rem;
}
.devtitle div{
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  
  padding: 1rem;
  background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20210827/pngtree-paper-folds-texture-background-image_768391.jpg');
}
.devtitle div h1 {font-size: 3rem; color: #222;}



#devlog{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 75px;
  justify-content: space-evenly;
  padding: 2rem;
  padding-bottom:100rem;
}

.day{
  width: 400px;
  height: 500px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  filter: drop-shadow(10px 10px 3px #000);
  transition: transform 0.3s ease-in-out;
}

.polaroid img, video{
  width: 100%;
}
.polaroid p{
  color: #222;
}
.polaroid i{
  font-size: 2rem; font-weight: 1000;
}

.day:hover {
  transform: scale(1.2);
}