@font-face {
    font-family: Oceanside;
    src: url(fonts/oceansidetypewriter.ttf);
}
@font-face {
    font-family: Doll;
    src: url(fonts/babydoll.ttf);
}
@font-face {
    font-family: Redwater;
    src: url(fonts/redwaterbanker.otf);
}
@font-face {
    font-family: Rainy;
    src: url(fonts/IPAMonaPGothic\,\ Regular.ttf);
}
h3 {
    font-family: Redwater;
    margin: 2px;
    margin-top: 10px;
    font-size: 30px;
    font-weight: normal;
}
h5 {
    font-family: Oceanside;
    margin: 0px;
    font-size: 23px;
    font-weight: bold;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 0px;
    background: #182D09;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: white; 
    border-radius: 2px;
  }
  
::selection {
    background: #182D09;
    color: white;
}
#entirepage {
    height: 1200px;
    width: 1050px;
    background-image: url(images/valbackground.jpg);
    background-size: 30%;
    display: flex;
}

#navtabs {
    width: 400px;
    left: 0;
    z-index: 100;
}

#mainpart {
    z-index: 10;
    position: absolute;
    right: 0;
    border: dashed;
    border-width: 5px 5px 5px 5px;
    border-color: rgb(45, 20, 5);
    width: 75%;
    background-image: url(images/brownpaper.jpg);
    background-size: 70%;
}

#header {
    border: solid 5px;
    border-color: #B7410E;
    background-image: url(images/watercolourp.jpg);
    background-size: 80%;
    margin: 10px;
    height: 200px;
    border-radius: 12px;
}
#slider {
    border: dashed 5px;
    border-color: #64798d;
    background-image: url(images/watercolourp.jpg);
    background-size: 80%;
    border-radius: 12px;
    margin: 10px;
    height: 60px;
}

#main {
    height: 550px;
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    gap: 10px;
    padding: 5px
}

#container1 {
    border: double 6px;
    border-color: rgb(45, 20, 5);
    width: 60px;
    height: 245px;
    background-image: url(images/watercolourp.jpg);
    background-size: 100%;
    padding: 10px;
}
#container2 {
    border: double 6px;
    border-color: rgb(45, 20, 5);
    width: 900px;
    height: 260px;
    background-image: url(images/watercolourp.jpg);
    background-size: 100%;
    padding: 5px;
}
#container3 {
    border: double 6px;
    border-color: rgb(45, 20, 5);
    width: 240px;
    height: 260px;
    background-image: url(images/watercolourp.jpg);
    background-size: 100%;
    padding: 5px;
}

#container4 {
    border: double 6px;
    border-color: rgb(45, 20, 5);
    width: 240px;
    height: 260px;
    background-image: url(images/watercolourp.jpg);
    background-size: 100%;
    padding: 5px;
}

.navbig{
width: 20%;
height: 450px;
position: absolute;
display: inline-block;
left: 10%;
top: 20%;

background-image: url(images/pad3.png);
background-repeat: repeat-y;
background-size: cover; 
border-radius: 3%;
}
.navbig h2{
padding-left: 80px;
padding-top: 40px;
font-family: "Oceanside", serif;
font-size: 12pt;
font-weight: 800;
color: rgb(45, 20, 5);
}
.navbig ul {
max-width: 100%;
max-height: 290px;
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 64px; 
font-family: "Doll", serif;
font-size: 10pt;
color:rgb(45, 20, 5);

}
.navbig li a {
text-decoration: none;
line-height: 2em;
display: block;
width: 100%;
font-family: "Doll", serif;
font-size: 10pt;
color:rgb(45, 20, 5);
letter-spacing: 0;
transition: letter-spacing 0.3s ease-in-out;
}
.navbig li a:hover {
    background-color: #182D09;
    color: white;
    letter-spacing: 3px;
}

.navsmall{
width: 18%;
height: 340px;
position: absolute;
display: inline-block;
transform: rotate(-15deg);
left: 7%;
top: 60%;

background-image: url(images/pad.png);
background-repeat: repeat-y;
background-size: cover; 
border-radius: 3%;
}
.navsmall h2{
padding-left: 53px;
padding-top: 24px;
font-family: "Oceanside", serif;
font-size: 12pt;
font-weight: 800;
color: rgb(45, 20, 5);
}
.navsmall ul {
max-width: 100%;
max-height: 290px;
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 53px; 
font-family: "Doll", serif;
font-size: 10pt;
color:rgb(45, 20, 5);
}
.navsmall li a {
text-decoration: none;
line-height: 2em;
display: block;
width: 100%;
font-family: "Doll", serif;
font-size: 10pt;
color:rgb(45, 20, 5);
letter-spacing: 0;
transition: letter-spacing 0.3s ease-in-out;
}
.navsmall li a:hover {
    background-color: #182D09;
    color: white;
    letter-spacing: 3px;
}

.navtiny{
width: 23%;
height: 390px;
position: absolute;
display: inline-block;
transform: rotate(10deg);
left: 10%;
top: 93%;

background-image: url(images/pad2.png);
background-repeat: repeat-y;
background-size: cover; 
border-radius: 3%;
}
.navtiny h2{
padding-left: 83px;
padding-top: 65px;
font-family: "Oceanside", serif;
font-size: 12pt;
font-weight: 800;
color: rgb(45, 20, 5);
}
.navtiny ul {
max-width: 87%;
max-height: 290px;
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 83px; 
font-family: "Doll", serif;
font-size: 10pt;
color:rgb(45, 20, 5);
}
.navtiny li a {
text-decoration: none;
line-height: 2em;
display: block;
width: 87%;
font-family: "Doll", serif;
font-size: 10pt;
color:rgb(45, 20, 5);
letter-spacing: 0;
transition: letter-spacing 0.3s ease-in-out;
}
.navtiny li a:hover {
    background-color: #182D09;
    color: white;
    letter-spacing: 3px;
}