/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

dark blue   #140a31
Blue 1      #1c415d                   
Blue 2      #8ccfdc
Green       #d2f5d5
Yellow      #efea4a

*/

@font-face {
    font-family: 'Reg'; 
    src: url('Fonts/OldNewspaperTypes.ttf'); 
}
@font-face {
    font-family: 'HandWriting'; 
    src: url('Fonts/Skrawl.ttf'); }



Body {
 background-image:url(Assets/Pattern_BackgroundStars_04.png);
 background-color:#140a31;
 background-repeat:repeat;
  background-position:top;
  background-size:5%;
 color:#140a31;
 font-family:"Reg";
  padding-left:15%;
  padding-right:15%;
}
body:hover{
  cursor:url(Assets/Cursors/UFO.png),pointer; 
}

.Container {
  margin:auto;
  padding-left:5%;
  padding-right:5%;
  background-image:url(Assets/Txtrs/notepad.png);
  background-size:100%;
  background-repeat:repeat;
  
}
.Container :hover{cursor:url(Assets/Cursors/hand.png),pointer;}
.Title{
  margin:auto;
  padding-top:11%;
  padding-bottom:10px;
}

.Title h1{text-decoration-line:underline; font-size:35px;text-align:center;}
.About h2 {font-size:24px; font-family:"HandWriting";}
.Title p {font-size:18px;}
.About {display:flex;flex-direction:row; align-items:center; justify-content:center;}
.icons{
  display:inline-flex;
  flex-direction:row;
  justify-content:space-evenly;
  align-items:flex-start;

  }
.icons h2{font-family:"Reg"; text-align:left; font-size:18px;}
.icon{
  display:contents;
  border:solid green;
  width:fit-content;
  }
.icon img{width:50px;margin-left:10px;margin-right:10px;}
.icon :hover{cursor:url(Assets/Cursors/handhover.png),pointer;}

.Meat {
  padding:10px;
 margin:auto;
 
}

.tab button {
  font-family:"Handwriting";
  color:#1c415d;
  font-size:24px;
  border:solid 5px #1c415d;
  border-radius:5px;
  background:none;
  margin:5px;
  padding:7px;
  }
.tab button:hover{
  background: #efea4a;
  }
  
  .TabContent {
   overflow-y:scroll;
   overflow-x:hidden;
   max-height:800px;
   /*background-image:url(Assets/Txtrs/paperplain.jpg);*/
  background-size:100%;
  background-repeat:repeat;
  background-attachment: local;
  }
  .TabContent::-webkit-scrollbar{
    width:10px;
    height: fit-content;
    background-color: #8ccfdc;
    }
    
  .TabContent::-webkit-scrollbar-thumb{
    background-color: #1c415d;
    border-radius: 10px;
    }
  .TabContent p{font-size:24px;font-family:"handwriting";}
  .TabContent h3{font-size:30px; text-decoration:underline;}
  .TabContent{padding:5px;}
/*POSTERS**********************************************************************/
.PosterTitle{
  text-align:left;
  padding:10px;
 
  background-repeat:no-repeat;
  background-position:center;
  background-size:100%;
  
  }

.PosterGridBody{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(1fr);
  
  padding:5px;
  }
.PImage {
  margin:2%;
  padding:8%;
  filter:drop-shadow(5px 7px 8px #140a31);
  background-image:url(Assets/Txtrs/crumpledPaper3.png);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100%;
}
.Poster :hover {
   filter:drop-shadow(3px 5px 4px #140a31);
   cursor:url(Assets/Cursors/handhover.png),pointer;
}
.PImage :hover{filter:drop-shadow(0px 0px 0px);}
.Poster img{
  width:100%;
}
/*DRESSER**********************************************************************/
.DesignGrid{
 display:flex;
 flex-direction:column;
 justify-content:space-around;
 align-items:center;
 
 background-image:url(Assets/Txtrs/cardStack_01.png);
 background-size:100%;
 background-repeat:no-repeat;
 background-position:center; 
 padding:20px;
 
 filter:drop-shadow(5px 7px 8px #140a31);
}
.DesignGrid h2{font-size:24px;}

.DesignSlides{
 display:inline-flex;
 flex-direction:row;
 flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 max-width:fit-content;
}

.DesignImages{
 display:inline-flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 flex-wrap:nowrap;
 margin:10px;
 
 overflow:hidden;

/* background-image:url(Assets/Txtrs/stickyNote.png);
 background-size:100%;
 background-repeat:no-repeat;
 background-position:center; */
}
.CaptionText{
 text-align:center;
 width:fit-content;

 z-index:90;
 
}
.DesignImages img {max-height:300px;width:fit-content;padding:5px;}
.DesignImages img:hover {background:#efea4a;cursor:url(Assets/Cursors/handhover.png),pointer;}

.FinalProduct {
  display:block;
  overflow:hidden;
  margin:2%;
}
.FinalImage {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:2%;
  margin:2%;
  filter:drop-shadow(5px 7px 8px #140a31);
  background-image:url(Assets/Txtrs/pexels-ron-lach-10526896.jpg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
}
.FinalProduct img{
  max-width:100%;
}
.FinalProduct h2{text-decoration:underline;}


.AniExample {
  display:inline-flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-evenly;
  width:100%;
  }

.Example{
  margin:5px;/*padding:25px;*/ 
}

.Example :hover {
   filter:drop-shadow(3px 5px 4px #140a31);
   cursor:url(Assets/Cursors/handhover.png),pointer;
   translate:2px 2px;
}
.Example img:hover {
   filter:drop-shadow(0px 0px 0px);
   cursor:url(Assets/Cursors/handhover.png),pointer;
}
.Example img {
  max-width:600px;
  padding:40px;
  background-image:url(Assets/Txtrs/cardStack_02.png);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(5px 7px 8px #140a31);}

/*GRAPHICS*********************************************************************/
.GraphicsGrid {
 padding:30px;
 
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:flex-start;
  
 background-image:url(Assets/Txtrs/cardStack_02.png);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(5px 7px 8px #140a31);
}
.GraphicImages {
  display:flex;
  padding:2%;
  }
.Buttons {
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  align-items:center;
     }
.Buttons button{font-family:"Handwriting";background:none; border:none;}
.Buttons button:hover{background:#efea4a; border-radius:5px;}

.GraphicImages img{width:100%;
}

.Animation{
 margin:3%; 
}
.TopAni{
display:flex;
 flex-direction:row;
 justify-content:center;
 align-items:center;
 margin-top:3%;
 background-image:url(Assets/Txtrs/pexels-arina-krasnikova-7002683.jpg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(5px 7px 8px #140a31);
}
.TopAni p{
  font-family:"Reg";
  font-weight:bold;
  margin:5px;
  padding:60px;
  background-image:url(Assets/Txtrs/rippedpaper.png);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  }
.TopAni img{margin:5px; padding:10px;}
.scriptEx{
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
}
#AEScript {
  margin-top:1%;
  max-width:90%;padding:40px;
  background-image:url(Assets/Txtrs/pexels-arina-krasnikova-7002683.jpg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(5px 7px 8px #140a31);}