@import 'typography.css';

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 2% 5%;
    background-color: #D7D5D4;
}

.paper {
    padding: 20px;
    box-shadow: 0pt 3pt 10pt rgba(0,0,0,0.40);
    background-color: white;
}

.flex {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.flex-col {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}

.gapped {
    gap: 20pt;
}

.flex-centered {
    align-items: center;
}

.flex-stretched {
    align-items: stretch;
}

.flex-s-start {
    justify-content: flex-start;
}
.flex-s-between {
    justify-content: space-between;
}

.flex-start {
    justify-content: flex-start;
}

.align-center {
    align-items: center;
}

.bordered-box {
    border: solid 3px #825840;
    padding: 20pt;
}

.hero-image {
    object-fit: contain;
    flex-shrink: 0;
    flex-grow: 0;
    max-width: 100%;
    width: 350px; 
    height: 250px;
}
.hero-header {
    flex-shrink: 1;
    flex-grow: 1;
    text-align: center;
}
.hero-section {
    align-content: stretch;
}

.book-section {
    flex-direction: column;
}

.header1 {
    color: #C70044;
    font-size: 34pt;
    font-style: italic;
    font-family: 'caveatregular';
}

.header2 {
    color: #C70044;
    font-size: 30pt;
    font-style: italic;
    text-align: center;
    font-family: 'caveatregular';
}

.header3 {
    color:black;
    font-size: 22pt;
    margin-bottom: 8pt;
    font-family: 'caveatregular';
}

.link-style {
    color: #C70044;
    font-family: 'caveatregular';
    font-size: 18pt;
}

.paragraph-style {
    font-size: 16pt;
    font-family: 'abelregular';
    font-weight: 100;
}

.bordered-b {
    border-bottom: solid 1px #825840;
}

.book-icon {
    width: 200px;
    height: 210px;
    box-shadow: 2pt 2pt 4px rgba(0,0,0,0.50);
}
.book-icon:hover {
    outline: 2px solid #C70044;
}

.m-t {
    margin-top: 10px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .hero-section {
        font-size: 16pt;
        flex-direction: column;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .hero-section {
        font-size: 20pt;
        flex-direction: column;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .book-section {
        flex-direction: row;
    }

    .hero-section {
        font-size: 24pt;
        flex-direction: column;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .hero-section {
        font-size: 28pt;
        flex-direction: row;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .hero-section {
        font-size: 34pt;
        flex-direction: row;
    }
}