@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap');

* {
   margin: auto;
   font-family: "Antonio", sans-serif;
}

/* navbar */
nav {
   width: 100%;
   display: flex;
   text-align: center;
   padding: 2px 6px;
   margin-bottom: 3.5%;
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px;
   background-image: linear-gradient(to right, rgb(227, 193, 0), rgba(227, 193, 0, 0.332));
}

nav img {
   position: relative;
}

nav ul {
   display: flex;
   margin-right: 2%;
}

nav li {
   margin: 0px 5px;
   padding: 5px 10px;
   list-style: none;
   font-size: 22px;
   font-weight: bold;
   background-color: rgb(249, 243, 210);
   border-radius: 8px;
}

nav a {
   text-decoration: none;
   color: black;
}

nav a:hover {
   color: rgb(227, 193, 0);
}

.navlogo {
   margin: 0;
   height: 100px;
   margin-left: 2%;
   padding: 5px 0;
}

/* Footer */
footer {
   width: 93.9%;
   display: block;
   text-align: center;
   padding: 1% 3.5%;
   margin-top: 3.5%;
   background-image: linear-gradient(to right, rgba(227, 193, 0, 0.216), rgb(227, 193, 0));
}

footer img {
   height: 100px;
}

#contacts {
   display: flex;
   justify-content: center;
   width: 90%;
}

.contacts {
   display: block;
   text-align: center;
   background-color: rgb(252, 245, 202);
   border-radius: 15px;
   margin: 1px 5px;
   padding: 1%;
}

#contacts p {
   margin: 0px;
   padding: 0px;
}

.contact-type {
   font-weight: bold;
   font-style: italic;
}

/* Body */
body {
   background-color: rgba(227, 193, 0, 0.173);
}

.form_bglogo {
   position: absolute;
   width: 70%;
   z-index: -1;
   top: 46%;
   left: -5%;
}

.collections_bglogo {
   position: absolute;
   width: 70%;
   z-index: -1;
   top: 115%;
   left: -5%;
}

/* Home Page */
.home_div {
   display: flex;
   justify-content: center;
   padding: 0px;
   width: 80%;
}

.home_section_label, #owner_detail {
   width: 68%;
   padding: 1% 3%;
   margin: 0px 2%;
   background-image: linear-gradient(rgb(255, 246, 200), rgb(255, 238, 153));
   border-radius: 15px;
   box-shadow: -3px 1px 5px rgb(49, 44, 0);
   display: block;
}

.home_section_label {
   padding: 5% 2%;
   z-index: 1;
   display: block;
   margin: 1.5% 0;
}

#owner_detail {
   margin-left: 0;
}

.home_div .caption {
   padding: 0px;
}

.home_div a, #owner_segment a {
   text-decoration: none;
   color: black;
}

.home_section_title, .owner_section {
   font-size: 55px;
}

.home_section_title a:hover, #owner_segment a:hover {
   color: rgb(227, 193, 0);
}

.caption {
   font-size: 20px;
}

.home_photo {
   height: 200px;
   margin-left: 0;
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px;
   box-shadow: -3px 1px 5px rgb(49, 44, 0);
   z-index: 0;
}

#owner_segment {
   margin-top: 1.5%;
   display: flex;
}

#owner_img {
   height: 350px;
   margin-left: 2%;
   margin-right: 0;
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
   box-shadow: -3px 1px 5px rgb(49, 44, 0);
}

#owner_detail h3, p{
   padding-top: 1.2%;
   padding-bottom: 1.2%;
}

.autobio {
   text-indent: 38px;
   font-size: 20px;
}

/* About Page */
.about {
   justify-content: center;
   width: 92%;
   margin-top: 2%;
   margin-bottom: 2%;
   padding: 2%;
   border: solid 0.8px;
   border-radius: 4px;
}

.about h3 {
   font-size: 32px;
   margin-top: 0px;
   margin-bottom: 0px;
}

.about p {
   font-size: 20px;
   margin-top: 0px;
   margin-bottom: 0px;
}

/* Order Page */
#formtitle {
   padding: 2%;
   background-color: rgb(255, 253, 243);
   border-radius: 10px;
   margin-bottom: 20px;
   color: rgb(107, 91, 0);
}

#orderform h3 {
   font-size: 40px;
}

#orderform {
   width: 35%;
   text-align: center;
   padding: 2%;
   border-radius: 15px;
   background-image: linear-gradient(rgba(255, 236, 130, 0.904), rgba(255, 250, 219, 0.271));
}

#orderform label {
   font-weight: bold;
}

.answerfield {
   width: 50%;
   height: 30px;
   font-size: medium;
   text-align: center;
}

.formreminder {
   width: 40%;
   background-color: rgb(198, 168, 0);
   color: white;
   border-radius: 4px;
   margin-bottom: 4px;
}

.formreminder p {
   font-size: 13px;
   padding: 6px;
}

#orderform textarea {
   height: 75px;
}

#orderform button {
   background-color: rgb(246, 238, 195);
   width: 125px;
   margin-top: 10px;
   padding: 5px 0px;
   border: solid 1px;
   border-radius: 8px;
   font-weight: bold;
}

#orderform button:hover {
   background-color: rgba(238, 203, 3, 0.847);
   
}

/* Successful Order Message */
.alert {
   padding: 15px;
   margin-bottom: 20px;
   border: 1px solid transparent;
   border-radius: 4px;
   text-align: center;
   width: 30%;
}
.alert-success {
   color: #3c763d;
   background-color: #dff0d8;
   border-color: #d6e9c6;
}
.alert-error {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
}

/* Order Guide */
.guide {
   width: 92%;
   justify-content: center;
   margin-top: 2%;
   margin-bottom: 2%;
   padding: 2%;
   border: solid 0.8px;
   border-radius: 4px;
}

.guide h3 {
   font-size: 32px;
   margin-top: 0px;
   margin-bottom: 0px;
}

.guide p {
   font-size: 20px;
   margin-top: 0px;
   margin-bottom: 0px;
}

.guide a {
   font-size: 20px;
   text-decoration: none;
   color: black;
}

.guide a:hover {
   color: rgba(238, 203, 3, 0.847);
}

.guide li {
   font-size: 20px;
}

/* Mission & Vision */
.m_v {
   width: 90%;
   height: 550px;
   display: flex;
   border-radius: 10px;
   background-image: linear-gradient(rgb(221, 195, 44), rgba(255, 242, 172, 0.847));
}

.m_v img {
   position: absolute;
   z-index: 0;
   top: 24.7%;
   left: 32%;
}

.mission, .vision {
   display: block;
   background-color: rgba(239, 218, 99, 0.581);
   text-align: justify;
   margin-left: 2%;
   margin-right: 2%;
   padding: 2%;
   height: 40%;
   width: 90%;
   border-radius: 10px;
   z-index: 1;
}

.mission_title, .vision_title {
   text-align: center;
   font-size: 40px;
   font-style: italic;
}

.m_caption, .v_caption {
   font-size: 20px;
   text-indent: 30px;
}

/* Collections */
.collections {
   display: block;
   text-align: center;
   width: 80%;
   border-radius: 10px;
   background-image: linear-gradient(rgba(255, 236, 130, 0.904), rgba(255, 250, 219, 0.271));
}

.collection_title {
   font-size: 40px;
   padding-top: 2%;
}

.collections table {
   text-align: left;
   width: 90%;
   padding: 2%;
   font-size: 20px;
}

.collections thead {
   background-color: rgb(239, 218, 97);
   text-align: center;
}

.collections th {
   height: 50px;
   border-radius: 10px;
}

.collections tbody tr:hover {
   background-color: rgb(241, 227, 152);
}

.collections td {
   padding: 2px 15px;
   border-radius: 10px;
}