/*CSS Document for codePetersen site by Brandon Petersen 2021*/

body{margin: 0;
background-color: #fffbff;
background-image: url("images/retrobg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;}
    
.topnav{
background-color: #E7FF00;
position: fixed;
width: 100%;
top: 0;
padding-top: 10px;
padding-bottom: 10px;
z-index:1;}

.topnav li{display: inline;}

.topnav a {
text-decoration: none;
color: #2f2d2e;
font-family: arial black;
padding: 2px 10px;}

.topnav a{float: left;}

.topnav a:hover{
background-color: #FB48C4;
color: #2f2d2e;
transform: rotate(-5deg);}

.topnav .icon{display: none;}

.pagebox {
width: 70%;
margin: auto;
max-width: 900px;
background-color: #fffbff;
background-image: url("images/paperbg.jpg");
background-size: 100% auto;
margin-bottom: 100px;
}

section{
	margin: 10px;
}

header{width: 70%;
margin: auto;
max-width: 900px;
padding-top: 100px;
padding-bottom: 10px;}

h2{font-family: arial black;
color: #2f2d2e;
float: left;
clear: both;
}

.intrographic{
	text-align: center;
}

.intrographic img{
	width: 50%;
}

.party{
font-family: arial black;
color: #2f2d2e;}

h2:hover {background-color: #E7FF00;
transform: rotate(2deg);
transform-origin: left;
color: #2f2d2e;}

article p{clear: both;
font-family: verdana;
color: #2f2d2e;}


article{padding-top: 20px;}


.picpar{text-align: center;}
.articleimg{width:40%;}

.articleinfographic{width: 60%;}

.blogpic{width:30%; height:auto;}

.menu3 li{	list-style-type: none;}

.menu3 li a{font-family: arial black;
color: #0fa0fa;
}

.menu4 li{	list-style-type: none;}

.menu4 li a{font-family: arial black;
color: #0fa0fa;}

footer{

width: 100%;
bottom: 0;
background-color: #0098ff;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
color: #E7FF00;}

footer nav a{
text-decoration: none;
color: #E7FF00;
font-family: arial black;
padding: 3px;}

footer p{ font-style: italic;
font-size: 10px;}

.menu2:hover{
background-color: #f8f32b;
color: #2f2d2e;}


li{font-family: verdana;
color: #2f2d2e;}

dl dt{font-family: verdana; color: #2f2d2e;}

hr{clear: both;
border-bottom: none;
border-top: 6px dashed #2f2d2e;
border-left: none;
border-right: none;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

* {
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}


.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}


@viewport{
zoom: 1.0;
width: extend-to-zoom;}

@-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;}

@media screen and (max-width: 768px), screen\0{
header{width: 90%;
margin: auto;}

header{
	width: 90%;
}

.pagebox{
	width: 90%;}

.topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

.topnav{position: relative;
float: left;}

.pageboxsocial{width: 90%;}

.intrographic img{
	width: 100%;
}


  
h2:hover {background-color: #fbdd5b;
transform: rotate(0deg);
transform-origin: left;
width: 100%;
color: #2f2d2e;}

.articleimg{width: 100%;}


.articleinfographic{width: 75%;}

.articleprofilepic{width: 50%;}

footer{position: relative;
float: left;}

 .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 10px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .topnav a:hover{
transform: rotate(0deg);}



.fling-minislide {width: 100%;
	padding-bottom: 85%;}

.articleinfographic{width: 100%;
height: auto;}

.socialpagebox{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

footer{margin-top: auto;}


	.column{flex: 50%;
	max-width: 50%;}
}



@media (max-width: 600px) {
		.column{
		flex: 100%;
		max-width: 100%;
	}
}