/*
doctype: css
title: main.css
author: clif high
domain: halfpasthuman.com
incept date: 04.16.2019
last change: 05.05.2019
purpose: web site presentation
related: index.html, app.js

current implemenation  <2020-06-25> 10:52:39 
putting in new design for web site

fixed position - middle of screen thumb nav menu
 <2020-06-25> 10:53:26 
a horizontal list of menu items that can be scrolled on a phone - test this fucker


*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

li {
    display:inline-block;
    font-size:30px;
    padding:5px;
    border: 2px dotted white;
    color:white;
    background-color:black;
   }


.myprimary{
    position: absolute;
    border: 10px solid black;
    width: 100%;
    height: 100%;
    bottom: 0;
    display: block;
    
}

.logo-img{
    display:flex;
    position:absolute;
         border: 2px solid black;
       
         width: 50%;
         margin-left:0;
         background-color: black;
         
       }

.logo-text{
    position: absolute; 
         display: inline-block;
          text-transform: lowercase;
    font-size: 20px;
    border: 5px solid white;
    color: white;
    width: 20%;
    margin-left: 25%;
    background-color:black;
   
   }


.mylogo{
    color: black;
    font-size: 20px;
    margin-top: 0;
    width: 100%;
    height:100%;
    border: 5px solid white;
    display: block;
   
}

.mymenu{
    position: absolute;
    bottom:0;
     height: auto;
        width: 20%;
       display: inline-flex;
       border: 5px solid black;
       
       right: auto;
       left: 40%;
       background-color:black;
       padding:5px;
       }

  .puresleep{
      position: absolute;
      display: inline;
      font-size:30px;
       border: 30px dotted black;
       top: 10%;
       left:60%;
       color: white;

  }


@media only screen and (max-width: 1000px )
{
    
}




@media only screen and (max-width: 600px) {
    li {
    display:inline;
    font-size:20px;
    padding:5px;
    border: 2px dotted black;
    color:black;
    background-color: white;
    margin: 2px;
    }

    .mybuttons{
        font-size: 20px;
    }
    
    .myprimary{
        border: 5px solid black;
         width: 100%;
         height: 100%;
         margin-left: 0;
       
        }
      

     .mylogo{
         border: 3px solid black;
         width:100%;
         height: 100%;
         margin-left: 0;
         margin-top: 0;
         background-color: white;
         display: flex;
         
                        
    }
    
     .logo-img{
         border: 2px solid white;
         display: block;
         width: 50%;
         background-color: black;
         
     }

    
     .ifrm {
         width:100%;
         height:100%;
     }
     
    .logo-text{
        position: absolute;
        display: inline-flex;
          text-transform: lowercase;
    font-size: 10px;
    margin-left: 40%;
    margin-top:5%;
    border: 8px solid black;
    color: white;
    width: 50%;
    height: auto;
    margin-right: auto;
    background-color:black;
    padding: 10px;
   }

  .mymenu{
        position: absolute;
        display: inline-flex;
        border: 3px dotted black;
        width: 55%;
        margin-left: auto;
        margin-right: auto;
        bottom:0;
        background-color: black;
        font-size:20px;
  }

   .puresleep{
      position: absolute;
       display: inline;
       border: 13px dotted black;
       top:50%;
       right:10%;
       color: black;
       padding: 5px;

  }

}