body {background-color: DimGrey; font-family: sans-serif; color: white} a {color: orange;} a:hover {color: GreenYellow;} p {font-size: 16px; padding: 10px;} h1 {font-size: 20px;} h2 {font-size: 20px;} h3 {font-size: 16px;} /* For mobile phones: */ @media only screen and (max-width: 768px){ h1 {font-size: 18px;} h2 {font-size: 18px;} } .caption { text-align: center; } /* style for the top menus */ .desktop-top-menu-container { display: flex; gap: 50px; /* spacing between columns */ padding: 10px; } @media (max-width: 768px) { .desktop-top-menu-container { display: none; } } .left { flex: 1; /* takes 1 part */ display: flex; justify-content: center; align-items: center; } .center { flex: 1; /* takes 1 part */ display: flex; justify-content: space-around; /* This evenly spaces items with space around them */ align-items: center; /* centers items vertically */ } .right { flex: 1; /* takes 1 part */ display: flex; justify-content: space-around; /* This evenly spaces items with space around them */ align-items: center; /* centers items vertically */ } .column { padding: 20px; border-radius: 8px; } .button { color: orange; text-decoration: none; border: 2px solid black; border-radius: 10px; padding: 10px; } @media (min-width: 768px) { .mobile-top-menu-container{ display: none; } } @media (max-width: 768px) { .mobile-top-menu-container{ display: flex; gap: 50px; /* spacing between columns */ padding: 10px; padding-bottom: 5px; margin-left: 15px; margin-right: 15px; } } .mobile-top-menu-row1-left { flex: 0.7; /* takes 1 part */ display: flex; align-items: center; } .mobile-top-menu-row1-right{ flex: 1.3; /* takes 1 part */ display: flex; justify-content: center; align-items: center; gap: 15px; } @media (min-width: 768px) { .mobile-top-menu-row2{ display: none; } } @media (max-width: 768px) { .mobile-top-menu-row2{ display: flex; justify-content: space-around; align-items: center; padding: 10px; padding-top: 5px; } } .social-icon { height: 20px; width: 20px; } /* For mobiles: */ @media screen and (max-width: 768px) { .HomePageHeader { display: none; } } @media screen and (max-width: 768px) { .click-on-any-image { margin-top: -10px; } } @media screen and (max-width: 768px) { .HomeRight { margin-top: -10px; } } /* For desktops: */ @media (min-width: 768px) { .dropdown { margin-top: 20px; } } @media (min-width: 768px) { .HomeRight { margin-top: 20px; } } iframe { display: block; width: 95%; margin-left: auto; margin-right: auto; height: 1000px; border: none; scrolling: no; } header {background-color: black; text-align: center;} header { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap;} /*dropdown menu*/ .dropbtn { background-color: inherit; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: GreenYellow; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 5; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} .hamburger div { width: 35px; height: 5px; background-color: white; margin: 6px 0; } .caption { color: #f2f2f2; background-color: rgba(0,0,0,0.25); } .paintingonpage { display: block; margin-left: auto; margin-right: auto; max-width: 100%; } .colourchoices table { margin-left: auto; margin-right: auto; max-width: 100%; } .colourchoices td { text-align: center; } .about-photo { display: block; margin-left: auto; margin-right: auto; width: ; vertical-align: middle; } .buypainting { text-align:center; } .paintingdescription { margin-top: 10px; } .gallery-grid table {width: 100%;} img {max-width: 95%} .gallery-grid tr { margin-top: 10px; display: flex; flex-direction: row; justify-content: center; } footer { margin-top: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: black; color: white; height: 8%; } #more {display: none;} button { color: orange; background-color: inherit; border: solid black, 2px; border-color: black; border-radius: 15px; padding: 10px; cursor: pointer; } /* for image grid */ * { box-sizing: border-box; } .image-grid-row { display: flex; flex-wrap: wrap; padding: 10px 0; } /* Create four equal columns that sits next to each other */ .image-grid-column { flex: 25%; max-width: 25%; padding: 10px 0; } .image-grid-column img { margin-top: 10px; vertical-align: middle; } /* Responsive layout - makes a two column-layout instead of four columns */ @media (max-width: 800px) { .image-grid-column { flex: 50%; max-width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .image-grid-column { flex: 50%; max-width: 50%; } } /* Learning to do the headers with divs instead of tables - create unequal columns that float next to each other */ * { box-sizing: border-box; } .column { float: left; padding: 10px; } .mleft { width: 50%; } .mright { width: 50%; display: flex; justify-content: space-between; } .m2left { width: 33%; } .m2middle { width: 33%; } .m2right { width: 33%; } .DLeft { width: 33%; text-align: left; } .DMiddle { width: 33%; display: flex; justify-content: center; column-gap: 40px; } .DRight { width: 33%; text-align: right; } #GoTop { display:none; position: fixed; bottom: 20px; right: 20px; z-index: 99; } .TitleBar { margin-top: 50px; padding: 10px; background-color: black; text-align: center; /* For mobiles: */ @media only screen and (max-width: 768px){ margin-top: 40px; }