* {box-sizing: border-box; margin: 0px}
body {background-color: #005159; font-family: trade-gothic-next, sans-serif; font-weight: 300; font-style: normal;}

/* header */
.topbar {background-color: #014947; padding: 10px; padding-left: 0px; color: white; display: flex; height: 50px;  letter-spacing: 0.05em; width: 100%}
#h1bar {width: 70px; height: 3px; background-color: white; margin-top: 15px}
#title {margin-left: 15px;}
.topbar a {margin-top: 8px; margin-left: 10px; text-decoration: none; color: white;}
#about:hover {color: lightgray}

/* body layout */
.content {display: flex; width: 100%}
.images {display: grid;}
.imgbox img {width: 100%; margin: auto; margin: 25px 0px}
.imgbox {width: 30%; margin-left: 57%;}
.buttonbox {display: grid; width: 15%; margin-left: 10%; position: absolute;}

/* button styling*/
button {width: 100%; background-color: white; height: 60px; border: none; outline: none; border-radius: 100px; color: #005159; font-family: trade-gothic-next, sans-serif; font-weight: 400; font-style: normal; font-size: 25px; text-align: center; cursor: pointer;}
.buttondiv {height: 195px; padding-top: 72.5px; margin-top: 25px; margin-bottom: 25px;}


/* about page */
.content p {width: 100%; text-align: center; color: white; margin-top: 70px}


@media all and (orientation: landscape) {
    /* header */
    #h1bar {flex: 5%; min-width: 5%}
    #title {flex: 87%; min-width: 87%}
    #about {flex: 8%; min-width: 8%}
    
    /* about page */
    .content p {flex: 100%; min-width: 100%}
    
    /* body layout */
    .images {flex: 50%; min-width: 50%}
    .buybuttons {flex: 50%; min-width: 50%}
}

@media all and (max-width: 960px) {
   /* header */
    .topbar {width: 100%}
    #h1bar {flex: 10%; min-width: 10%; margin-top: 12px}
    #title {flex: 75%; min-width: 75%; margin-left: 5px; font-size: 20px}
    #about {flex: 15%; min-width: 15%; margin-left: 0px; margin-top: 4.5px}
    
    /* body layout */
    .images {flex: 100%; min-width: 100%;}
    .buybuttons {flex: 100%; min-width: 100%; position: absolute}
    .imgbox {margin: 25%; margin-top: 0px; width: 50%}
    .buttondiv {height: 190px; width: 150px; padding-top: 70px; margin-top: 25px;}
    button {font-size: 20px; background-color: hsl(0, 0%, 100%, 0.8)}
    .buttonbox {margin-left: 30%; width: 50%}
    
    /* about page */
    .content p {flex: 100%; min-width: 100%; margin-top: 30px}
}