@import url('./colors.css');


body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}

html {
    --s: 52px; /* control the size*/
    --c1: #11111b;
    --c2: #1e1e2e;
    --c3: #181825;
    
    background:
      repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) 
       calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
      repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
    background-size: var(--s) calc(var(--s)*tan(30deg));
}

div {
  display: flex; 
  justify-content: center;
  flex-direction: column; 
  align-items: center; 
  gap: 10px; 
}

img {
  border-radius: 10px;
  border-style: solid;
  border-color: #ccd6f4;
  border-width: 1px;
  margin-right: 15px;
  position: static;
  margin-top: 100%;
}

p {
  color: var(--text);
  font-size: 20px;
  text-decoration: none;
  font-family: monospace;
}


#home {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #11111b;
  color: #ccd6f4;
  outline: none;
  font-family: monospace;
  font-size: 15px;
  text-align: center;
  margin-top: 20px;
  border-style: solid;
  border-color: var(--surface0);
  transition: border-color 0.1s ease-in-out, transform 0.1s ease-in-out;
}

#home:hover {
  border-color: var(--lavender);
  transform: scale(1.05);

}