/* 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 {
  height: 100%;
}

body {
  background-image: url("images/back.png");
  color: black;
  font-family: Verdana;
  margin: 0px;
  cursor: url(images/cursor1.png), auto;
  animation: cursor 0.75s linear infinite;
}

@keyframes cursor{
    0% { 
        cursor: url(images/cursor1.png), auto;
    }
    16% { 
        cursor: url(images/cursor2.png), auto;
    }
    32% { 
        cursor: url(images/cursor3.png), auto;
    }
    48% { 
        cursor: url(images/cursor4.png), auto;
    }
    64% { 
        cursor: url(images/cursor5.png), auto;
    }
    80% { 
        cursor: url(images/cursor6.png), auto;
    }
}

.grow { 
  transition: all .1s ease-in-out; 
}

.grow:hover { 
  transform: scale(1.1); 
}

#mainbody {
  background-color: #851cfc;
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  min-height: 100vh;
}

#leftside {
  width: 20%;
  border-style: solid;
  border-color: #000000;
}

#rightside {
  background-color: #000000;
  width: 80%;
}

#shadowling {
  width: 100%;
}

#lingtextbox {
  padding-left: 0.5vw;
  padding-right: 0.5vw;
}

#menutextbox {
  padding-top: 2vw;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
}

#menutabbox {
  width: 100%;
  padding-top: 0.7vw;
  float: right;
}

#lingtext {
  width: 100%;
}

#menu {
  width: 100%;
}

#menutab {
  width: 90%;
  float: right;
}

#portrait {
  padding: 1.5vw;
}

#logobox {
  padding: 2vw;
  padding-bottom: 5vw;
}

#logo {
  width: 100%;
}



#gif1 {
  position: absolute;
  width: 20vw;
}

#carrow {
	height: 22vw;
	justify-content: center;
    align-items: center;
	display: flex;
}

#carrowtall {
	height: 25vw;
	justify-content: center;
    align-items: center;
	display: flex;
}

#carblockL {
	width: 50%;
	float: left;
	display: flex;
	flex-direction: column;
}

#carblockR {
	width: 50%;
	float: right;
	display: flex;
	flex-direction: column;
}

#carimage {
	width: 80%;
	margin: auto;
}

#craigimage {
	width: 27%;
	margin: auto;
}

#pricetag {
	width: 7vw;
	position: absolute;
	margin-top: -2vw;
	margin-left: 16vw;
}

#pricetagin {
	width: 7vw;
	position: absolute;
	margin-top: 1vw;
	margin-left: 14vw;
}

#cartext {
	color: #00ff00;
	-webkit-animation: rainbow 5s infinite; 
	text-align: center;
	font-family: impact;
	font-size: 1.5vw;
	margin: 0.8vw;
}

@-webkit-keyframes rainbow{
  0%{color: orange;}  
  10%{color: purple;} 
  20%{color: red;}
  30%{color: CadetBlue;}
  40%{color: yellow;}
  50%{color: coral;}
  60%{color: lime;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
  100%{color: orange;}
}

#cardesc {
	color: #ffffff;
	text-align: center;
	font-family: impact;
	font-size: 1vw;
	margin: 0;
}

#fireblock {
	width: 100%;
	display: flex;
}

#fireimage {
	width: 80%;
	margin: auto;
	margin-top: -1vw;
	margin-bottom: 1vw;
}




#videoContainer {
	margin: 0px auto;
	width: 70%;
	border: 10px #ff5dd6 solid;
}

#videoElement {
	width: 100%;
	background-color: #666;
	filter: saturate(500%) contrast(300%);
}

* {
	box-sizing: border-box;
}