@charset "UTF-8";

/* Basic typographical properties for my documents (except index) */
html {
    font-family: "Montserrat";
    line-height:1.4;
    font-size: 120%;
    background-color: lightgray;
    overscroll-behavior-y: none;
}

h1 {
    text-decoration-line: underline;
    text-align: center;
}

h3 {
    line-height: 0.9;
}

/* DROPDOWN MENU STUFF */
/* this is the whole dropdown navigational menu */
#topNav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position:fixed;
    width: 100vw;
    align-items: center;
}

/* This is the button which triggers the menu when hovered */
#navButton {
    margin: 0;
    padding: 0;
    width: 150px;
    height: 30px;
}

/* This is my list of links */
#topNav ul {
    list-style: none;
    margin: 0;
    padding: 0 5px;
    display: none;
    position: absolute;
    background-color: whitesmoke;
    border: 1px solid black;
}

/* This is my list items containing the links */
#topNav ul li {
    padding: 5px 5px ;
    display: block;
    width: 100%;
}

/* These are the links themselves */
#topNav ul li a {
    text-decoration: none;
    color:black;
    padding: 10% 0;
    margin: 0;
    display: block;
    width: 100%;
    text-align: center;
}

/* These three rules allow for some feedback on hovering */
#topNav ul li:hover {
    background-color: #ddd;
}

#navButton:hover + ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom: 20px;
}

#topNav ul:hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom: 20px;
    
}
/* END DROPDOWN MENU STUFF */

/* The next two rules could probably have been combined but I won't mess with it now. */
main {
    display:block;
    margin: 0px 10px;
    padding-top: 45px;
    box-sizing: border-box;
}

.internalPage {
    background-color: white;
}

footer {
    line-height: 0.8;
    text-align: center;
    background-color: lightgray;
    padding: 15px 0px 5px;
}

/* Some formatting for my Reception page */
#userReviews {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
}

#userReviews>h2 {
    display:block;
    width: 100%;
    margin: 0;
    padding: 0;
}

#reviewForm select {
    width: 75px;
}

#reviewForm button {
    width: 200px;
}

.userReview {
    display: block;
    width: 85%;
    margin: 1% 3%;
    padding: 5px;
    border: 1px solid rgb(81, 81, 81);
}

.userReview>img {
    height: 25px;
}

#newUserReview {
    display: none;
}

/* This stuff will apply to my purchase page as well. */
form {
    display: flex;
    flex-direction: column;
}

fieldset {
    display: flex;
    flex-direction: column;
}

form button {
    display: block;
    align-self: center;
    margin: 2dvh;
}

input {
    width: 60%;
}

select {
    width: 60%;
}

textarea {
    width: 80%;
}

/* Some mediaqueries to make my forms look ok on mobile */
@media screen and (min-width: 640px){
    input {
        width: 384px;
    }
    
    select {
        width: 384px;
    }
    
    textarea {
        width: 512px;
    }

    .userReview {
        width: 40%;
    }
}

/* The topNav was getting cut off on small screens in landscape mode, this fixes it at least on my device. */
@media screen and (orientation: landscape) and (max-height: 450px){
    #topNav ul {
        height: 80dvh;
        overflow-y: scroll;
        overflow-x: hidden;
        overscroll-behavior: none;
    }
}