@font-face {
	font-family: 'font-4-btn-lbl-hdr-ttl';
	src: url('../fonts/Herculanum.ttf');
}
body {
  background-color: #DCCCAC;
  margin: auto;
  width: fit-content;
}
.logoImg {
	opacity: 60%;
	transition: .35s;
	border: 1px solid transparent;
	border-radius: 5px;
	margin: 0.5% 1%;
	position: relative;
}
.logoImg:hover {
	opacity: 100%;
	border: 1px solid black;
}

.backgroundImg {
	margin: auto 0;
	height: max-content;
	background-image: url('../img/backgroundHomeImg.png');
	background-attachment: fixed;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}
/** this is the title and buttons for other pages**/
#h-title{
    font-family: "font-4-btn-lbl-hdr-ttl";
    font-style: normal;
    font-weight: 400;
    padding-top: 1%;
    letter-spacing: 0.04em;
    left: 0%;
    color: black;
    text-decoration: underline;
    text-decoration-color: black;
    text-decoration-style: solid;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.3em;
    font-size: 5em;
    text-align: center;
}
.btnContainer{
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.inner{
    margin: 0.75% 0;
    padding: 0.75%;
}
.historyBtn {
    box-shadow: 6px 6px 6px rgb(30, 30, 30) ;
    background-color: #F5F0DF;
    border: 0.0625em solid black;
    color: black;
  }
.historyBtn:hover{
    background-color: #C7896E;
  }
#mapmaking, #the-manchus, #the-title, #eastern-tours, #home{
    font-family: "font-4-btn-lbl-hdr-ttl";
    font-style: normal;
    font-weight: 400;
    text-align: center;
    color: black;
    letter-spacing: 0.04em;
    text-align: center;
    margin: auto;
    font-size: 1.75em;
    width: 8em;
    height: 2.25em;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    transition: all 0.25s ease;
    cursor: pointer;
}

@media screen and (max-width: 1500px) {
    #h-title{
        letter-spacing: 0;
        font-size: 3.5em;
    }
    .btnContainer{
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 1%;
    }
    .inner{
        margin: 2%;
        padding: 0;
    }

    #mapmaking, #the-manchus, #the-title, #eastern-tours, #home{
        letter-spacing: 0.04em;
        font-size: 1.35em;
        height: 2.25em;
    }
}


@media screen and (max-width: 850px) {
    .logoImg {
    width: 45%;
    }
    #h-title{
        letter-spacing: 0;
        font-size: 3em;
    }
    .btnContainer{
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 1%;
    }
    .inner{
        margin: 2%;
        padding: 0;
    }

    #mapmaking, #the-manchus, #the-title, #eastern-tours, #home{
        letter-spacing: 0.04em;
        font-size: 1.25em;
        height: 2.25em;
    }
    .btnContainer{
        padding: 5% 0;
    }
}

@media screen and (max-width: 425px) {
    .logoImg {
    width: 60%;
    }
    #h-title{
        letter-spacing: 0;
        font-size: 2.6em;
    }
    .btnContainer{
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 1%;
    }
    .inner{
        margin: 2%;
        padding: 0;
    }

    #mapmaking, #the-manchus, #the-title, #eastern-tours, #home{
        letter-spacing: 0.04em;
        font-size: 1.25em;
        height: 2.25em;
    }
    .btnContainer{
        padding: 5% 0;
    }
}

@media screen and (max-width: 375px) {
    .logoImg {
      width: 60%;
    }
    #h-title{
        letter-spacing: 0;
        font-size: 2.6em;
    }
    .btnContainer{
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 1%;
    }
    .inner{
        margin: 2%;
        padding: 0;
    }
    
    #mapmaking, #the-manchus, #the-title, #eastern-tours, #home{
        letter-spacing: 0.04em;
        font-size: 1em;
        height: 2.25em;
    }
    .btnContainer{
        padding: 5% 0;
    }
}