html{
  background-color: #aee1e8;
  background-image: url("https://www.transparenttextures.com/patterns/dark-circles.png");
  background-size: 1%;    
}
#bodycontainer { 
  margin: auto;
  width: 1080px;
  background-image: url(images/circles.jpg);   
  background-size: 100.2%;
  background-repeat: repeat-y;
  color: #8888b5;
  font-family: 'CabinetGrotesk';
  text-align: center;
  border: 20px solid #ae7abf;
  position: relative;
}
@font-face {                  
font-family: 'Aber-Mono'; 
src: url(https://humantooth.neocities.org/fonts/Aber-Mono-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
}  
@font-face {                  
font-family: 'CabinetGrotesk';
src: url(https://humantooth.neocities.org/fonts/CabinetGrotesk-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
} 
#header{
  font-family: 'BPnoScript';
  font-size: 64px;
  color: #ae7abf;
}
#img{
  width: 680px;
}

video{
  width: 720px;
} 

#gif{
  width: 600px;
  border: 3px dotted #ae7abf;
}
@font-face {                  
font-family: 'Canarina';
src: url(https://humantooth.neocities.org/fonts/Canarina.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 
@font-face {                  
font-family: 'BPnoScript';
src: url(https://humantooth.neocities.org/fonts/BPnoScript.woff) format('woff');
font-weight: normal;
font-style: normal;
} 
#hcontainer {
  margin: 10px 80px 10px 80px;
  background-color: #aee1e8;
  padding: 10px;
  border: 3px dotted #ae7abf ;
}
#pcontainer {
  margin: 10px 180px 20px 180px;
  background-color: #aee1e8;
  padding: 20px;
  border: 3px dotted #ae7abf;
}