/*mobile view*/
body{
    margin: 0px;
    background-image:url('https://producezoo.com/all-assets/public_html-subdomain-assets/images/SplashPage1.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:contain;
}

*:hover{
  cursor: url("https://producezoo.com/all-assets/public_html-subdomain-assets/cursors/cursor2.png"), default;
}

.background-div{
  background-color: transparent;
}
.background-div:hover{
  cursor: url("https://producezoo.com/all-assets/public_html-subdomain-assets/cursors/cursor2.png"), default;
}

a:hover{
    cursor: url("https://producezoo.com/all-assets/public_html-subdomain-assets/cursors/cursor1.png"), default;
}

h1{
    font-family: 'Inconsolata', monospace;
    letter-spacing: 3px;/*<--this is only thing different for mobile*/
    font-size:30pt;/*<--this is only thing different for mobile*/
    color: black;
    text-align:center;
}

h1:hover{
    color:magenta;
}

#textlogo{
    position: absolute;
    margin-left:-800px;
}

h2{
    /*font-family: 'VT323', monospace;*/
    font-family: 'Inconsolata', monospace;
    letter-spacing: 2px;
    color: #22B573;
}

#header-wrap{
  z-index:1;
  position: fixed;
  left: 0;
  top: 0;
  background-color:transparent;
  height:64px;
  width:400px;
}

#logo-div{
    z-index:2;
    position: absolute;
    left: 0;
    top: 0;
    height:64px;
    width:800px;
    background-color:transparent;
    
    /*moves logo over for mobile*/
    margin-left:-258px;

}

#main-div{
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /*pushes links down for mobile*/
    margin-top:500px;

}

.pageLink-div{
    flex:1;
}


#logoDiv{
  width:256px;
  height:300px;
  border: 3px solid transparent;
  
  /*mobile border thicknesses*/
  border-width: 6px 6px 3px 6px;
}

#logoIcon{
  width:500px;
  display:block;
    margin:auto;
    margin-top:100px;
   /* for removing the highlight, this may not be good for accesibility */
  -webkit-tap-highlight-color: transparent; 
}

#amoebaDiv{
  width:256px;
  height:300px;
  border: 3px solid transparent;
  
  /*mobile border thicknesses*/
  border-width: 6px 6px 3px 6px;
}

#amoebaIcon{
  width:64px;
  height:64px;
  display:block;
    margin:auto;
    margin-top:50px;
   /* for removing the highlight, this may not be good for accesibility */
  -webkit-tap-highlight-color: transparent; 
}

#amoebaCaption{
    display:block;
    margin-left:3px;
    margin-top: 4px;
    
    text-align:center;
}

#aboutDiv{
  width:256px;
  height:300px;
  border: 3px solid transparent;
  
  /*mobile border thicknesses*/
  border-width: 3px 6px 3px 6px;
}

#aboutIcon{
  width:64px;
  height:64px;
  display:block;
    margin:auto;
    margin-top:50px;
   /* for removing the highlight, this may not be good for accesibility */
  -webkit-tap-highlight-color: transparent; 
}

#aboutCaption{
    display:block;
    margin-left:3px;/*-8*/
    margin-top: 4px;

    text-align:center;
}

#shopDiv{
  width:256px;
  height:300px;
  border: 10px solid transparent;
  
   /*mobile border thicknesses*/
  border-width: 3px 6px 6px 6px;
}

#shopIcon{
  width:64px;
  height:64px;
  display:block;
    margin:auto;
    margin-top:50px;
   /* for removing the highlight, this may not be good for accesibility */
  -webkit-tap-highlight-color: transparent; 
}

#shopCaption{
    display:block;
    margin-left:3px;
    margin-top: 4px;
    text-align:center;
}

#space-div{
  display: block;
  width:20px;
  height:20px;
}

/*computers and tablets*/
@media only screen and (min-width: 600px){
  #main-div{
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /*pushes links down for mobile*/
    margin-top:200px;
  }
  #img1{
    left: 100px;
    top: 30px;
  }
    #foot-div{
        height:0;
        width:0;
        border: none;
    }
    
    h1{
        letter-spacing: 4px;
        font-size:50pt;
    }
    
    h1:hover{
        cursor: url("https://producezoo.com/all-assets/public_html-subdomain-assets/cursors/cursor2.png"), default;
        color: white;
        -webkit-text-stroke: .1px magenta;
    }
  }