/* borders */
.box {
    
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px minmax(0, 1fr);

}

header, nav, main, footer {

    background-image: linear-gradient(to bottom, #8C181B, #B72C24);
    
    /* background-image: linear-gradient(to bottom, #8C181B, #B72C24); */
    border: 3px solid transparent;
    border-image: linear-gradient( 135deg,
    #cfac62 0%,
    #ffebad 25%,
    #bb883b 50%,
    #fff1c4 75%,
    #aa7728 100%
    ) 1;
}

header {
    grid-row: 1 / 2;
    grid-column: 1 / 3 ;
}

nav {
    grid-row: 2 / 3;
    grid-column: 2 /3;
    height: max-content;
}

main {
    grid-row: 2 / 3;
    grid-column: 1 /2;
    height: max-content;

}

footer {
    grid-row: 3 / 4;
    grid-column: 1 / 3;
}

::selection {
/* changes highlight bg color */
background: #a51d19;
/* changes highlight text color */
color: #FFFFFF;
}

/* moving background */
body {
  
  background: 
    url('images/bg\ overlay\ diamond.png') repeat,
    url('images/bg.png') ; 
    
  background-size: auto;
  
  animation: moveOverlay 50s linear infinite;
}

@keyframes moveOverlay {
  0% {
    from {background-position: 0 200px;}
  to {background-position: -200px 0 ;}
  }
  100% {
    background-position: 200px 200px, 0 0;
  }
}

/* custom cursor */
html, body, * {
  cursor: url('https://cdn.cursors-4u.net/previews/chrome-pointer-4db561db-32.webp') 34 34, auto;
}

a, button, input[type="submit"], input[type="button"], select,
.clickable {
  cursor: url('https://cdn.cursors-4u.net/previews/chrome-link-select-a878ea31-32.webp') 43 34, pointer;
}

input[type="text"], textarea, p, 
span {
  cursor: url('https://cdn.cursors-4u.net/previews/chrome-text-select-3fb091ba-32.webp') 47 47, text;
}



/*@keyframes moveIt {
  from {background-position: 0 200px;}
  to {background-position: 200px 0 ;}
}

body {
  background-image: url("images/bg\ overlay.png");
  background-size: 261px;
  animation: moveIt 50s linear infinite;
}

