@charset "utf-8";
body {
background: #000;
margin: 0px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

a {
text-decoration: none;
color: inherit;
}

#wrapper {
text-align: center;
margin: 0 auto;
width: 1000px;
background: #fff1d5;
padding-top: 40px;
padding-bottom: 144px;
font-family: Arial;
}

#cover {
width: 900px;
height: 1370px;
margin: 46px auto 30px auto;
background-color: #604c3c;
background-image: url('../images/cover.jpeg');
background-size: 100% 100%;
}

#image {
width: 900px;
height: 250px;
margin: 46px auto 30px auto;
background-color: #604c3c;
border-radius: 10px;
}

#title {
text-align: center;
font-size: 52px;
width: 900px;
margin: 0 auto;
overflow: hidden;
}
#text {
text-align: left;
font-size: 48px;
padding: 14px;
line-height: 144%;
width: 900px;
margin: 0 auto;
}

#configButton {
width: 100px;
height: 100px;
opacity: 0.5;
border-radius: 6px;
margin: -20px 0 0 20px;
position: fixed;
font-size: 90px;
background-image: url("../images/sepia.png");
background-size: 100% 100%;
}
#configButton:hover {
cursor: pointer;
}

#config {
position: fixed;
border-radius: 8px;
margin: 90px 0 0 50px;
background: #ffdbb5;
width: 900px;
height: 314px;
box-shadow: 0px 6px 4px 0px rgba(96,76,60,0.8);
user-select: none;
display: none;
}

.sizeButton, .e44, .e48, .e52 {
width: 110px;
background: #ffdbb5;
border-radius: 8px;
float: left;
margin: 40px 9px 0 9px;
}
.e44 {
font-size: 44px;
height: 79px;
padding-top: 31px;
}
.e48 {
font-size: 48px;
height: 83px;
padding-top: 27px;
}
.e52 {
font-size: 52px;
height: 86px;
padding-top: 24px;
}


.sizeButton:hover {
cursor: pointer;
}
.colorButton {
width: 120px;
height: 120px;
border-radius: 50%;
float: left;
margin: 35px 7px 0 7px;
}
.colorButton:hover {
cursor: pointer;
}
#sepia {background: #fff1d5; margin-left: 67px}
#white {background: #fff}
#black {background: #1c1b21}

.fontButton {
width: 184px;
height: 63px;
background: #ffdbb5;
border-radius: 6px;
float: left;
margin: 35px 10px 0 10px;
padding: 20px 0 0 0;
font-size: 36px;
}
.fontButton:hover {
cursor: pointer;
}
#arial {
font-family: Arial, Helvetica, sans-serif;
margin-left: 60px;
}
#georgia {
font-family: Georgia, Times New Roman, Baskerville, serif;
}
#consolas {
font-family: Consolas, Courier New, monospace;
}
#papyrus {
font-family: Tillana;
height: 67px;
padding: 16px 0 0 0;
}


.buttons {
height: 90px;
padding: 20px 6px 0 6px;
font-size: 46px;
font-family: arial;
margin-left: 40px;
margin-top: 28px;
float: left;
display: block;
user-select: none;
opacity: 1!important;
}
.buttons:hover {
cursor: pointer;
}

.buttonsCover {
font-size: 46px;
font-family: arial;
margin-right: 40px;
display: block;
user-select: none;
float: right;
}
.buttonsCover:hover {
cursor: pointer;
color: #2599b6;
}

#info {
width: 630px;
height: 244px;
background: #ffdbb5;
border-radius: 8px;
margin: 304px 0 0 205px;
position: fixed;
font-size: 48px;
color: #604c3c;
padding-top: 26px;
box-shadow: 0px 6px 4px 0px rgba(96,76,60,0.8);
user-select: none;
display: none;
}
.infoButton {
width: 100px;
height: 90px;
background: #6bc075;
color: #4b8652;
display: block;
float: left;
font-size: 67px;
margin: 46px 0 0 0;
border-radius: 6px;
box-shadow: 0px 4px 3px 0px rgba(96,76,60,0.8);
opacity: 0.9;
}
.infoButton:hover {
cursor: pointer;
opacity: 1;
}

#menuButton {
width: 80px;
height: 80px;
margin: 34px 0 0 187px;
cursor: pointer;
float: left;
font-size: 64px;
opacity: 0.8;
}

#menu {
width: 760px;
background: #ffdbb5;
color: #604c3c;
margin-left: 120px;
position: fixed;
border-radius: 8px;
box-shadow: 0px 6px 4px 0px rgba(96,76,60,0.8);
bottom: 170px;
display: none;
user-select: none;
padding-bottom: 26px
}

.menuEntry {
width: 694px;
font-size: 48px;
background: #fff1d5;
cursor: pointer;
margin: 16px 0 0 26px;
padding: 14px 0 14px 16px;
text-align: left;
border-radius: 6px;
display: block;
font-family: arial;
box-shadow: inset 0px 0px 3px 0px rgba(96,76,60,0.8);
}

.fa-solid {
margin-top: 12px;
}

#fade {
width: 1000px;
height: 120vh;
background: #000;
opacity: 0.7;
position: fixed;
bottom: 132px;
display: none;
}
#fade2 {
width: 1000px;
height: 132px;
background: #fff1d5;
position: fixed;
bottom: 0px;
display: none;
}

/* latin */
@font-face {
  font-family: 'Tillana';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Tillana.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}