/*styles for my final project*/

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


body{
    font-family: helvetica, arial, sans-serif;
    background:beige;
}
/* Website style*/

}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 8, 2020 */



@font-face {
    font-family: 'architects_daughterregular';
    src: url('../fonts/architectsdaugter-webfont.woff2') format('woff2'),
         url('../fonts/architectsdaughter-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bluemoonregular';
    src: url('../fonts/bluemoon-webfont.woff2') format('woff2'),
         url('../fonts/bluemoon-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#logo{
    display: inline;
 }

#wrapper{
    max-width: 940px;
    margin: 20px auto 20px auto;
}

header{
    background:beige;
}

.header-inner{
    width:100%;
    margin:20px auto;
    background:beige;
   }

nav{
    height:50px;
    background:#ffb35c;
    line-height: 50px;
}

nav ul{
   list-style-type: none;
    width:100%;
    max-width:940px;
    margin:0 auto;
}

nav li{
    float:left;
     width:16.64%;
     text-align: center;
}

nav a{
    text-decoration: none;
    display:block;
}

nav a:hover {
    background:orange;
    color:darkred;
}

.home nav li:nth-child(1) a,
.visit nav li:nth-child(2) a,
.taste nav li:nth-child(3) a,
.transport nav li:nth-child(4) a,
.stay nav li:nth-child(5) a,
.talk nav li:nth-child(6) a{
    background:orange;
}

#banner{

    background:beige;
    
}

#index_main{
    margin-top: 10px;
    width:100%;
    float:left;
    background:beige;
    }

.center{
    text-align: center;
    margin:10px auto 20px auto;
}

h1.index_center{
    font-size: 2.44em;
    margin-bottom: 8px;
    padding: 0.532%;
    
}

aside{
    width:36.1%;
    float:right;
    background:#ccfccd;
    padding-left: 1.064%;
    }

.container_row{
    clear:both;
}

.third{
    width:31.6%;
    max-width: 300px;
    float:left;
    background:#ccfccd;
    padding: 1.59%;
    margin-bottom: 20px;
    }

.third:nth-child(1),
.third:nth-child(2),
.third:nth-child(4),
.third:nth-child(5){
    margin-right: 2.12%;
}

.third img{
    text-align: center;
    max-width: 100%;
}
main{
    margin-top: 10px;
    width:61.7%;
    float:left;
    background:beige;
    }

aside{
    width:36.1%;
    float:right;
    background:#ccfccd;
    padding-left: 1.064%;
    padding-top:10px;
    }

img.right{
    float:right;
    padding-left:0.532%;
    margin: 0 0.532% 1.596% 1.596%; 
}

img.left{
    float:left;
    padding-right:5px;
    margin: 0 1.596% 1.596% 0.532%; 
}

img{
    display:block;
    max-width: 100%
}

a:hover img {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
img.newsletter{
    margin-top: 30px;
    margin-bottom: 10px;
}

footer{
    height: 50px;
    line-height: 50px;
    background:#ffb35c;
    clear:both;
    font-size: 0.875em;
}

footer li{
    float:left;
    margin-left:15px;
    margin-right:15px;
    color:firebrick;
}

a{
    color:firebrick;
}

footer a {
    color:firebrick;
}
footer ul{
    float:left;
    list-style-type: none
}

.end {
    margin-bottom: 20px;
    margin-top: 15px;
}



/***************************taste and stay page**************************/
figure{
    margin-bottom: 10px;
}

figcaption{
    background:black;
    color:#fff;
    padding:0.85%;
    font-size:.8em;
    font-style:italic;
}

dl{
    margin-bottom: 20px;
    line-height: 1.4em;
    padding:0.85%;
    color:black;
}
dt{
    margin-top:5px;
}
/********************************Transport***************************/
p a{
  color:#4f4b3c;  
}

.class {
    color:#4f4b3c;
}
/*************************************Talk********************/
img.center{
    margin-top:20px;
    margin-bottom: 10px;
}

h4 a{
    color:#4f4b3c;
}

aside h2{
    margin-bottom: 15px;
}
/******************************form*********************/
aside ul{
    list-style-type:square;
    list-style-position: inside;
}

aside li{
    padding-left: 0.532%;
    margin-left: 0.532%;
    margin-bottom: 5px;
}

form{
    width:100%;
    max-width: 580px;
}

label{
    display:block;
/*    display below the image, not side by side*/
    margin-bottom: 0.532%;
/*    space between name and the box*/
}

fieldset{
    padding:1.064%;
/*    so more space between name and input*/
}

legend{
    font-size: 1.6em;
    font-style: italic;
    padding:0 0.532%;
    color:green;
    font-family: 'bluemoonregular';
}

input{
    width:100%;
    height:25px;
    margin-bottom: 10px;
}

input[type=radio],
input[type=checkbox]{
    width:auto;
    height: auto;
    margin-right: 0.532%;
}
{
    width:auto;
    height: auto;
    margin-right: 0.532%;
}

input[type=submit]{
    width:auto;
}


textarea{
    width:100%;
    height:60px;
    margin-bottom: 10px;
}
select{
    margin-bottom: 10px;
}
form ul{
    margin-left: 1.064%;
    margin-bottom: 10px;
}
form li{
    list-style-type:none;
}



/*****************typography*****************/

h1, h2, h3{
    margin-bottom: 8px;
}

h1{
    font-size: 2em;
    margin-bottom: 8px;
    padding:0.532%;
}

h2{
    font-size: 1.6em;
    margin-bottom: 8px;
    padding:0.532%;
    padding-bottom: 0px;
}

h3{
    font-size:1.4em;
    margin-bottom: 8px;
    padding:0.532%;
    color:#4f4b3c;
}

h4 {
    font-size: 1em;
    margin-bottom: 8px;
   
}

.bluemoon{
   font-family: 'bluemoonregular';
    padding-left: 1.06%;
}
.architectsdaughter{
    font-family: 'architects_daughterregular'; }

.cursive{
    font-family: cursive;
}

aside h3{
    padding-left: 0px;
}

p{
    font-size: 1em;
    margin-bottom:5px;
    padding: 0.532%;
    color: #4f4b3c;
    line-height: 1.2em;
}

@media screen and (max-width:800px)
{
#wrapper {
    width:95%;
    }
    
#index_main{
    width:95%;
   }

nav ul{
    width:96%;
    }
    

main{
    width:58.7%;
   }

aside{
       width:34.91%;
    }
}

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

#index_main{
    width:auto;
    float:none;
   }
    
.third{
    width:auto;
    float:none;
    }

    
main{
   width:auto;
    float:none;
   }

aside{
    width:auto;
    float:none;
    border:none;
    }
    
aside img{
    display:block;
    margin:0 auto;
    }
    
}