/*import fonts from google fonts - Amarante and Rakkas*/


@import url('https://fonts.googleapis.com/css2?family=Amarante&family=Rakkas&display=swap');


/* css reset */
* {
    padding: 0px;
    Margin: 0px;
    font-size: 100%;
    line-height: 1em;
}

/*default styles for whole page*/
body {
    color: #ffffff;
    border-color: black;
    background-color: #59292A;
}

/*default styling for headings*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Rakkas", serif;
    font-weight: 400;
    font-style: normal;
}

/*specific sstyles*/
h1 {
    font-size: 4.25rem;
    margin-bottom: 2rem;
    font-weight: 900;
}

h2 {
    font-size: 2.25rem;
    margin-bottom: .5rem;
}

h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

h4 {
    font-size: 1.75rem;
    margin-bottom: 0.2rem;
}

/* Paragraphs */
p {
    font-family: "Amarante";
    font-weight: 400;
    line-height: 1.75rem;
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
    font-style: normal;
}

p.large {
    font-weight: 400;
    font-style: italic;
    line-height: 1.75rem;
    font-size: 1.15rem;
    margin-bottom: 2.5rem;
    font-family: "amarante";
}



/* Navigation bar css*/

.navbar ul {

    list-style: none;
    background-color: #59292A;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;

}

.navbar a {
    color: #E9E9E9;
    text-decoration: none;
    padding: 20px;
    display: block;
    font-family: 'Rakkas';
    font-size: 22px;
    color: #E9E9E9;

}

.navbar a:hover {
    background-color: #482223;
}

.navbar li {

    margin: auto;
    padding: 0px 30px;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -200px; /* so it starts offscreen */
    height: 50vh;
    width: 200px;
    z-index: 999;
    background-color: #59292A;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: left 0.3s ease;
}

.navbar:hover .sidebar {
    left: 0;
}

.sidebar li {
    width: 80%;
}

.sidebar a {
    width: 100%;
    padding: 10px 10px 10px 10px;
    color: #E9E9E9;
    text-decoration: none;
}

.sidebar a:hover {
    background-color: #482223;
    padding: 10px 10px 10px 0px;
}

/* the street of crocodiles title on an image */
.opening {
    Position: relative;
    display: inline-block;
    max-width: 100%;
    margin: auto;
}

.dollhead img {
    width: 100%;
    height: 100%;
    display: block;
  

}

/* Bottom left text for tsoc image */
.bottom-left {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #E9E9E9;
    font-size: large;
    font-family: "rakkas";
    z-index: 0;
}




/* With Bruno Schulz Section, Padding = Up Right Down Left*/
.with-bruno {
    background-color: #2B3C37;
    color: #E9E9E9;
    display: flex;
    align-items: center;
    padding: 50px 100px;

}

.with-bruno h2 {
    font-family: "rakkas";
    font-size: 2.25rem;
    font-weight: bold;
    white-space: nowrap;
    margin: 0;
    padding: 0px 80px 0px 200px;
    position: relative;
}

.with-bruno h2::after {
    content: ""; /*this creates the white line for the quote*/
    position: absolute;
    top: -52px;
    right: 30px;
    bottom: 50px;
    left: 530px;
    width: 7px;
    height: 135px;
    background-color: #E9E9E9;

}

.with-bruno .quote {
    margin-left: 40px;
    flex: 1;
}

.with-bruno p.large {
    font-family: "Amarante";
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 30px 200px 0px 0px;
}

/*bruno self portrait*/
.bruno img {
    max-width: 716px;
    max-height: 649px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 30px 30px 30px;
    border-radius: 10%;
    background-repeat: repeat;
}

/*about section div class*/

.About p {
    max-width: 1200px;
    padding: 10px 150px 30px 150px;
    margin: 0 auto 0 auto;
}

.About h3 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 10px 150px 20px 150px;
}

/*august div class*/
.august {
    background-color: #E9E9E9;
    font: 1.5rem;
    color: #59292A;

}

.august p {
    max-width: 1200px;
    padding: 10px 100px 10px 100px;
    margin: auto;

}

.august h2 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 20px 100px 20px 100px;
}

.august h3 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 20px 100px 20px 100px;
}

.august img {
    max-width: 1228px;
    max-height: 849px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding: 30px 110px 30px 100px;
}

/*market div class*/


.market img {
    max-width: 1228px;
    max-height: 849px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding: 30px 100px 30px 100px;
}

.market p {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 20px 100px 20px 100px;
}

.market h2 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 20px 100px 20px 100px;
}

.market h3 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 20px 100px 20px 100px;
}

/*street div class*/
.street {
    background-color: #2B3C37;

}

.street img {
    max-width: 1500px;
    max-height: 849px;
    display: block;
    width: 100%;
    padding: 0px 0px 0px 0px;
    margin-right: auto;
    margin-left: auto;
}

.street p {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 20px 100px 20px 100px;
}

.street h1 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 30px 100px 30px 100px;
}

.street h2 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 30px 100px 30px 100px;
}

.street h3 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 30px 100px 30px 100px;
}

/*reading div class*/

.reading p {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 10px 100px 10px 100px;
}
.reading h2 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 20px 100px 10px 100px;
}
.reading h4 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 10px 100px 10px 100px;
}
.reading h3 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 10px 100px 10px 100px;
}
.reading a {
    color: white;

}
.reading a:visited {
    color: green;
}
.reading a:hover {
    color: grey;
}

/*responsive design*/

/*preset texts 1245px*/
@media (max-width: 1245px) {
    h1 {
        font-size: 3.25rem;
        line-height: 4rem;
        margin-bottom: 0rem;
        font-weight: 900;
    }
}

/*preset texts 850px*/
@media (max-width: 850px) {
    h1 {
        font-size: 2.75rem;
        line-height: 3rem;
        margin-bottom: 0rem;
        font-weight: 900;
    }
}

/*preset texts 580px*/
@media (max-width: 580px) {
    h1 {
        font-size: 1.5rem;
        line-height: 1.75rem;
        margin-bottom: 0rem;
        font-weight: 900;

    }
}

/*nav bar*/
@media (max-width: 1245px) {
    .navbar a {
        font-size: 1.25rem;
        font-weight: 900;
    }
}

@media (max-width: 1024px) {
    .navbar a {
        font-size: 0.95rem;
        font-weight: 900;
    }
}


/* Sidebar menu button for mobile view */
@media (max-width: 768px) {
    .menu-button {
        display: flex;
    }

    .sidebar {
        left: -200px;

    }

    .sidebar.open {
        left: 0;
    }

    .hideOnMobile {
        display: none;
    }

    .menu {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 20;
        display: flex;
        align-items: center;
        cursor: pointer;


    }
}

@media(min-width: 769px) {
    .menu {
        display: none;
    }

    .sidebar {
        opacity: 0%;
        position: fixed;
        z-index: 999;
        background-color: #59292A;
        backdrop-filter: blur(10px);
        display: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        transition: left 0.3s ease;
    }

    .navbar:hover .sidebar {
        opacity: 0%;
        left: 0;
    }

    .sidebar li {
        opacity: 0%;
        width: 0%;
    }

    .sidebar a {
        opacity: 0%;
        width: 0%;
        padding: 10px 10px 10px 10px;
        color: #E9E9E9;
        text-decoration: none;
    }

    .sidebar a:hover {
        opacity: 0%;
        background-color: #482223;
        padding: 10px 10px 10px 0px;
    }

}

/*with bruno section*/
@media (max-width: 1245px) {
    .with-bruno {
        background-color: #2B3C37;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        padding: 50px 100px;
    }
}

@media (max-width: 1245px) {
    .with-bruno h2 {
        font-family: "rakkas";
        font-size: 2rem;
        font-weight: bold;
        white-space: nowrap;
        margin: 0;
        padding: 0px 80px 0px 200px;
        position: relative;
    }
}

@media (max-width: 1245px) {
    .with-bruno h2::after {
        content: "";
        position: absolute;
        top: -52px;
        right: 30px;
        bottom: 50px;
        left: 530px;
        width: 7px;
        height: 135px;
        background-color: #E9E9E9;

    }
}

@media (max-width: 1245px) {
    .with-bruno .quote {
        margin-left: 40px;
        flex: 1;
    }
}

@media (max-width: 1245px) {
    .with-bruno p.large {
        font-family: "Amarante";
        font-size: 1rem;
        line-height: 1.5;
        padding: 30px 200px 0px 0px;
    }
}

/*1050*/
@media (max-width: 1110px) {
    .with-bruno {
        background-color: #2B3C37;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        padding: 50px 100px;
    }
}

@media (max-width: 1110px) {
    .with-bruno h2 {
        font-family: "rakkas";
        font-size: 1.75rem;
        font-weight: bold;
        white-space: nowrap;
        margin: 0;
        padding: 0px 80px 0px 100px;
        position: relative;
    }
}

@media (max-width: 1110px) {
    .with-bruno h2::after {
        content: "";
        position: absolute;
        top: -52px;
        right: 30px;
        bottom: 50px;
        left: 360px;
        width: 7px;
        height: 135px;
        background-color: #E9E9E9;

    }
}

@media (max-width: 1110px) {
    .with-bruno .quote {
        margin-left: 20px;
        flex: 1;
    }
}

@media (max-width: 1110px) {
    .with-bruno p.large {
        font-family: "Amarante";
        font-size: 1rem;
        line-height: 1.5;
        padding: 30px 0px 0px 0px;
    }
}

/*850px*/
@media (max-width: 850px) {
    .with-bruno {
        background-color: #2B3C37;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        padding: 50px 100px;
    }
}

@media (max-width: 850px) {
    .with-bruno h2 {
        font-family: "rakkas";
        font-size: 1.5rem;
        font-weight: bold;
        white-space: nowrap;
        margin: 0;
        padding: 0px 80px 0px 100px;
        position: relative;
    }
}

/*768*/
@media (max-width: 768px) {
    .with-bruno {
        background-color: #2B3C37;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        padding: 50px 10px;
    }
}

@media (max-width: 768px) {
    .with-bruno h2::after {
        content: "";
        position: absolute;
        top: -52px;
        right: 30px;
        bottom: 50px;
        left: 320px;
        width: 7px;
        height: 135px;
        background-color: #E9E9E9;

    }
}

@media (max-width: 768px) {
    .with-bruno .quote {
        margin-left: 0px;
        flex: 1;
    }
}

@media (max-width: 768px) {
    .with-bruno p.large {
        font-family: "Amarante";
        font-size: 0.75rem;
        line-height: 1.5;
        padding: 30px 100px 0px 0px;
    }
}

/*650*/
@media (max-width: 650px) {
    .with-bruno {
        background-color: #2B3C37;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        padding: 50px 100px;
    }
}

@media (max-width: 650px) {
    .with-bruno h2 {
        font-family: "rakkas";
        font-size: 1.25rem;
        font-weight: bold;
        white-space: nowrap;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        position: relative;
    }
}

@media (max-width: 650px) {
    .with-bruno h2::after {
        content: "";
        position: absolute;
        top: -52px;
        right: 30px;
        bottom: 50px;
        left: 180px;
        width: 7px;
        height: 135px;
        background-color: #E9E9E9;

    }
}

@media (max-width: 650px) {
    .with-bruno .quote {
        margin-left: 0px;
        flex: 1;
    }
}

@media (max-width: 650px) {
    .with-bruno p.large {
        font-family: "Amarante";
        font-size: 0.75rem;
        line-height: 1.5;
        padding: 35px 0px 0px 50px;
    }
}

/*580px*/
@media (max-width: 580px) {
    .with-bruno {
        background-color: #2B3C37;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        padding: 50px 100px;
    }
}

@media (max-width: 580px) {
    .with-bruno h2 {
        font-family: "rakkas";
        font-size: 1.2rem;
        font-weight: bold;
        white-space: nowrap;
        margin: -75px;
        padding: 0px 0px 0px 20px;
        position: relative;
    }
}

@media (max-width: 580px) {
    .with-bruno h2::after {
        content: "";
        position: absolute;
        top: -43px;
        right: 30px;
        bottom: 50px;
        left: 195px;
        width: 5px;
        height: 100px;
        background-color: #E9E9E9;

    }
}

@media (max-width: 580px) {
    .with-bruno .quote {
        margin-left: 0px;
        flex: 1;
    }
}

@media (max-width: 580px) {
    .with-bruno p.large {
        font-family: "Amarante";
        font-size: 0.8rem;
        line-height: 1.5;
        padding: 20px 0px 0px 140px;

    }
}

/*480px*/
@media (max-width: 480px) {
    .with-bruno {
        background-color: #2B3C37;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        padding: 20px 75px;
    }
}

@media (max-width: 480px) {
    .with-bruno h2 {
        font-family: "rakkas";
        font-size: 1rem;
        font-weight: bold;
        white-space: nowrap;
        margin: -70px;
        padding: 0px 0px 0px 20px;
        position: relative;
    }
}

@media (max-width: 480px) {
    .with-bruno h2::after {
        content: "";
        position: absolute;
        top: -30px;
        right: 30px;
        bottom: 50px;
        left: 160px;
        width: 5px;
        height: 75px;
        background-color: #E9E9E9;

    }
}

@media (max-width: 480px) {
    .with-bruno .quote {
        margin-left: 0px;
        flex: 1;
    }
}

@media (max-width: 480px) {
    .with-bruno p.large {
        font-family: "Amarante";
        font-size: 0.5rem;
        line-height: 1.5;
        padding: 30px 0px 0px 110px;

    }
}

/*with bruno 370px*/
@media (max-width: 370px) {
    .with-bruno {
        background-color: #2B3C37;
        color: #E9E9E9;
        display: flex;
        align-items: center;
        padding: 20px 75px;
    }
}

@media (max-width: 370px) {
    .with-bruno h2 {
        font-family: "rakkas";
        font-size: 1rem;
        font-weight: bold;
        white-space: nowrap;
        margin: -70px;
        padding: 0px 0px 0px 20px;
        position: relative;
    }
}

@media (max-width: 370px) {
    .with-bruno h2::after {
        content: "";
        position: absolute;
        top: -30px;
        right: 30px;
        bottom: 50px;
        left: 160px;
        width: 5px;
        height: 75px;
        background-color: #E9E9E9;

    }
}

@media (max-width: 370px) {
    .with-bruno .quote {
        margin-left: 0px;
        flex: 1;
    }
}

@media (max-width: 320px) {
    .with-bruno p.large {
        font-family: "Amarante";
        font-size: 0.4rem;
        line-height: 1.5;

    }
}

/*august 850*/
@media (max-width: 850px) {
    .august p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}

@media (max-width: 850px) {
    .august h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 850px) {
    .august h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 850px) {
    .august img {
        max-width: 928px;
        max-height: 549px;
        padding: 10px 50px 20px 50px;
    }
}

/*market 850px*/
@media (max-width: 850px) {
    .market p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}

@media (max-width: 850px) {
    .market h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 850px) {
    .market h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 850px) {
    .market img {
        max-width: 928px;
        max-height: 549px;
        padding: 0px 0px 20px 0px;
    }
}

/*street 850px*/
@media (max-width: 850px) {
    .street p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}

@media (max-width: 850px) {
    .street h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 850px) {
    .street h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 850px) {
    .street img {
        max-width: 928px;
        max-height: 549px;
        padding: 0px 0px 20px 0px;
    }
}

/*reading 850px*/

@media (max-width: 850px) {
    .reading p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}

@media (max-width: 850px) {
    .reading h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 850px) {
    .reading h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 850px) {
    .reading h4 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.2rem;
    }
}

/*august 768*/
@media (max-width: 768px) {
    .august p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .august h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .august h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 10px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 768px) {
    .august img {
        max-width: 928px;
        max-height: 549px;
        padding: 0px 10px 20px 0px;
    }
}

/*market 768px*/
@media (max-width: 768px) {
    .market p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .market h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 20px 50px 10px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 768px) {
    .market img {
        max-width: 928px;
        max-height: 549px;
        padding: 0px 10px 20px 0px;
    }
}

/*street 768px*/
@media (max-width: 768px) {
    .street p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}


@media (max-width: 768px) {
    .street h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 10px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 768px) {
    .street img {
        max-width: 928px;
        max-height: 549px;
        padding: 0px 10px 20px 0px;
    }
}

/*reading*/
/*street 768px*/
@media (max-width: 768px) {
    .reading p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .reading h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .reading h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 768px) {
    .reading h4 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.2rem;
    }
}

/*august 425*/
@media (max-width: 425px) {
    .august p {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 10px 40px;
        font-size: 0.6rem;
        line-height: 1rem;
    }
}

@media (max-width: 425px) {
    .august h3 {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 0px 40px;
        font-size: 1.2rem;
    }
}

@media (max-width: 425px) {
    .august h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 40px 0px 40px;
        font-size: 1.4rem;
    }
}

@media (max-width: 425px) {
    .august img {
        max-width: 928px;
        max-height: 549px;
        padding: 0px 0px 10px 0px;
    }
}

/*market 425px*/
@media (max-width: 425px) {
    .market p {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 10px 40px;
        font-size: 0.6rem;
        line-height: 1rem;
    }
}


@media (max-width: 425px) {
    .market h2 {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 0px 40px;
        font-size: 1.2rem;
    }
}

@media (max-width: 425px) {
    .market img {
        max-width: 1300px;
        max-height: 849px;
        padding: 0px 0px 10px 0px;
    }
}

/*street 425px*/
@media (max-width: 425px) {
    .street p {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 10px 40px;
        font-size: 0.6rem;
        line-height: 1rem;
    }
}

@media (max-width: 425px) {
    .street h2 {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 0px 40px;
        font-size: 1.2rem;
    }
}

@media (max-width: 425px) {
    .street img {
        max-width: 1128px;
        max-height: 549px;
        padding: 0px 0px 10px 0px;
    }
}

/*reading 425px*/

@media (max-width: 425px) {
    .reading p {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 0px 40px;
        font-size: 0.6rem;
        line-height: 1rem;
    }
}

@media (max-width: 425px) {
    .reading h3 {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 0px 40px;
        font-size: 1.2rem;
    }
}

@media (max-width: 425px) {
    .reading h2 {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 0px 40px;
        font-size: 1.2rem;
    }
}

@media (max-width: 425px) {
    .reading h4 {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 40px 0px 40px;
        font-size: 1.2rem;
    }
}

/*about 1300px*/
@media (max-width: 1300px) {
    .About p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 0px 200px 30px 200px;
        font-size: 1rem;
    }
}

@media (max-width: 1300px) {
    .About h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 0px 200px 20px 200px;
        font-size: 1.5rem;
    }
}


/*about 1100px*/
@media (max-width: 1100px) {
    .About p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 120px 20px 120px;
        font-size: 1rem;
    }
}

@media (max-width: 1100px) {
    .About h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 120px 20px 120px;
        font-size: 1.5rem;
    }
}


/*about 850px*/
@media (max-width: 850px) {
    .About p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 100px 20px 100px;
        font-size: 1rem;
    }
}

@media (max-width: 850px) {
    .About h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 100px 20px 100px;
        font-size: 1.5rem;
    }
}

@media (max-width: 850px) {
    .About h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1.7rem;
    }
}

/*About 768*/
@media (max-width: 768px) {
    .About p {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 20px 50px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .About h3 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 0px 50px;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .About h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 0px 50px;
        font-size: 1.7rem;
    }
}

@media (max-width: 768px) {
    .bruno img {
        max-width: 516px;
        max-height: 449px;
        padding: 20px 0px 20px 0px;
    }
}

/*about 425px*/
@media (max-width: 425px) {
    .About p {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 50px 10px 50px;
        font-size: 0.6rem;
        line-height: 1rem;

    }
}

@media (max-width: 425px) {
    .About h3 {
        max-width: 100%;
        margin: 0 auto 0 auto;
        padding: 10px 50px 0px 50px;
        font-size: 1.2rem;
    }
}

@media (max-width: 425px) {
    .About h2 {
        max-width: 1200px;
        margin: 0 auto 0 auto;
        padding: 10px 50px 0px 50px;
        font-size: 1.2rem;
    }
}

@media (max-width: 425px) {
    .bruno img {
        position: relative;
        margin: 0 auto 0 auto;
        max-width: 316px;
        max-height: 249px;
        padding: 10px;
    }
}
/*responsive 2560px*/
/*opening title 2560px*/
@media (min-width: 2560px){
    .dollhead {
        max-width: 2560px;
    max-height: 2319px;
    display: block;
    width: 150%;
    padding: 0px 0px 0px 0px;
    margin-right: auto;
    margin-left: auto;
      
    }
    .bottom-left {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: #E9E9E9;
        font-size: xx-large;
        font-family: "rakkas";
        z-index: 0;
    }
    
}
/* Navigation bar css 2560px*/
@media (min-width: 2560px){
.navbar ul {

    list-style: none;
    background-color: #59292A;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;

}

.navbar a {
    color: #E9E9E9;
    text-decoration: none;
    padding: 30px;
    display: block;
    font-family: 'Rakkas';
    font-size: 42px;
    color: #E9E9E9;

}

.navbar a:hover {
    background-color: #482223;
}

.navbar li {

    margin: auto;
    padding: 0px 30px;
}
}