/*stop looking at my code!!!!*/

body {
  background-color: white;
  font-family: "DotGothic1x6";
  background-image: url("../img/back_01.png");
	background-position: center;
	background-repeat: repeat-y;
  font-size: 110%;
  margin: 0;
	font-family: "ms Ui gothic";
}

/*Font stuff*/
p {
  margin: 0;
	color: #FF6CBE;
  }
h1 {
	font-family: "Cherry Bomb One", system-ui;
	color:#FF6CBE;
}
.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-style: normal;
}
.cherry-bomb-one-regular {
  font-family: "Cherry Bomb One", system-ui;
  font-weight: 400;
  font-style: normal;
}
.btn {
  font-family: "DotGothic16", sans-serif;
  font-style: normal;
  font-size: 2em;
  text-decoration: underline;
  }
a {
    color:#FF6CBE;
	text-decoration: underline;
}
a:active {
    color:#FF6CBE;
	text-decoration: underline;
}
a:visited {
    color:#FF6CBE;
	text-decoration: underline;
}
.boarder {
  display:block;
  background-image: url("../img/boarder.gif");
  height:3em;
  width:100%;
  float:left;
  }

    /*Nav Bar*/
.nav {
	background:#FEEBFF;
	color: #FF6CBE;
	margin: 0 auto 0 auto;
	border-style: solid;
    border-width: 1px;
    border-color: #FFC5EF;
    border-left-width: 0px;
    border-right-width: 0px;
	margin-bottom: 1.5em;
	text-align: center;
}
.nav ul, li{
  list-style-type: none;
	padding: .1em;
	margin: auto;
	color: #FF6CBE;
	text-decoration: underline;
  }
.nav a {
	color: #FF6CBE;
}
.link1:hover span {
  display: none
}
.link1:hover:before {
  content: "✤home"
}

.link2:hover span {
  display: none
}
.link2:hover:before {
  content: "✤design"
}

.link3:hover span {
  display: none
}
.link3:hover:before {
  content: "✤illustration"
}
.link4:hover span {
  display: none
}
.link4:hover:before {
  content: "✤about"
}

    /*Header*/
.header {
  display: block;
  justify-content: center;
  align-items: center;
  width:100%;
  padding-top: 5em;
  padding-bottom: 1em;
  text-align:center;
  }
.logo img {
  width: 15%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: .5em;
 }
.logo {
  margin-top:5em;
  }
.divider {
  display: block;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 5em;
  }
/*Body*/
.flex {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 auto;
	justify-content: center;
}
.bg {
	background: url("../img/plaid.png");
	border-style: solid;
    border-width: 3px;
    border-color: #FFC5EF;
	border-radius: 4px;
}
.about {
	font-family: "Cherry Bomb One", system-ui;
	font-size: 2em;
	color: #FF6CBE;
	border-style: dotted;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
    border-bottom-size: 1px;
    border-color: #FFC5EF;
	
}
.title {
	background:#FEEBFF;
	color: #FF6CBE;
	margin: 0 auto 0 auto;
	margin-top: 1em;
	border-style: solid;
    border-width: 1px;
    border-color: #FFC5EF;
    border-left-width: 0px;
    border-right-width: 0px;
	text-align: center;
}
.nav p {
	padding-left: 1em;
}
.smallbox {
	border-style: dotted;
    border-width: 2px;
    border-color: #FFC5EF;
	background: white;
	padding: 1em;
	margin: 1em;
}
.poll {
	font-family: "ms Ui gothic";
	background:white;
	border-style: dotted;
    border-width: 2px;
    border-color: #FFC5EF;
	font-size:1.05vw;
	color: #FF6CBE;
}
.pollbutton {
	font-family: "ms Ui gothic";
	font-size:1.05vw;
	padding:0px;
	background: #FEEBFF;
	border-color: #FFC5EF;
}
/*Scroll Box*/
.scrolling-box {
	font-size: 1.1vw;
  background-color: white;
  display: block;
  max-width: 100%;
  height: 15em;
  padding: 1em;
  overflow-y: scroll;
  text-align: center;
  margin-bottom: 1em;
  scrollbar-color: #FFC5EF #FEEBFF;
  scrollbar-width: thin;
}
section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em;
}
/*Footer*/
.footer {
	background: #FEEBFF;
	border-top: solid;
	border-top-color: #FF6CBE;
	border-top-width: 1em;
	margin-top: 2em;
	padding: 1.5em;
	margin-bottom: 0px;
}
.footer p {
	color: #FF6CBE;
	padding: .2em; 
	text-align: center; 
	font-size: 90%;
}
.flex {
	flex-direction: row-reverse;
}
.credits {
	display: flex; 
	justify-content: space-around;
}
/*Single Columns For Mobile*/
@media only screen and (max-width: 1250px) {
	body {
  background-image: url("../img/back_02.png");
		background-size: contain;
}
	.logo img {
  width: 30%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: .5em;
 }  
	.col-md-6 { 
	-webkit-flex: 0 0 70%;
	max-width: 70%;
	}
/*Mobile Body*/
	.flex {
		flex-wrap: wrap;
	}
	.fullwidth {
		-webkit-box-flex:0;
		-webkit-flex:0 0 100%;
		-ms-flex:0 0 100%;
		flex:0 0 100%;
		max-width:100%
	}
	.bg {
		margin-bottom: 2em;
	}
	.poll {
		font-size: 1em;
	}
}
@media only screen and (max-width: 900px) {
	body {
		 background-image: url("../img/back_03.png");
		font-family: "DotGothic16";
	}
	p {
		font-family: "DotGothic16";
	}
	.col-md-12 {
		width: 100%;
		padding: 0px;
	}
	.col-md-7 {
		padding: 0px;
	}
	.col-md-6 {
		-webkit-flex: 0 0 90%;
		max-width: 90%;
		
	}
	.scrolling-box {
		font-size: 1em;
		font-family: "DotGothic16";
	}
	.smallbox {
		padding: .5em;
	}
	.title {
		font-size: 1em;
		font-family: "DotGothic16";
	}
	.credits {
		width: 100%;
		flex-direction: column;
		align-items: center;
	}
	.credits a {
		padding-bottom: 1em;
	}
	.poll {
		font-family: "DotGothic16";
		padding-bottom: 1em;
	}
	.pollbutton {
		font-size: 1em;
		font-family: "DotGothic16";
	}
	.footer {
		max-width: 75%;
	}
	.copyright p{
		font-size: 1vw;
	}
}