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

body {
    background: url(../images/background.jpg); /*--MY OWN IMAGE--*/
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    height: auto;
}

#wrapper {
    max-width: 1000px;
    min-height: 100vh;
    margin: 2em auto;
    padding: 1em;
    background-color: rgba(50, 48, 48, 0.95);
    border-radius: 40px;
    display: grid;
    grid-template-areas:
        "header"
        "menu"
        "main"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 130px 60px minmax(650px, auto) 150px;
}

header {
    grid-area: header;
}

header h1 {
    font-family: "Bokor", system-ui;
    font-weight: 400;
    font-size: 4rem;
    color: white;
    letter-spacing: 0.25rem;
    margin: 0.25em 0 0 1em;
}

nav {
    grid-area: menu;
    border-bottom: 4px dashed white;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin-left: 3.5em;
}

nav a {
    text-decoration: none;
    color: white;
    font-family: "Kufam", sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    padding: 1em;
}

nav a:hover {
    text-decoration: underline;
    font-style: italic;
    font-weight: 700;
}

main {
    grid-area: main;
    margin: 0 4.5em;
}

/*---HOME-MAIN---*/

#home-main h2 {
    font-family: "Kufam", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: white;
    text-align: center;
    margin-top: 2em;
}

#welcome p {
    font-family: "Verdana", sans-serif;
    font-size: 16px;
    color: white;
    margin-bottom: 1em;
    text-align: center;
}

#welcome {
    padding-top: 2em;
}

#quote {
    color: white;
    font-family: "Kufam", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 1em;
    text-align: center;
}

q {
    font-style: italic;
    margin: 2em 0;
}

#gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2em 0 4em 0;
}

#gallery img {
    margin: 1em;
}

/*---END-HOME-MAIN---*/

footer {
    grid-area: footer;
    border-top: 4px dashed white;
}

footer ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 2.5em 0 0.5em 0;
}

footer a {
    text-decoration: none;
    color: white;
    margin: 1em;
    font-family: "Poiret One", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
}

footer a:hover {
    font-weight: 900;
    text-decoration: underline;
}

footer p {
    color: white;
    font-size: 1rem;
}

#icons {
    text-align: center;
}

footer i {
    font-size: 1rem;
    margin: 0.5rem;
}

footer i:hover {
    color: black;
}

#copyright {
    color: white;
    margin: 1em;
    padding-bottom: 1em;
    font-family: "Poiret One", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/*---ABOUT-MAIN---*/

#about {
    display: grid;
    grid-template-areas:
        "about"
        "philosophy"
        "community";
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, auto) minmax(250px, auto) minmax(250px, auto);
    margin: 4em 4em 3em 4em;
}

#about h2 {
    font-family: "Kufam", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: white;
    margin: 1em 0 0.5em 0;
}

#about p {
    font-family: "Verdana", sans-serif;
    font-size: 16px;
    color: white;
    padding-bottom: 0.5em;
}

#about-me {
    grid-area: about;
}

#about-me img {
    float: left;
    margin-right: 2em;
}

#philosophy {
    grid-area: philosophy;
}

#philosophy img {
    float: right;
    margin-left: 2em;
}

#community {
    grid-area: community;
}

#community img {
    float: left;
    margin-right: 2em;
}

/*---GALLERIES-MAIN---*/

#galleries {
    margin: 0 3em;
}

#galleries h2 {
    font-family: "Kufam", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: white;
    margin-top: 2em;
    text-align: center;
}

#main-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2em 0 4em 0;
    gap: 2em;
}

.gallery-card {
    text-align: center;
}

.gallery-card h3 {
    font-family: "Kufam", sans-serif;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.25rem;
    margin-top: 0.3em;
    display: block;
    padding: 0.5em;
    width: 100%;
    border: 3px solid white;
}

.gallery-card h3:hover {
    color:rgb(50, 48, 48);
    background-color: white;
}

#main-gallery img:hover {
    outline: 3px dashed white;
}

/*---CAMERAS-MAIN---*/

#cameras {
    margin: 3em 4em;
}

#cameras-intro h2 {
    font-family: "Kufam", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1em;
    text-align: center;
}

#cameras-intro p {
    margin-bottom: 1em;
}

#camera-info h3 {
    font-family: "Kufam", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: white;
    margin: 2em 0 1em 0;
    text-align: left;
}

#cameras h4 {
    font-family: "Kufam", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: white;
    padding: 3em 0 2em 0;
}

#cameras p, li {
    font-family: "Poiret One", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    color: white;
}

#cameras li {
    margin-bottom: 0.2em;
}

#camera-info ul {
    margin-top: 1em;
}

.dark {
    min-height: 300px;
    background-color: rgb(34, 33, 33);
    padding-right: 2em;
}

.light {
    min-height: 300px;
    background-color: rgb(50, 48, 48);
    padding-left: 2em;
}

.left {
    float: left;
    margin-right: 2em;
}

.right {
    float: right;
    margin-left: 2em;
}

/*---CONTACT-MAIN---*/

#contact {
    display: grid;
    grid-template-areas:
        "info form";
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    margin: 0 3.5em;
}

#contact-info {
    grid-area: info;
    margin-top: 3em;
}

#contact-info h2 {
    font-family: "Kufam", sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: white;
    margin: 0 0 1em 0.5em;
}

#contact-info p {
    font-family: "Verdana", sans-serif;
    font-size: 14px;
    color: white;
}

#contact-info p:hover {
    font-weight: bold;
    text-decoration: underline;
}

#contact-info i {
    font-size: 1.5rem;
    margin: 0.5em;
}

form {
    grid-area: form;
	width: 90%;
	border: 2px solid white;
    margin: 2.5em auto;
    padding: 1em;
}

legend {
    font-family: "Kufam", sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
	color: white;
}

form p {
    font-family: "Verdana", sans-serif;
    font-weight: bold;
    font-size: 14px;
	color: white;
    margin-bottom: 1.5em;
}

fieldset {
    padding: 0.5em 2em 2em 2em;
	margin: 1em;
    color: white;
}

label {
    font-family: "Verdana", sans-serif;
    font-size: 16px;
	text-align: left;
	width: 20em;
	display: block;
}

input, select {
    background-color: rgb(50, 48, 48);
    color: white;
    border: 2px solid white;
    margin: 0.5em 0 1em 0;
    display: block;
    font-family: "Verdana", sans-serif;
    font-size: 14px;
    width: 60%;
    padding: 0.25rem;
}

textarea {
    background-color: rgb(50, 48, 48);
    color: white;
    border: 2px solid white;
    width: 100%;
    font-family: "Verdana", sans-serif;
    font-size: 14px;
    margin: 0.5em 0;
    padding: 0.25rem;
}

textarea::placeholder {
    color: white;
}

#submit {
    width: 35%;
    padding: 0.5em;
    letter-spacing: 0.1rem;
    font-weight: 600;
}

#submit:hover {
    color:rgb(50, 48, 48);
    background-color: white;
}


/*---TABLET-SCREEN---*/

@media screen and (max-width: 940px) {

/*---HOME-MAIN---*/

header h1 {
    margin: 0.25em 0 0 0.5em;
}

nav ul {
    margin-left: 1.5em;
}

#gallery img {
    margin: 0;
}

/*---ABOUT-MAIN---*/

#about {
    grid-template-rows: minmax(270px, auto) minmax(270px, auto) minmax(270px, auto);
    margin: 3em 3em 1em 3em;
}

#about h2 {
    font-size: 1.25rem;
    margin: 0 0 0.25em 0;
}

#about p {
    font-size: 14px;
    padding-bottom: 0.25em;
}

#about-me img {
    margin: 0 1em 0.25em 0;
}

#philosophy img {
    margin: 0 0 0.25em 1em;
}

#education img {
    margin: 0 1em 0.25em 0;
}

/*---GALLERIES-MAIN---*/

#galleries {
    margin: 0 2em;
}

#main-gallery {
    margin: 2em 0 3em 0;
}

/*---CAMERAS-MAIN---*/

#cameras {
    margin: 3em 2em;
}

#camera-info h3 {
    font-size: 1rem;
}

#cameras h4 {
    font-size: 0.8rem;
    padding: 1.5em 0;
}

#cameras p, li {
    font-size: 0.7rem;
}

.dark {
    min-height: 240px;
    background-color: rgb(34, 33, 33);
    padding-right: 1em;
}

.light {
    min-height: 240px;
    background-color: rgb(50, 48, 48);
    padding-left: 1.5em;
}

/*---CONTACT-MAIN---*/

#contact {
    grid-template-areas:
        "info"
        "form";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    margin: 0 2em;
}

#contact-info {
    text-align: center;
}

#contact-info h2 {
    margin-bottom: 1em;
}

}

/*---MOBILE-SCREEN---*/

@media screen and (max-width: 640px) {

body {
    background-repeat: repeat-y;
}

#wrapper {
    padding: 0.5em;
    grid-template-rows: 80px 40px minmax(650px, auto) 120px;
}

header h1 {
    font-size: 3rem;
    margin: 0 0 0 0.75em;
}

nav {
    border-bottom: 3px dashed white;
}

nav ul {
    margin-left: 2em;
}

nav a {
    font-weight: 400;
    font-size: 0.75rem;
    padding: 0.5em;
}

main {
    margin: 0 0.5em;
}

footer {
    border-top: 2px dashed white;
}

footer ul {
    margin: 1.5em 0 0.4em 0;
}

footer a {
    margin: 0.5em;
    font-size: 0.75rem;
    font-weight: 500;
}

footer p {
    margin-top: 0.1rem;
    font-size: 0.8rem;
}

#copyright {
    margin: 1em;
    font-size: 0.75rem;
}

/*---HOME-MAIN---*/

#home-main h2 {
    font-size: 1rem;
}

#welcome p {
    font-size: 12px;
    margin-bottom: 1em;
}

#quote {
    font-size: 14px;
    padding: 0.5em;
    margin: 0 1em;
}

q {
    margin: 1em 0;
}

#gallery {
    margin: 1.5em 0;
}

#gallery img {
    margin: 0.25em;
}

/*---ABOUT-MAIN---*/

#about {
    margin: 2em 1em 0.5em 1em;
    grid-template-rows: minmax(200px, auto) minmax(200px, auto) minmax(200px, auto);
}

#about h2 {
    font-size: 1rem;
    margin: 0.25em 0;
}

#about p {
    font-size: 12px;
    color: white;
    padding-bottom: 0.5em;
}

#about-me img {
    margin: 0 1em 0.25em 0;
}

#philosophy img {
    margin: 0 0 0.25em 1em;
}

#community img {
    margin: 0.25em 1em 0.25em 0;
}

/*---GALLERIES-MAIN---*/

#galleries {
    margin: 0 1em;
}

#galleries h2 {
    font-size: 1rem;
}

#main-gallery {
    margin: 2em 0;
    gap: 1em;
}

.gallery-card h3 {
    font-size: 0.7rem;
    border: 2px solid white;
}

#main-gallery img:hover {
    outline: 2px dashed white;
}

/*---CAMERAS-MAIN---*/

#cameras {
    margin: 2em;
}

#cameras-intro h2 {
    font-size: 1rem;
}

#camera-info h3 {
    font-size: 0.8rem;
}

#cameras h4 {
    font-size: 0.7rem;
    padding: 1.25em 0;
}

#camera-info p, li {
    font-weight: 500;
}

#cameras li {
    margin-bottom: 0.3em;
}

#camera-info ul {
    margin-top: 0.5em;
}

/*---CONTACT-MAIN---*/

#contact-info h2 {
    font-size: 1rem;
    margin: 0 0 1em 0.5em;
}

#contact-info p {
    font-size: 12px;
}

#contact-info i {
    font-size: 1rem;
}

form {
	width: 95%;
	border: 2px solid white;
    margin: 2em auto;
    padding: 0.5em;
}

legend {
    font-size: 1rem;
}

fieldset {
    padding: 1em;
	margin: 0.5em;
}

form p {
    font-size: 12px;
    margin-bottom: 1.5em;
}

label {
    font-size: 12px;
}

input, select {
    font-size: 12px;
}

textarea {
    font-size: 12px;
}

}