/* -------------------------------------------------------- */
/* AFP    DESKTOP SIZED    home page stylesheet. 12/23/2021 */
/* -------------------------------------------------------- */


body {
display: flex;
flex-direction: column;
font-family: 'Comfortaa', cursive;
margin: 0;
padding: 0;
align-items: center;
background-color: #B7DEDF;
}

#main {
width: 480px;
border: none;
box-shadow: 3px 3px 20px darkgrey;

}

hr {
width: 476px;
border: 2px solid #BBBBBB;
margin: 0;
}

#navbar {
position: fixed;
height: 30px;
width: 480px;
background-color: #5EBFB5;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 10;
}

#navbar a {
color: #F2075D;
text-decoration: none;
font-size: 16px;
}


/* landing page w just logo centered */
#landing {
height: auto;
width: 100%;
background-color: #EAEAEA;
display: flex;
justify-content: center;
align-items: center;
margin-top: -70px;
}

#landing img {margin-top: 40px;height: 200px;width: 300px;}



/* portraits section w carousel and short text box */
#portraits {
height: auto;
background-color: #EAEAEA;
text-align: center;
padding: 2px;
}

#portraitCar {
background-color: darkgray;
width: 300px;
height: auto;
margin: auto;
padding: 2px;
}
#portraitCar img {
width: 90%;
height: auto;
}

#port {
margin: 5px;
}

#portArrows {
background-color: darkgray;
width: 95%;
cursor: pointer;
display: inline-block;
}
#portPrev {float: left; color: #F2075D;}
#portNext {float: right; color: #F2075D;}



/* landscape section w carousel and short text box */
#landscapes {
height: auto;
background-color: #EAEAEA;
text-align: center;
padding: 2px;
}

#landscapeCar {
background-color: darkgray;
width: 300px;
height: auto;
margin: auto;
padding: 2px;
}
#landscapeCar img {
width: 90%;
height: auto;
}

#land {
margin: 5px;
}

#landArrows {
background-color: darkgray;
width: 95%;
cursor: pointer;
display: inline-block;
}
#landPrev {float: left; color: #F2075D;}
#landNext {float: right; color: #F2075D;}



/* form section w PHP mail on submit */
#contact {
display: flex;
flex-direction: column;    
height: auto;
background-color: #EAEAEA;
padding: 4px;
text-align: center;
justify-content: center;
}

#f {
display: flex;
flex-direction: column;
width: 250px;
margin: auto;
justify-content: center;
}
#name, #email {
height: 20px;
padding: 4px;
margin-bottom: 8px;
color: black;
border: 2px solid #ACC2BF;
border-radius: 4px;
}
#msg {
border: 2px solid #ACC2BF;
border-radius: 4px;
}

#f input::placeholder {color: black;}
#f textarea::placeholder {color: black;}

#f label {
display: flex;
align-items: center;
margin: auto;
margin-bottom: 10px;
padding: 2px;
width: 120px;
font-size: 15px;
background-color: #ACC2BF;
border: none;
border-radius: 4px;
}

#indoors, #outdoors, #urban, #rural {
float: left;
width: 20px;
height: 20px;
}

#occasion {
width: 250px;
height: 30px;
border: 2px solid #ACC2BF;
border-radius: 4px;
}

#submit {
width: 50%;
height: 30px;
margin: auto;
background-color: #ACC2BF;
border: none;
border-radius: 4px;
font-size: 16px;
color: #F2075D;
}


/* footer section. change "copyright" to a ::before icon */
footer {
display: flex;
align-items: center;
justify-content: space-around;
height: 70px;
background-color: #BBBBBB;
text-align: center;
font-size: 12px;
}

#badges {
margin-left: -30px;
width: 70px;
display: flex;
justify-content: space-between;
}

#badges ion-icon {
width: 40px;
height: 40px;
margin: 5px;
}
#badges a {
color: #F2075D;
}
#badges a:hover {
color: #E34B8F;
}