body {
background-image: linear-gradient(#0c0314, #0c0314, #260306); 
  height: auto;
  background-attachment: fixed;
  background-size: cover;
  font-family: Monospace;
}

a {
  text-decoration: none;
  color: #640ccf;
}

a:hover {
font-weight: bold;
color: #9c060b;
}


.item {
  background: rgba(26, 4, 64, 0.3);
  padding: 7px; 
  border-radius: 8px;
}

.container {
  display: grid;
  grid-auto-columns: 200px;
  gap: 20px;
  grid-template-areas: 
  "box-1 box-1 box-1 box-1 box-1"
  "box-2 box-3 box-3 box-3 ."
  "box-2 box-3 box-3 box-3 box-6"
  "box-2 box-5 box-4 box-4 box-6"
  ". . . . .";
  
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  gird-auto-rows: 1fr;
  grid-auto-flow: row;
  margin-top: 10%;
  margin-bottom: 5%;
}

 .item h1 {
  color: #5707b8;
} 


/* header */

#header {
background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);

border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
padding: 15px; 
  margin: 1px;
  min-width: 800px;
  height: 110px;
  text-align: right;
  font-family: Lucida Console;
  
}

#header h1 {
  background: linear-gradient(90deg, #470599, #5707b8, #49039e, #62068a, #8a0617);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

}

#header h1:hover {
  background: linear-gradient(90deg, #8a0617, #62068a, #820a56, #6c0475, #6305ab);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparebt;
  } 

       /* navivagtion bar */

.navbar {
  color: #b6afc4;
  background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  width: 150px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

.navbar ul {
  list-style-type: none;
  padding: 2px;
}

.navbar li {
  display: block;
  padding: 15px;
  margin: 7px;
  border: 2px solid;
  border-radius: 7px;
  background-color: rgba(14, 2, 36, 0.3);
  font-size: 19px;
}

.navbar a {
  color: #9c060b;
  text-decoration: none;
  font-weight: bold;
}

.navbar li:hover {
  color: #640ccf; 
  font-weight: bold;
  border: 4px solid #640ccf;
  background-color: rgba(100, 12, 207, 0.3);
}

.navbar h1 {
  background: linear-gradient(90deg, #470599, #5707b8, #8a0617);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: Lucida Console;
}

.navbar a:hover {
  color: #640ccf;
  font-size: 18px;
}

         /* BOX 1 */

.mainbox {
  background-image: url(https://i.pinimg.com/1200x/20/82/dd/2082ddb96f142f9e0df954c8a66541a7.jpg);
  border-radius: 8px;
  padding: 10px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;}

.mainbox p {
background-color: rgba(34, 3, 71, 0.5);
  padding: 5px;
  border-radius: 5px;
  color: #b6afc4;
  font-size: 18px;
}

.mainbox h1 {
text-align: center;  
  font-family: Lucida Console;
}

/* BOX 2 */

.secondbox {
color: #9c060b;
  background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  margin: 1px;
  border-radius: 5px;
  padding: 10px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
  text-align: center;
}

.secondbox details:hover {
color: #640ccf;
}

/* BOX 3 */

.thirdbox {
 color: #b6afc4;
  background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thirdbox h3 {
  color: #640ccf;
 text-align: center;
}

  .thirdbox p {
  color: ;
  text-align: center;
    background-color: rgba(34, 3, 71, 0.5);
  padding: 5px;
  border-radius: 5px;
  color: #b6afc4;
  font-size: 18px;
  }

.thirdbox img {
  border: 2px solid #640ccf;
  border-radius: 5px;
}


/* BOX 4 */
.box4 { 
  background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;}

.box4 p {
  color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
}

.box4 h3 {
color: #9c060b;
}

/* MAIN PAGE END */


/* TEMPORARY PAGE */

.nothing {
  color: #640ccf;
}





/* COMMISSION PAGE START */

#commissionstatus {
  color: #9c060b;
  text-align: center;
}

.citem {
  background: rgba(26, 4, 64, 0.3);
  padding: 7px; 
  border-radius: 8px
}

.commscontainer {
  color: white;
  display: grid;
  grid-template-columns: 300px 300px 280px 400px;
  grid-template-rows: 200px 300px;
  gap: 20px;

 grid-template-areas: 
  "cbox-1 cbox-1 cbox-1 cbox-1"
  "box-2 cbox-3 cbox-4 cbox-9"
   "box-2 cbox-3 cbox-4 cbox-9"
  "box-2 cbox-5 cbox-6 cbox-9"
  "cbox-23 cbox-7 cbox-8 cbox-10"
   "cbox-23 . . cbox-10"
  ". . . ."
  ". cbox-13 cbox-13 ."
  "cbox-14 cbox-16 cbox-16 cbox-16"
  "cbox-15 cbox-17 cbox-17 cbox-18"
  "cbox-21 cbox-21 cbox-22 cbox-22"
   ". cbox-24 cbox-24 ."
  ". cbox-11 cbox-12 ."
  ;
  
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  gird-auto-rows: 1fr;
  grid-auto-flow: row;
  margin-top: 8%;
  margin-bottom: 14%;
}

.comheading {
  background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);

border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
padding: 15px; 
  margin: 2px;
  min-width: 800px;
  height: 110px;
  text-align: right;
  font-family: Lucida Console;
}

.comheading h1 {
background: linear-gradient(90deg, #470599, #5707b8, #49039e, #62068a, #8a0617);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 60px;
}

/* SKETCH COMMISION SECTION */

#sketchimg {
  background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);
  border-radius: 8px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

.sketch {
 background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);
  border-radius: 8px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

.sketch h1 {
  text-align: center;
  color: #640ccf;
}

.sketch p {
  background-color: rgba(34, 3, 71, 0.5);
  padding: 5px;
  border-radius: 5px;
  color: #b6afc4;
  font-size: 17px;
}

/* FLAT COLOR SECTION */

.flatcolor {
background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);
  border-radius: 8px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

.flatcolor p {
  background-color: rgba(34, 3, 71, 0.5);
  padding: 5px;
  border-radius: 5px;
  color: #b6afc4;
  font-size: 17px;
}

.flatcolor h1 {
  text-align: center;
  color: #640ccf;
}

#flatcolor {
 background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);
  border-radius: 8px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

/* RENDERS SECTION */

.render {
background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);
  border-radius: 8px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

.render p {
background-color: rgba(34, 3, 71, 0.5);
  padding: 5px;
  border-radius: 5px;
  color: #b6afc4;
  font-size: 17px;
}

.render h1 {
 text-align: center;
  color: #640ccf;
}

#render {
   background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);
  border-radius: 8px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

/* BACKGROUNDS AND PRICING INFOS */

.backgrounds {
background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 3px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

.backgrounds p {
  color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
  font-size: 16px;
}

.backgrounds h1 {
  color: #9c060b;
}

.pricing {
  background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

.pricing p {
  color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
  font-size: 16px;
}

.pricing h1 {
  color: #9c060b;
}

#clickme {
background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
  align-items:center;
  content-align: center;
  
}

#clickme p {
color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
  font-size: 16px;
  font-align: center;
}

#clickme img {
  display: block;
  margin: auto;
  width: 50%;
}

#contact {
background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

#contact p {
color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
  font-size: 16px;
  text-align: center;
}

#contact h3 {
  color: #9c060b;
  text-align: center;
}

#tos {
background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

#tos p {
color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
  font-size: 16px;
  text-align: center;
}

#tos h3 {
  color: #640ccf;
  text-align: center;
}
  
/* MORE SECTION */


/* HEADER */
.aboutart {
background-image: url(https://i.pinimg.com/736x/a5/b7/f8/a5b7f813280f213b6be04f25f9232719.jpg);

border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
padding: 15px; 
  margin: 3px;
  min-width: 800px;
  height: 110px;
  text-align: right;
  font-family: Lucida Console;  
}

.aboutart h1 {
background: linear-gradient(90deg, #470599, #5707b8, #49039e, #62068a, #8a0617);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 60px;  
}



/* MAIN AREA*/ 

/* FIRST COLUMN */

#imgkrait {
  background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

#imgkrait img {
  border-radius: 5px;
}

#lineartyap {
  background-image: url(https://i.pinimg.com/736x/be/60/5d/be605ddf479378f0b4ac5c450d6bc318.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
  font-size: 18px;
}

#lineartyap p {
  color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
}

/* SECOND COLUMN */

#imgbowkid {
  background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

#imgbowkid img {
  border-radius: 5px;
}


#hellogorgeous {
  background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

#hellogorgeous img {
border-radius: 5px;
}

#renderingyap {
  background-image: url(https://i.pinimg.com/736x/be/60/5d/be605ddf479378f0b4ac5c450d6bc318.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
  font-size: 18px;
}

#renderingyap p {
  color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
}



/* THIRD COLUNB */

#thirdyap {
  background-image: url(https://i.pinimg.com/736x/be/60/5d/be605ddf479378f0b4ac5c450d6bc318.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
  font-size: 18px;
}

#thirdyap p {
  color: #b6afc4;
  background-color: rgba(34, 3, 71, 0.5);
}

#comic {
  background-image: url(https://i.pinimg.com/1200x/48/5a/d2/485ad255cde385445e8ae312e1a99c97.jpg);
  border-radius: 5px;
  padding: 20px;
  margin: 7px;
  border: 1px double #200b36;  
outline: 2px solid #200b36;  
outline-offset: -9px;
}

#comic img {
  border-radius: 5px;
}