/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
 @font-face {
    font-family: "Sinoreta";
    src: url("fonts/Sinoreta.otf") format("truetype");
}

 @font-face {
    font-family: "Century Gothic";
    src: url("fonts/century-gothic.otf") format("opentype");
}

 @font-face {
    font-family: "Century Gothic Bold";
    src: url("fonts/century-gothic-bold.ttf") format("opentype");
}

.top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 600px;
    height: auto;
}

.top-right {
    position: absolute;
    top: 10px;
    left: 900px;
    width: 600px;
    height: auto;
}

.bottom-left {
    position: absolute;
    top: 950px;
    left: 50px;
    width: 375px;
    height: auto;
}

.gallery-december {
    position: absolute;
    top: 250px;
    left: 167px;
    width: 1100px;
    height: auto;
}

.product-image {
    position: absolute;
    top: 250px;
    left: 167px;
    width: 450px;
    height: auto;
}

.alex-image {
    position: absolute;
    top: 250px;
    left: 167px;
    width: 450px;
    height: auto;
    border: 22px solid #DA627D;
}

.alex-image-young {
    position: absolute;
    top: 435px;
    left: 1005px;
    width: 250px;
    height: auto;
    border: 22px solid #A53860;
}

a {
    color: #450920;
    text-decoration: none;     /* removes underline */
    position: absolute; 
}

a:hover {
    text-decoration: underline;
    color: #ff99dd;
}

.index-link {
    position: absolute;
    top: 85px;   /* distance from the top */
    left: 167px;  /* distance from the left */
    font-size: 15px;
    font-family: "Century Gothic", sans-serif;
    color: #450920; 
    text-decoration: none;
    white-space: nowrap;
}

.gallery-link {
    position: absolute;
    top: 85px;   /* distance from the top */
    left: 275px;  /* distance from the left */
    font-size: 15px;
    font-family: "Century Gothic", sans-serif;
    color: #450920; 
    text-decoration: none;
}

.about-link {
    position: absolute;
     top: 85px;   /* distance from the top */
    left: 370px;  /* distance from the left */
    font-size: 15px;
    font-family: "Century Gothic", sans-serif;
    color: #450920; 
    text-decoration: none;
    white-space: nowrap;
}

.connect-link {
    position: absolute;
     top: 85px;   /* distance from the top */
    left: 475px;  /* distance from the left */
    font-size: 15px;
    font-family: "Century Gothic", sans-serif;
    color: #450920; 
    text-decoration: none;
    white-space: nowrap;
}

body {
  background-color: #FCEBDA;
  font-family: "Century Gothic", sans-serif;
  position: absolute;
}

.header1 {
    margin-top: 175px;    /* space under the image */
    margin-left: 167px;
    color: #450920;
}

.header2 {
    margin-top: 35px;
    margin-left:700px;
    color: #A53860;
}

.paragraph1 {
    margin-top: 20px;
    margin-left:700px;
    width: 600px;
    color: #450920;
}

.header3 {
    margin-top: 25px;
    margin-left:700px;
    color: #A53860;
}

.header4 {
    margin-top: 25px;
    margin-left:700px;
    color: #A53860;
}

.header5 {
    margin-top: 40px;
    margin-left:167px;
    color: #450920;
}

.paragraph2 {
    margin-top: 20px;
    margin-left:700px;
    width: 600px;
    color: #450920;
}

.paragraph3 {
   margin-top: 20px;
    margin-left:700px;
    width: 600px;
    color: #450920;
}

.aboutparagraph1 {
   margin-top: 35px;
    margin-left:700px;
    width: 600px;
    color: #450920;
}

.aboutparagraph2 {
   margin-top: 0px;
    width: 275px;
    color: #450920;
}

.connectparagraph1 {
   margin-top: 35px;
   margin-left: 167px; 
    width: 275px;
    color: #450920;
    white-space: nowrap;
}

h1 {
    color: #450920;
    font-family: "Century Gothic", sans-serif;
}

.bold {
  font-family: "Century Gothic Bold", sans-serif;
  color: #450920;
}

.subscribe-btn {
    display: inline-block;
    padding: 12px 25px;
    background-color: #450920; /* button color */
    color: white; /* text color */
    font-family: "Century Gothic Bold", sans-serif;
    font-size: 18px;
    text-align: center;
    text-decoration: none;     /* remove underline */
    border-radius: 5px;
    border: 4px solid pink;
    border-color:#A53860; 
    transition: background 0.3s;
    top: 1040px;
    left: 322px;
    width: 100px;
    height: auto;
}

.subscribe-btn:hover {
    background-color: #e03e00; /* darker on hover */
}