/* \(^o^)/\(^o^)/\(^o^)/

TABLE OF CONTENTS

    \(^o^)/\(^o^)/\(^o^)/
    

1. Global Styles *<|:-)

2. Typography ('-`). o O (...)

3. Layout   @}-;--'----

4. Components  >_>^^<_<

    
*/



/* *<|:-)(-:|>**<|:-)(-:|>*

 1. Global Styles
 
 *<|:-)(-:|>**<|:-)(-:|>*
 */

@import url('https://fonts.googleapis.com/css?family=Kalam&display=swap');

body{
background-color: #888;
color: #222;
font-family: 'Kalam', cursive;
margin: 0;

min-height: 100%;

display: flex;
flex-direction: column;

}

/* ('-`). o O (...)(...) O o .(`-')

2. Typography 

('-`). o O (...)(...) O o .(`-')
*/


h1{
	font-size: 52px;
	font-weight: bold;
	line-height: 1.2;
}

h2{
	color:#333;
	max-width: 50ch;	
}

p{
	max-width: 60ch;
}

a {
text-decoration: none;
}

a:link {color: #ddd

}

a:visited {
color: #555
}

a:hover, 
a:focus{
color: #fff
}



html{
 height: 100%;
}


/*  @}-;--'----'--;-{@ @}-;--'----

3. Layout   

@}-;--'----'--;-{@ @}-;--'----
*/ 


header{
background-color: #222;
color: #eee;
text-align: center;
padding-bottom: 1em;
padding-top: 1em;
margin-bottom: 1em;
}

.nutshell{
 	margin: 0 auto;
 	width: 80%;
 }
 

 
footer{
 clear: both;
 background-color: #222;
 padding-left: 200px;
 padding-bottom: 10px;
 padding-top: 10px;
 color: #eee;
 text-align: left;
 margin-top: auto;
}
 
/* >_>^^<_< >_>^^<_< >_>^^<_<
 
4. Components  

>_>^^<_< >_>^^<_< >_>^^<_<
*/

img{
 max-width: 100%;
 display: block;
}

figure{
 margin: 0;
 
}

.comicnav{
   display: flex;
   justify-content: center;
}

.comicnav li{
 list-style: none; 
 margin: 0;
 padding: 0;  
 display: inline-block;
 text-align: center;}

.comic{
 position: relative;
}



.ad{
margin: 1em;

}

.logo{
float: left;
margin-top: .5em;
margin-left: 1em;
max-height: 4em;
}

nav ul{
 list-style: none; 
 margin: 0;
 padding: 0;
}

nav li{
display: inline-block;
margin: .5em;
padding: .5em;
}



section{

width: 500px;
}


#portrait {
float:left;
margin-right: 20px;
 }
 
 #apple {
 float: right;
 }
 
.comment{
 background-color: #aaa;
 padding-left: 1em;
 margin-top: 3em;
 display: flex;
 flex-direction: column;
}

.comment__img {
    width: 32%;
    align-self: flex-start;
      
}


.archive{
	list-style: none;
	text-align: center;
	} 


.btn{
	outline: #000 solid 3px;	
	display: inline-block;	
	background-color: #222;
	padding: 1em 2em;
	margin: .5em;
}



.btn-a{
	outline: #000 solid 3px;	
	display: inline-block;	
	background-color: #f06020;
	padding: 1em 2em;
	margin: .5em;
 }

.btn-r{
	outline: #000 solid 3px;	
	display: inline-block;	
	background-color: #18bb26;
	padding: 1em 2em;
	margin: .5em;
 }
 
 .btn-b{
	outline: #000 solid 3px;	
	display: inline-block;	
	background-color: #6080a0;
	padding: 1em 2em;
	margin: .5em;
 }

.btn-m{
	outline: #000 solid 3px;	
	display: inline-block;	
	background-color: #c1a877;
	padding: 1em 2em;
	margin: .5em;
 }

.btn-w{
	outline: #000 solid 3px;	
	display: inline-block;	
	background-color: #c068e0;
	padding: 1em 2em;
	margin: .5em;
 }


 * {
 box-sizing: border-box;
}
 
@media (min width: 30rem){ 

 img{
  max-width: none;
}