/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: "Workbench"; 
    src: url("/Fonts/Workbench-Regular-VariableFont_BLED,SCAN.ttf") format("truetype");
}

@font-face {
    font-family: "VT323"; 
    src: url("/Fonts/VT323-Regular.ttf") format("truetype");
}

/* these are variables that are being used in the code
these tended to confuse some people, so I only kept 
the images as variables */
:root {
  --header-image: url('https://yepyep.neocities.org/Header%20Images/Bob%20painting%20logo.png');
  --blog-header-image: url(Header%20Images/Logo%20About%20Me%20Header.png);
  --body-bg-image: url('Background grey.png');
}

* {
  box-sizing: border-box;
}

/* CDR code*/
div #cdr {
  background-image: url('Misc/CDR case.png');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto 12px auto;

}
 
#cdr table{
  font-family: "VT323";
  text-align: center;
  background-color: transparent;
  margin: 23px 19px 23px 36px;
}
/* End of CDR*/

/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */

#flex {
  display: flex;
}

#spotlightGrid {
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 30px 300px 30px 300px;
  grid-auto-flow: row;
  gap: 10px;
}

#container {
  max-width: 1520px;
  margin: 0 auto;
}

#navbar {
  height: auto;
  background-image: repeating-linear-gradient(#282828 0px, #282828 2px, #2d2d2d 2px, #2d2d2d 4px);
  width: 100%;
}

/* Top header (page header over image header) | not in use currently, but maybe one day . . .*/
#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: #13092D;
}

#header {
  width: 100%;
  background-color: beige;
  /* header color here! */
  height: 350px;
  /* this is only for a background image! */
  /* if you want to put images IN the header, 
     you can add them directly to the <div id="header"></div> element! */
  background-image: var(--header-image);
  background-size: 100%;
  margin: 0px;
}

#blogHeader {
  width: 100%;
  background-color: beige;
  /* header color here! */
  height: 350px;
  /* this is only for a background image! */
  /* if you want to put images IN the header, 
     you can add them directly to the <div id="header"></div> element! */
 background-image: var(--blog-header-image); 
 background-size: 100%;
 background-position: right top;
  margin: 0px;
}

.box {
  background-image: repeating-linear-gradient(#dbdee0 0px, #dbdee0 2px, white 2px, white 4px);
  padding: 10px;
  border-width: 5px;
  border-style: solid;
  border-color: #FF8D00;
  border-radius: 10px;
  margin-bottom: 12px;
}

.boxs {
  background-color: #9C3D10;
  padding: 10px;
  border: 0px solid #4694E1;
  border-radius: 0px;
  margin-bottom: 12px;
  font-family: "Times New Roman", Times, serif;
  }

.box-black {
  display: flex;
  flex-direction: column;
  padding: 0px;
  border: 0px solid #161616;
  border-radius: 0px;
  align-items: space-between;
  }
  
.box-black img{
  margin: 5px 15%;
  }
  
#attention-o {
 border: 5px solid #FF8D00;
 background-image: repeating-linear-gradient(#dbdee0 0px, #dbdee0 1px, #FF8D00 1px, #FF8D00 4px);
}

#attention-b {
 border: 5px solid #4694E1;
 background-image: repeating-linear-gradient(#dbdee0 0px, #dbdee0 1px, #4694E1 1px, #4694E1 4px); 
}

#attention-r {
 border: 5px solid #e53754;
 background-image: repeating-linear-gradient(#dbdee0 0px, #dbdee0 1px, #e53754 1px, #e53754 4px);
}

#attention-b h1, #attention-o h1, #attention-r h1{
  color: white;
  text-align: center;
}

 #attention-b p,#attention-b h2, #attention-o p, #attention-o h2, #attention-r p, #attention-r h2{
  color: white;
}

body {
  margin: 0;
  background-image: var(--body-bg-image);
  /* you can delete the line below if you'd prefer to not use an image */

}

/* this colors BOTH sidebars
  if you want to style them separately,
  create styles for #leftSidebar and #rightSidebar */
aside {
  width: 300px;
  padding: 20px;
  font-size: smaller;
  /* this makes the sidebar text slightly smaller */
}

/* this is the color of the main content area,
  between the sidebars! */
main {

  flex: 1;
  padding: 20px;

  order: 2;
}

hr {
  color: #e53754;
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: dashed;
  border-width: 2px;
}

 #blog {
  background-image: none;
  border: none;
  flex: 1;
  margin: 0px;
  order: 2;
}

/* if you're using both sidebars, the "order" value
  tells the CSS the order in which to display them.
  left sidebar is 1, content is 2, and right sidebar is 3! */

#leftSidebar {
   order: 1;
}

#rightSidebar {
  order: 3;
}

h1 {
  font-size: 30px;
  color: #e53754;
  font-family: "Workbench";
  margin: 6px auto;
}

h2 {
  font-size: 25px;
  color: #e53754;
  font-family: "Workbench";
  margin: 6px auto;
}

.out-header {
  color: #FF8D00;
  text-align: center;
  text-shadow: 1px 1px 1px black;
  }

p {
  font-size: 22px;
  color: black;
  font-family: "VT323";
  margin: 6px auto;
}

.footerImage {
  position: fixed;
  right: 0;
  bottom: 0;
}

.footerText {
  position: fixed;
  right: 1.3%;
  bottom: 17%;
  width: 17.23%;
  font: 20px 'VT323', monospace;
  color: black;
  background-color: #FFFFCB;
  padding: 10px;
  border: 3px solid black;
  border-radius: 10px;
  line-height: 1.5;
  white-space: pre-wrap; /* allows multi-line text */
  word-wrap: break-word; /* wraps long words */
}

#out-box {
  color: white;
  align-items: space-between;
  }
  
#out-box iframe {
  border: 3px solid white;
  border-radius: 5px;
  padding: 0px;
  margin-right: 6px;
  }

footer {
  background-image: repeating-linear-gradient(#282828 0px, #282828 2px, #2d2d2d 2px, #2d2d2d 4px);
  color: white;
  font-size: 22px;
  font-family: "VT323";
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
}

strong {
  color: #e53754;
}

.explicit {
 animation: glitch 2s steps(100) infinite;
}

@keyframes glitch { 
  0% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0); transform: translateX(0);}
  1% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  2% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  3% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  4% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  5% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0); transform: translateX(5px);}
  6% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  7% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  8% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  9% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  10% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0); transform: translateX(-5px);}
  11% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
  12% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
  13% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
  14% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
  15% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0); transform: translateX(5px);}
  16% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
  17% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
  18% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
  19% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
  20% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0); transform: translateX(0);}
  21% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  22% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  23% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  24% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  25% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0); transform: translateX(5px);}
  26% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);}
  27% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);}
  28% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  29% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  30% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0); transform: translateX(-5px);}
  31% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  32% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  33% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  34% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  35% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px); transform: translateX(5px);}
  36% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
  37% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);}
  38% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  39% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  40% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0); transform: translateX(0);}
  41% { text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime; filter: blur(0);}
  42% { text-shadow: 0 0 0 #0c33f5, 0 0 0 lime; filter: blur(0);}
  43% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
  44% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
  45% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0); transform: translateX(5px);}
  46% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
  47% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
  48% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
  49% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
  50% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0); transform: translateX(-5px);}
  51% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  52% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  53% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  54% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  55% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0.5px); transform: translateX(0);}
  56% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
  57% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
  58% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  59% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  60% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0); transform: translateX(5px);}
  61% { text-shadow: 30px 0 0 red, -30px 0 0 lime; filter: blur(0);}
  62% { text-shadow: 0 0 0 red, 0 0 0 lime; filter: blur(0);}
  63% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
  64% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);}
  65% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0); transform: translateX(-5px);}
  66% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0.5px);}
  67% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);}
  68% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  69% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  70% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0); transform: translateX(0);}
  71% { text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5; filter: blur(0);}
  72% { text-shadow: 0 0 0 red, 0 0 0 #0c33f5; filter: blur(0);}
  73% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  74% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  75% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0); transform: translateX(5px);}
  76% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);}
  77% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  78% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  79% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);}
  80% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0); transform: translateX(-5px);}
  81% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
  82% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);}
  83% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
  84% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);}
  85% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px); transform: translateX(0);}
  86% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
  87% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);}
  88% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
  89% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);}
  90% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0); transform: translateX(5px);}
  91% { text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5; filter: blur(0);}
  92% { text-shadow: 0 0 0 lime, 0 0 0 #0c33f5; filter: blur(0);}
  92% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  93% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  94% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);}
  95% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0); transform: translateX(-5px);}
  96% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  97% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  98% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  99% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
  100% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0); transform: translateX(0);} }

ol {
  list-style-type: decimal;
}

li {
  font-size: 22px;
  color: black;
  font-family: "VT323";
  margin-left: 20px;

  }
  

#navbar ul {
  position: relative;
  display: flex;
  padding: 0;
  margin: 0px 15%;
  list-style-type: none;
  justify-content: space-between;
}

#navbar li {
  padding-top: 0.5%;
}

#navbar li a {
  /* navbar text color */
  font-weight: 800;
  text-decoration: none;
  /* this removes the underline */
}

#navbar li a img{
  width: 100%;
  height: auto;
}

#navbar li a:hover {
  text-decoration: underline;
}

a {
  cursor: pointer;
}  

a:link {
  font-size: 22px;
  color: #FF8D00;
  font-family: "VT323";
  text-decoration: underline;
  }
  
a:link h2, a:link h1{
  color: #FF8D00;
  text-decoration: underline;
  }
  
a:hover, a:hover h2, a:hover h1 {
  color: #4694E1;
  text-decoration: underline;
  }
  
a:visited, a:visited h2, a:visited h1 {
  color:#e53754;
  text-decoration: underline;
  }

label {
  font-size: 22px;
  color: black;
  font-family: "VT323";
  margin: 6px auto;
  }
  
textarea {
  font-family: "Workbench";
  border: 5px solid #e53754;
  border-radius: 10px;
  line-height: 20px;
  padding: 6px;
  margin: 5px auto;
  }
  
Input {
  padding: 4px;
  margin: 5px auto;
  }
    
iframe {
  margin: 6px auto;
  }
  
#textBox Input {
  font-family: "Workbench";
  color: white;
  background: #e53754;
  border-radius: 10%;
  }

#centerBlog{
  background-image: repeating-linear-gradient(#dbdee0 0px, #dbdee0 2px, white 2px, white 4px);
  width: 100%;
  margin: 0px 0px 10px 0px;
  border: 5px solid #4694E1;
  border-radius: 10px;
  padding: 5px 10px;
}
  
#centerBlog h1{
  float: left;
  margin: 0px 0px 10px 0px;
}

#centerBlog h1:hover{
  color: #4694E1;
}

#centerDrop{
  background-image: repeating-linear-gradient(#dbdee0 0px, #dbdee0 2px, white 2px, white 4px);
  width: 100%;
  margin: 0px 0px 10px 0px;
  border: 5px solid #4694E1;
  border-radius: 10px;
  padding: 5px 10px;
}
  
.collapsible {
  font-size: 25px;
  color: #e53754;
  font-family: "Workbench";
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
}

.active, .collapsible:hover {
  color: #4694E1;
}

.contentBlog {
  display: none;
  overflow: hidden;
  text-align: left;
  text-indent: 30px;
  line-height: 1.5;
}

.contentReview {
  display: none;
  overflow: hidden;
  text-align: left;
  line-height: 1.5;
}