body {
    font-family: "Tiempos Text Web", Georgia, Times, serif;
    background-color: #d9ead3ff;
    
    line-height: 1.5;
    margin: 0;
}

#title-image {
    /* background: #6CBFBF; */
    color: #242331;
    background-image: url("C.\ Title\ \(Outline\).png");
    padding-top: 100px;
    padding-bottom: 100px;

    background-size: cover;
    background-repeat: no-repeat;
}

#main-header {
    font-family: 'Squada One', cursive;
    color: #242331;
    text-shadow: white 4px 4px;
    
    text-align: center;
}

#main-header h1 {
    font-size: min(8vw, 85px);
    max-width: max(1000px, 70vw);
    /* color: #242331; */

    margin-left: auto;
    margin-right: auto;
    /* margin-top: 5vw; */
    margin-bottom: 1vw;
}

#main-header h2 {
    font-size: clamp(20px, 3vw, 35px);
    text-shadow: white 2px 2px !important;
}

#sub-header {
    font-size: clamp(10px, 4vw, 30px);
    color: #4c3828;
    font-family: 'Squada One', cursive;
    text-transform: capitalize;


    text-align: center;
    margin: auto;
}

@font-face {
    font-family: kilma-bold;
    src: url(klima-bold.otf);
  }

@font-face {
    font-family: kilma;
    src: url(klima-regular.otf);
  }
  
@media screen and (max-width: 799px) {
    :root {
        --card-width: 80vw;
    }
}

@media screen and (min-width: 800px) {
    :root {
        --card-width: clamp(200px, 40vw, 400px);
    }
}

.pull-quote {
    font-family: kilma-bold;
    font-size: clamp(10px, 2vw, 16px);
    color: #134215;
    
    /* max-width: 80%; */
    text-align: left;
    padding: 20px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin: 20px auto;
}

.text-div {
    font-family: kilma;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5;
    /* text-align: justify; */
    text-align: left;
    /* background-color: beige; */

    max-width: max(800px, 50vw);
    padding-left: 30px;
    padding-right: 30px;
    margin: 20px auto;
}

#paintings {
    width: clamp(200px, 30vw, 400px);
}

#outro {
    padding-top: 100px;
}

/* –––––––––––––– */

.container {
    text-align: center;
    padding-bottom: 15px;
    min-height: var(--card-width)*1.3;
}

.maincontainer-right {
    position: absolute;
    float: right;
    margin: auto;
    width: var(--card-width);
}

.maincontainer-left {
    position: absolute;
    float: left;
    margin: auto;
    width: var(--card-width);
}

.container .maincontainer-right {
    position: relative;
    margin: auto;
    width: var(--card-width);
    padding: 0 0 0 20px;
}

.container .maincontainer-left {
    position: relative;
    margin: auto;
    width: var(--card-width);
    padding: 0 20px 0 0;
}

.card-right {
    float: right;
    width: var(--card-width);
}

.card-left {
    float: left;
    width: var(--card-width);
}

/* ––––––––––––––– */

.thecard {
    position: static;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}

.thecard:hover {
    transform: rotateY(180deg);
}

.thefront {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    color: #333;
}

.theback {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    color: #333;
    transform: rotateY(180deg);
}