@font-face {
font-family: 'atkinson';
src: url('../fonts/atkinson.eot');
src: url('../fonts/atkinson.eot?#iefix') format('embedded-opentype'),
      url('../fonts/atkinson.woff') format('woff'),
      url('../fonts/atkinson.ttf') format('truetype'),
      url('../fonts/atkinson.svg#atkinson') format('svg');
      font-weight: normal;
      font-style: normal;
    }

body {background-color:black;color:white;font-family:atkinson;background-image:url(img/bg-mushroom.png);}
p {white-space: pre-line; margin:0;}
a:-webkit-any-link { text-decoration:none; }
a-webkit-any-link { text-decoration:none; }

.main-window {
  background: #1c508a;
  width: 95%;
  margin: 0.5em auto;
  overflow:auto;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom;
  background-image: url(img/coral.png);
}

.main-wrapper {margin: 0 auto 0;}


.link-wrapper {
    border: 4px solid white;
    background-color:#0c0d13;
    display:flex;
    justify-content: space-around;
}

.full .link-wrapper{flex-direction: row;}  
    
.nav-link {
    text-align:center;
    color:white;
    font-size: 2em;
    margin: 0 0.25em;
}

.nav-link:hover {color:grey;cursor:pointer;}

.top {
  display: flex;
  margin-bottom: 0;
  min-height: 40vh;
  flex-direction:column;
  }
  
.full .top{flex-direction:column;margin:0;} 

.navigation {
  width: 100%;
  left:0;
  flex-grow:1;
}

.top-center {flex-grow:1}

#topFull {
  font-size:1.25em;
  border-left:4px solid white;
  border-right:4px solid white;
  background-color:#0c0d13;
  height:100%;
  min-height: 400px;
  min-width:60%;
  margin-top: auto;
  flex-grow:1;
  padding:1em;}

#slugFull {
  border-left:4px solid white;
  border-right:4px solid white;
  height:100%;
  min-height: 400px;
  min-width:70%;
  margin-top: auto;
  flex-grow:1;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:bottom;
  background-image:url(img/slug-2.png);
  cursor:pointer;}
  
.animate-slug {
  animation: blink .3s infinite;
  -webkit-animation-iteration-count: 7;}
  
  
@keyframes blink { 
  
  0% { background-image:url(img/slug-1.png); }
  50% { background-image:url(img/slug-1.png); }
  50.01% { background-image:url(img/slug-2.png); }
  100% { background-image:url(img/slug-2.png); }
  
}

        
.text-box {
  text-align:left;
  font-size:2em;
  color:white;
  background:#0c0d13;
  width: 100%;
  margin: auto;
  border: 4px solid white;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  min-height: 150px;
  cursor:pointer;
}


#slugPortrait {
    width: 100px;
    height: 100px;
    float: right;
    margin: 0;
    background-repeat:no-repeat;
   background-size:contain;
  background-image:url(img/slug-head-2.png);
  cursor:pointer;}
  
.animate-slug-head {
  animation: blink-head .3s infinite;
  -webkit-animation-iteration-count: 7;}
  
  
@keyframes blink-head { 
  
  0% { background-image:url(img/slug-head-1.png); }
  50% { background-image:url(img/slug-head-1.png); }
  50.01% { background-image:url(img/slug-head-2.png); }
  100% { background-image:url(img/slug-head-2.png); }
  
}

.conversation {margin:0.5em;}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

@media screen and (min-width: 1100px) {
  .main-window {
  width:40%;
  background-size: contain;
  
    border: solid black;
    border-width: 32px 8px 8px;
    padding: 16px;
    margin: 1em auto;
    box-sizing: border-box;
    border-radius: 5px;
  }
.main-wrapper {width: 80%;}
.top{flex-direction:row;
    align-items: flex-end;}
.home .link-wrapper{flex-direction: column;
    width: 80%;
    margin: 1em auto;}
    
    #slugFull {
  border-left:0;
  border-right:0;
  margin-right: 0.5em;}
}