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

body, #container {
    min-height: 250vh;
    background-color: white;
    font-family: verdana;
}

.topcontainer, .middlecontainer, .boxes, .bottomcontainer {
    display: flex;
    flex-flow: row wrap;
    
    }
    #leftbox {
        float:left;
        background:gainsboro;
        width:33%;
        height:35vh;
    }
    #middlebox{
        float:left;
        background:darkgrey;
        width:33%;
        height:35vh;
    }
    #rightbox{
        float:right;
        background:gainsboro;
        width:33%;
        height:35vh;
    }
.header {
    min-height: 20vh;
    flex-grow: 1; flex-shrink: 0;
    background-image: url(https://images.unsplash.com/photo-1586830746542-19b25c53497f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=793&q=80);
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
   
}

#mainbutton {
    position: absolute; top: 0px; left: -105px;
    width: 100px; height: 100px;
cursor: pointer;

text-align: center;
}
#phoneframe1, #phoneframe2, #phoneframe3 {
    
    width: 300px; height: 700px;
    position: absolute;
    overflow: hidden;

}
header button {
    position: absolute; top: 4px; right: 12px;
    width: 50px; height: 50px;
    border: 4px outset #222; 
}

nav.mobilemenu li {
    border-bottom: 2px black;
    list-style-type: none;
    height: 56px;

}

nav.mobilemenu a {
    display: block; height: 100%;
    font-size: 35px;
    text-decoration: none;
    line-height: 54px;
    text-indent: .5em;
}
/* ===== unique styles for phone frame #1*/

#phoneframe1 {
    top: 95px; left: 75px;
    width: 375px; height: 790px;
    border-radius: 6px 6px 36px 36px;
}
#phoneframe1 nav.mobilemenu {
    background-color: white;
    width: 100%;
    position: relative;
    transition: left 1s ease-in-out;
}




#phoneframe1 nav.mmclosed {
    position: absolute; top: 60px; left: -600px;
}

#phoneframe1 nav.mmopen {
    position: absolute; top: 60px; left: 0px;
}

#button1 {
    background-image: url(style3.png);
    background-size: 180px;
    background-position: -30px -2px;
}



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

ul li a{
    padding: 10px;
    display: inline-block;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 12vw;
    text-decoration: none;
    text-transform: uppercase;
    color: #262626;
    text-align: center;
    justify-content: center;
    display: none;
    
}
ul li a:hover{
    background-color: black;
    color: white;
}

.nav {
    min-height: 50vh;
    flex-grow: 1; flex-shrink: 0;
    background-color: white;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 4vw;
   text-align: center;
   padding-top: 10rem;
}
.navbar {
    overflow: hidden;
    background-color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
    flex-grow: 1; flex-shrink: 0;
    font-size: 12vw;
    text-align: center;
   padding-top: 10rem;
}
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 4vw;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 4vw;
    border: none;
    outline: none;
    color: black;
    padding: 14px 16px;
    background-color: white;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: black;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 4vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: black;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

.grid_parent {
    
    margin: 24px;
    grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr ;
    gap: 8px;
}

.apt_photos {
display: grid;
}

.misc_practice {
display: inline-grid;
}



.grid_item {
    border: 2px solid black;
    
    min-width: 100px; min-height: 30vh;
}

.apt_photos .grid_item:nth-child(4) {
    border: 2px solid black;
    background-color: #ffc; 
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
    background-image: url(https://images.unsplash.com/photo-1519333485041-cfe73bc11164?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Zm9ycmVzdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400&q=60);
    background-size: cover;
    background-position: center;
}




.main {
    min-height: 50vh;
    background-color: white;
    background-image: url(https://images.unsplash.com/photo-1470137237906-d8a4f71e1966?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
div.item {
    
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 100%;
    min-height: 100vh;
    padding-top: 5vh;
}
img {
    width: 100%;
    height: 30vh;
    background-color: brown;
}
.caption {
    display: block;
    font-size: 2rem;
}


.footer {
    min-height: 20vh;
   background-color: black;
   max-width: 100%;
}
nav {
    color: white;
   
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 3rem;
    padding-bottom: 8vh;
    list-style: none;

}
p {
    font-size: 1rem;
}


.topcontainer .header {
    flex-basis: 100%;
    min-height: 30vh;
}



.middlecontainer .nav {
    flex-basis: 100%;
    min-height: 60vh;
    
}

.middlecontainer .main {
    flex-basis: 100%;
    max-height: 60vh;
}

.bottomcontainer .footer {
    flex-basis: 100%;
    
}
h3 {
    color: white;
    text-align: left;
    margin-left: 25px;
    
    
    
}
h2 {
    font-size: 1rem;
}

@media screen and (min-width: 800px) {
    .topcontainer .header {
        flex-basis: 100%;
        min-height: 25vh;
    }
    
    
    
    .middlecontainer .nav {
        flex-basis: 50%;
        min-height: 50vh;
    }
    
    .middlecontainer .main {
        flex-basis: 50%;
        min-height: 50vh;
    }
    
    .bottomcontainer .footer {
        flex-basis: 100%;
        min-height:25vh;
    }
    ul{
        margin: 0;
        padding: 0;
        display: inline-block;
        text-align: center;
    }
    ul li{
        list-style: none;
        display:inline-block ;
    }
    
    ul li a{
        padding: 10px;
        display: inline-block;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 6vw;
        text-decoration: none;
        text-transform: uppercase;
        color: #262626;
        padding-left: 100px;
}
div.item {
    
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 30%;
    padding-left: 10%;
    padding-top: 20vh;
    
    
    
}

#phoneframe1 {
    display: none;
}

.navbar {
    overflow: hidden;
    background-color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
    flex-grow: 1; flex-shrink: 0;
    font-size: 4vw;
    text-align: center;
   padding-top: 10rem;
}
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 4vw;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 4vw;
    border: none;
    outline: none;
    color: black;
    padding: 14px 16px;
    background-color: white;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: black;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 4vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: black;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }


.grid_parent {
    
    
    grid-template: 1fr 1fr 1fr  / 1fr 1fr 1fr;
    
}
p {
    font-size: 2rem;
}
img {
    width: 100%;
    height: 30vh;
    background-color: grey;
}
.caption {
    display: block;
}
.footer {
    padding-top: 15vh;
}
.icons {

justify-content: center;
width: 50px;
height: 50px;

}
}