/* 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." */
html {
}
body {
  
  background-image: url("Misc/TILED Background.png");
  background-repeat: repeat;
  background-attachment: fixed; 
  font-family: Verdana;
  margin:    0 auto;
  max-width: 900px;
  
}

#rightImg {
  float: right; 
  margin: 5px; 
}

#leftImg {
  float: left; 
  margin: 5px; 
}

#cookieConsent {
  
  background-color: yellow;
  border: 4px solid red;
  padding: 12px;
  margin: 12px;
  position: fixed;
  bottom:0%;
  left: 0%;
  z-index: 999;
}

#articleImage {
  font-size: 12px;
  width: 50%;
  min-width: 300px;
}
.copyRight:before {
  content: 'Copyright 2021-2024 Eri "Godahl" Drury, All Rights Reserved --- Contact: Godahlian@gmail.com';
}
h3 {
  margin: 20px;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(1000px, 0, 0); /* The image width */
  }
}


@media screen and (max-width: 480px) {
      #characterImage {
    
      width: 50%;
      max-width: 200px; 
    }
    
    #charactersGoHere {
      height:auto;
      width: 100%;
      min-width: 308px;
    }
      #cardGameIllustration {
        min-width: 100%;
        width: 100%;
      }
      #blogExitLink {
      color: white;
      position: fixed;
 
    }

    #fullWindow {
    	  display: block;
      }
      #movie {
        width: 100%;
      float: none;
      display: block;
    }
    #chatLog {
      float: none;
      display: block;
    }
    #fullWindow {
      align-items: center;
    }
    
    #wCChatWindow {
      text-align: left;
      overflow: auto;
      background-color: white;
      width: 80%;
      height: 310px;
      border: 4px solid green;
      padding: 25px;
      margin: 0;
    }

    #chatWindow {
    text-align: left;
      overflow: auto;
      background-color: white;
      width: 90%;
      max-width: 315px;
      height: 250px;
      border: 4px solid green;
      padding: 25px;
      margin: 5px;
    }

    #commentBox {
      width: 98%;
      padding: 0;
      margin: 0;
    }
    
    #moviePanel {
      height: auto; 
      width: 100%;
      min-width: 375px;
      
    }
    
    .FSEbutton {
      height:auto;
      width: 32%;
      min-width: 60px;
      
    }
    
    #textGoesHere {
	    font-size: 13px;
    }
    

}

@media screen and (min-width: 480px) {
      #characterImage {
  
      width: 200px; 
      float:left
    }
    #notOnBrowser {
      display: none;
    }
    #charactersGoHere {
      height:auto;
      width: 62%;
      min-width: 308px;
    }
    
    #characterSlot {
      display: flex;
     justify-content: center; 
     align-items: center;
    }
    #blogExitLink {
      color: white;
      position: fixed;
      left: 50%;
      margin-left: -250px; /* Negative half of width. */
    }
      #notOnMobile{
        display: none;
      }
  
  
      #movie {
      float:left;
      display: inline;
      margin: 0;
      padding: 0;
    }

      #chatLog {
        float:left;
        display: inline;
        margin: 0;
        padding: 0;
      }
	  
	  #webcomicChat {
		  margin: 0;
        padding: 0;
	  }
  
  #wCChatWindow {
      text-align: left;
      overflow: auto;
      background-color: white;
      width: 50%;
      height: 200px;
      border: 4px solid green;
      padding: 25px;
      margin: 0;
    }
  
      #chatWindow {
      text-align: left;
      overflow: auto;
      background-color: white;
      width: 425px;
      height: 310px;
      border: 4px solid green;
      padding: 25px;
      margin: 0;
    }

    #commentBox {
    	margin: 0;
    	padding: 0;
    	width: 475px;
    }

    #chatInput {
    	margin: 0;
    	padding: 0;
	
    }
    
    #moviePanel {
      height: auto; 
      width: 100%; 
      max-width: 408px;
    }
    
    #startGameIcon {
      cursor: url("Misc/pickpocketcursor.png"), pointer;
    }
    
    #clickToCheckIn {
      cursor: url("Misc/pickpocketcursor.png"), pointer;
    }
    
    .FSEbutton {
      height:auto;
      width: 12%;
      min-width: 60px;
      cursor: url("Misc/pickpocketcursor.png"), pointer;
    }
  
  
  
}


#submitButtonForWCChatbot {
  background-color: #ffcccb;
  font-size: 15px;
  padding: 10px 24px;
  border-radius: 8px;
  color: black;
  border: 2px solid #4CAF50;
  transition-duration: 0.4s;
  width: 25%;
}

#submitButtonForWCChatbot:hover {
  background-color: white;
  color: red;
  }

#submitButtonForChatroom {
  background-color: #ffcccb;
  font-size: 15px;
  padding: 10px 24px;
  border-radius: 8px;
  color: black;
  border: 2px solid #4CAF50;
  transition-duration: 0.4s;
  width: 100%;
}

#submitButtonForChatroom:hover {
  background-color: white;
  color: red;
  }
  
  #hideChatForChatroom {
  background-color: #ffcccb;
  font-size: 15px;
  padding: 10px 24px;
  border-radius: 8px;
  color: black;
  border: 2px solid #4CAF50;
  transition-duration: 0.4s;
  width: 100%;
  }
  
  #hideChatForChatroom:hover {
  background-color: white;
  color: red;
  }

 #restoreChatForChatroom {
 background-color: #ffcccb;
  font-size: 15px;
  padding: 10px 24px;
  border-radius: 8px;
  color: black;
  border: 2px solid #4CAF50;
  transition-duration: 0.4s;
  width: 45%;
 }
 
 #restoreChatForChatroom:hover {
  background-color: white;
  color: red;
  }

#spoiler {
  color: black;
  background-color: black;
  }
  
#spoiler:hover {
  color: white;
}

#box2 {
  
  background-image: url("Misc/TILED Background light green.png");
  background-repeat: repeat;
  width: 75%;
  min-width: 320px;
  border: 4px solid green;
  padding: 12px;
  margin: 12px;
}

#blackBox {
  background-image: url("Misc/TESTStreeBackground.png");  
  background-size: cover;
  width: auto;
  border: 4px solid green;
  padding: 12px;
  margin: 12px;
  color: white;
}

#redBox2 {
  
  background-color: pink;
  background-size: cover;
  width: 75%;
  min-width: 320px;
  border: 4px solid red;
  padding: 12px;
  margin: 12px;
}

#alertBox2{
  
  background-color: yellow;
  background-size: cover;
  width: 75%;
  min-width: 320px;
  border: 4px solid red;
  padding: 12px;
  margin: 12px;
}

#blueBox2 {
  
  background-color: #C1E1EC;
  background-size: cover;
  width: 75%;
  min-width: 320px;
  border: 4px solid blue;
  padding: 12px;
  margin: 12px;
}

#grayBox2 {
  
  background-color: #D3D3D3;
  background-size: cover;
  width: 75%;
  min-width: 320px;
  border: 4px solid black;
  padding: 12px;
  margin: 12px;
}

#box {
  background-image: url("Misc/TILED Background light green.png");
  background-repeat: repeat;
  width: auto;
  border: 4px solid green;
  padding: 12px;
  margin: 12px;
}
#redBox {
  background-color: pink;
  width: auto;
  border: 4px solid red;
  padding: 12px;
  margin: 12px;
}

#grayBox {
  background-color: #D3D3D3;
  width: auto;
  border: 4px solid black;
  padding: 12px;
  margin: 12px;
}

#blueBox {
  background-color: #C1E1EC;
  width: auto;
  border: 4px solid blue;
  padding: 12px;
  margin: 12px;
}

#alertBox {
  background-color: yellow;
  width: auto;
  border: 4px solid red;
  padding: 12px;
  margin: 12px;
}

#scrollBox {
  background-color: #CDFFCD;
  border: 4px solid green;
  overflow:auto;
  color: black;
  background-size: cover;
  width: auto;
  min-width: 220px;
  height: 320px;
  padding: 12px;
  margin: 12px;
}




#redFont {
	color: red;
	white-space: nowrap;
}

#blueFont {
	color: blue;
	white-space: nowrap;
}

#hideThis {
	display: none;
}

#information {
	display: block;
}

#playScreen {
		position: relative;
	}
	
	#levelUpIcon {
		position: absolute;
		top: 5%;
		left: 35%;
		transform: translate(-35%, -5%);
	}
	
	#textGoesHere {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-family: "Times New Roman", Times, serif;
	}
	
	#winsCounter {
		clear: none;
		float: left;
		display: inline;
	}
	
	#healthCounter {
		clear: none;
		display: inline;
	}
	
	#levelCounter {
		clear: none;
		float: right;
		display: inline;
	}

.textLimit {
  font-family: Verdana;
  font-size: 1em;
}


#oarList {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
  background-color: #FFE9EC;
  
  color: #583413;
  position:fixed;
}

#oarListItems {
  display: inline;
}

#backgroundScroller {
    background-image: url("Misc/TILED Background.png");
    background-repeat: repeat;
  animation: slide 60s linear infinite;
}

#newestPageButton {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#firstPageButton {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#backPageButton {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#nextPageButton {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#newestPageButton2 {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#firstPageButton2 {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#backPageButton2 {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#nextPageButton2 {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#imgClickAndChange {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
#backToHomePage {
  color: #5E1C47;
}
#link {
  color: #5E1C47;
}
#blogExitLink {
  color: white;
  position: fixed;
}
#MegacincinnatiStrip {
  max-width: 2000px;
}
#navbar {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: -50px; /* Hide the navbar 50 px outside of the top view */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
  
  #twitchWindow {
	position: relative;
	top: 0;
	left: 0;
  }
  
  #pngTuber {
	position: absolute;
	top: 20px;
	left: 269px;
  }
#moviePanel {
  cursor: url("Misc/pickpocketcursor.png"), pointer;
  position: relative;
	top: 0;
	left: 0;
}
#blankLink {
  cursor: default;
  color: black;
  text-decoration: none;
}
#zineInnerLink {
  color: black;
}
#monte {
  cursor: url("Misc/pickpocketcursor.png"), pointer;
}
.pointerChanger{
  cursor: url("Misc/pickpocketcursor.png"), pointer;
}
.infScrollContainer {
  display: flex;
  flex-wrap: wrap;
}
.imgClickAndChange {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
.pickpocketClick {
    cursor: url("Misc/pickpocketcursor.png"), pointer;
}
.redBackground{
  background-image: url("Misc/TILED Background red.png");
}

.grayBackground{
  background-image: url("Misc/TILED Background gray.png");
}

.yellowBackground{
  background-image: url("Misc/TILED Background yellow.png");
}
.pinkBackground{
  background-image: url("Misc/TILED Background pink.png");
}
.blueBackground{
  background-image: url("Misc/TILED Background Blue.png");
}
.rainbow {
  background-image: none;
  animation: 10000ms ease-in-out infinite color-change;
}

@keyframes color-change {
  0% {
    background-color: #A6F1A6;
  }
  20% {
    background-color:  #FFFE71;
  }
  40% {
    background-color: #FFAD01;
  }
  60% {
    background-color: #ffb6c1;
  }
  80% {
    background-color: #ADD8E6;
  }
  100% {
    background-color: #A6F1A6;
  }
}
.blog{
  overflow: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (min-width: 480px) {
    body.blog{
    background-image: url("Misc/EVIL Background.png");
    background-size: cover;
    background-attachment: fixed;
    overflow: visible;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 480px) {
  body.blog{
    background-image: url("Misc/EVIL Background.png");
    background-size: cover;
    background-attachment: scroll;
    overflow: visible;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.blogPosts{
  
  user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none;
}

textarea {
  resize: none;
}

body.blackBackground{
    background-image: url("https://64.media.tumblr.com/dac4439e8d4c4b558736b1c78fa8ccf2/eb83f9f0553e549b-e5/s540x810/e1a568da2880e65c0d6172ab322054abc34f41a6.pnj");
    background-size: cover;
    background-attachment: fixed;
    
}