/* (A) FONT */
html, body { font-family: arial, sans-serif; 
height: 100%;
Width:100%;
Margin:auto;

}

#front-main-container{
 height:auto;
    width:100%;
    background-image:url('../img/background.jpg');
    background-size:cover;
   background-attachment: fixed;
   
}

#splash{
    height:100%;
    width:100%;
    background-color:black;
}

.splash-logo{
    margin-left:auto;
    margin-right:auto;
   padding-top:15%;
    
    width:50%;
    color:white;
    text-align:center;
}
.splash-logo img{
    max-width: 100%;
  height: auto;
}
.splash-link{
    float:right;
    color:white;
    padding-right:10px;
    padding-top:10px;
    font-size:20px;
}

.splash-link a{
text-decoration:none;
color:white;

    
}

.feedbox{
    border-color:black;
    border-style:solid;
    border-width:1px;
    margin-right:2%;
    margin-left:2%;
    margin-top:20px;
    
}
.nameline{
    border-bottom-color:black;
    border-bottom-style:solid;
    border-bottom-width:1px;
    height:25px;
    color:white;
    font-weight:bold;
    font-family:helvetica;
    background-color:#51BDFF;
    
    
}

.nameline p{
    padding-left: 5px;
    padding-top: 5px;
    margin: auto;
    width: 50%;
    display: inline-block;
}




.box3 {
    width:20rem;
    height: 20rem;
     box-shadow: 5px 10px 10px black;
	background-color:#eee;
	border-color:black;
	border-style:solid;
	border-width:1px;
    margin-right:5%;
    margin-top:15px;
    margin-bottom:15px;
   display:inline-grid;
    font-family: helvetica;
    font-size: 14pt;
    text-align:center;


}

.center-row{
    width:62%;
    margin-left:auto;
    margin-right:auto;
}
/* (B) PERIOD SELECTOR */
#calPeriod input, #calPeriod select {
  padding: 10px;
  font-size: 1.5em;
  border: 0;
  outline: none;
  cursor: pointer;
}
#calmonth { width: 180px; }
#calyear { width: 100px; text-align: center; }

/* (C) CALENDAR */
#calwrap {
  display: flex;
  flex-wrap: wrap;
}
.calsq {
  box-sizing: border-box;
  width: 14.28%;
  padding: 5px;
}

.calsq.day:hover {
  background-color: darkgray;
}


.calsq.head {
  color: #fff;
  background: #5250da;
  font-weight: bold;
  text-align: center;
}
.calsq.blank, .calsq.day {
  height: 120px;
  overflow-y: auto;
  border: 1px solid #eee;
}
.calsq.blank { background: #f2f2f2; }
.calnum { color: #888; }
.calevt {
  height: 20px;
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calninja { display: none; }

/* (D) EVENT FORM */
#calblock {
  position: fixed;
  top: 0; left: 0;
  z-index: 998;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s;
  opacity: 0;
  visibility: hidden;
}
#calblock.show {
  opacity: 1;
  visibility: visible;
}
#calform {
  z-index: 999;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 320px;
  max-width: 400px;
  background: #fafafa;
  border: 1px solid #ccc;
  padding: 10px;
  width: 320px;
}
#calform label, #calform input, #calform textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  resize: none;
}
#calform label { margin-top: 10px; }
#calformsave, #calformdel, #calformcx {
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 10px 0 !important;
  margin-top: 10px;
}
#calformsave { background: #5250da; }
#calformdel, #calformcx { background: #a22a2a; }

#calendar-container{
    width:75%;
    float: right;
    height: 100%;
    border-style: groove;
    border-width: 2px;
    border-color: black;

}

#posts-container{
    width:75%;
    float: right;
    height: 100%;
    border-style: groove;
    border-width: 2px;
    border-color: black;

}

#feed-container{
    width:75%;
    float: right;
    height: 100%;
    border-style: groove;
    border-width: 2px;
    border-color: black;

}

#settings-container{
    width:75%;
    float: right;
    height: 100%;
    border-style: groove;
    border-width: 2px;
    border-color: black;

}

#friends-container{
    width:75%;
    float: right;
    height: 100%;
    border-style: groove;
    border-width: 2px;
    border-color: black;

}

.news-container{
width:75%;
margin-left:auto;
margin-right:auto;
color:white;
background-color:black;
border-radius:30px;
padding-bottom:10px;
}

.codecount{
    text-align:center;
    padding-top:10px;
}
.code-list{
    
}

.code-box{
   width: 45%;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  
}
.code-box p{
   text-align:center;
}

.news-feed{
   width:90%;
   margin-left: auto;
    margin-right: auto;
    margin-top:30px;
}

.main-container{
    height: auto;
    width:98%;
    display: inline-block;
}

header{
    height:100px;
    text-align: center;
}

.side-container{
    width: 24%;
    height: 100%;
    display: inline-block;
    border-right: 2px groove black;
    
    border-top: 2px groove black;
}

.side-content{
    box-shadow: 5px 10px 10px black;
	background-color:#eee;
	border-color:black;
	border-style:solid;
	border-width:1px; 
	width:20%;
	display:inline-block;
	margin-right:2%;
	margin-left:2.5%;
	margin-bottom:20px;
	height:500px;
	
    
}

.primary-container{
     box-shadow: 5px 10px 10px black;
	background-color:#eee;
	border-color:black;
	border-style:solid;
	border-width:1px;
	width:72%;
	display:inline-block;
height:500px;
	float:right;
}

.double-container{
    box-shadow: 5px 10px 10px black;
	background-color:#eee;
	border-color:black;
	border-style:solid;
	border-width:1px;
	width:43%;
	margin-right:2.5%;
	margin-left:2.5%;
	display:inline-block;
	height:500px;
}


.login-container{
    box-shadow: 5px 10px 10px black;
	background-color:#eee;
	border-color:black;
	border-style:solid;
	border-width:1px;
    padding-bottom:5px;
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

.login-form{
	margin-left:10%;
	padding-top: 20px;

}

.login-form input{
	width: 90%;
	height: 40px;
	margin-bottom: 4px;
	border: none;
	background-color: #fff;
	font-family: arial;
	font-size: 16px;
	color: #111;
	line-height: 40px;


}


.login-form button{
	display: block;
	margin: 0 auto;
	width: 30%;
	height: 40px;
	border: none;
	background-color: #222;
	font-family: arial;
	font-size: 16px;
	color: #fff;
	cursor: pointer;


}

.login-form button:hover{
	background-color: #111;

}

nav{
    width:100%;
        width: 100%;

border-top:whitesmoke;
 border-left-color:transparent;
border-right-color:transparent;
border-bottom:whitesmoke;
   color: white;
border-style: solid;
border-width: 1px;
     text-align: center;

    }
    
      .nav-container{
       top:0;
        margin: auto;
       

    }

    .nav-container a{
        color:#fff;
        text-decoration: none;
        font-weight: bold;
        width:30%;
        padding-bottom: 10px;
        margin-left: 2%;
        padding-left:10px;
        display: inline-block;
        text-align: center;
        padding-top: 10px;
 text-shadow: 
        -1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000; 
    }

    .nav-container a:hover{
        color:#04FF00;
       

    }
    
    
    .middle-container {
     box-shadow: 5px 10px 10px black;
	background-color:#eee;
	border-color:black;
	border-style:solid;
	border-width:1px;
    padding-bottom:5px;
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

.runner{
    text-align: center;
    color: white;
     text-shadow: 
        -1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000; 
		position:relative;
}
    

.side-nav{
line-height: 50px;    
    
}


.side-nav button{
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    color:#000;
    display: block;
    text-align: center;
    font-weight: bold;
    font-family: helvetica;
    border: none;
    background: none;
}


@media only screen and (max-width: 920px){
  .side-container{
    width:35%;
    position: absolute;
    left: -1000px;
        transition: color .3s .15s ease-in;
      z-index: 3;
      background-color: #fff;
       
}
  .main-container{
    display: inline-block;
    width:98%;
    margin-left:1%;
    margin-right:1%;
    
    border-left-style: groove;
    border-left-width: 2px;
}
    
    .mobile-menu-button{
  display: inline-block;
  cursor: pointer;
        margin-left: 50%;
        position: fixed;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #000;
  margin: 6px 0;
  transition: 0.4s;
    z-index: 7;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
    
    #calendar-container{
    width:100%;
   

}

#posts-container{
    width:100%;
    

}

#feed-container{
    width:100%;
    

}

#settings-container{
    width:100%;
   
}

#friends-container{
    width:100%;
    

}
    
}