@charset "utf-8";

@font-face {
    font-family: Playfair Display Bold;
    src: url(../fonts/PlayfairDisplay-Bold.ttf);
}

@font-face {
    font-family: Playfair Display Regular;
    src: url(../fonts/PlayfairDisplay-Regular.ttf);
}

@font-face {
    font-family: Cormorant Garamond Medium;
    src: url(../fonts/CormorantGaramond-Medium.ttf);
}

@font-face {
    font-family: Cormorant Garamond SemiBold;
    src: url(../fonts/CormorantGaramond-SemiBold.ttf);
}

* {
    color: #252525;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


html,
body {
    height: 100%;
}

::selection {
    background-color: #e62424;
    color: #FEFDEA;
}

body {
    background-color: #FEFDEA;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

button {
    border: none;
    cursor: pointer;
    padding:.5rem;
    background-color: #FEFDEA;
}

#question {
    animation-name: opacitych;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    flex: 1 0 auto;
    min-height: 30rem;
    opacity: 1;
    transition: opacity .5s ease-in-out;
}

@keyframes opacitych {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#question h2 {
    position: relative;
    font-size: 1.5rem;
    margin: 0 auto;
    top: 7rem;
    width: 23.5rem;
    display: block;
    font-family: Playfair Display Bold;
}

#question div {
    display: flex;
    padding-left: 1rem;
    flex-direction: column;
    justify-content: flex-start;
}

.choice {
    position: relative;
    font-size: 1rem;
    background-color: #FEFDEA;
    cursor: pointer;
    margin: 0 auto;
    text-align: left;
    width: 28em;
    padding-left:2rem;
    border: none;
    display: block;
    font-family: Playfair Display Bold;
}


#choice1 {
    top: 12rem;
}

#choice2 {
    top: 14rem;
}

#choice3 {
    top: 16rem;
}

#choice4 {
    top: 18rem;
}

#choice5 {
    top: 20rem;
}


#choice6 {
    top: 22rem;
    padding-left:2.5rem;
}

.red {
    color: #e62424;
}

.container {
    display: none;
    transition: opacity .55s ease-in-out;
    opacity: 0;
    flex: 1 0 auto;
    max-width: 40rem;
    grid-template-columns: repeat(auto, 1fr);
    grid-template-rows: repeat(auto, 1fr);
    margin: 0 auto;
    justify-content: center;
}


button {
    outline: none;
}



#question button:hover {
    filter: opacity(0.7);
    transition: filter .4s ease-in-out;
}


.container button:hover {
    color: #e62424;
    transition: color .4s ease-in-out;
}


h1,
h2 {
    font-size: 2rem;
    font-family: Playfair Display Bold;
}

.title {
    grid-row: 1/2;
    width: 100%;
    height: 5rem;
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    grid-column: 5/8;
}

h2 {
    font-size: 1rem;
}


.buttons {
    grid-row: 3/4;
    grid-column: 6/7;
}

.buttons button img:nth-child(2) {
    display: none;
}

.buttons button:hover img:nth-child(1) {
    display: none;
}

.buttons button:hover img:nth-child(2) {
    display: block;
}

.front {
    margin-left: 1rem;
}

.back {
    margin-right: 1rem;
}

.front img,
.back img {
    width: 1.25rem;
}


.part {
    grid-row: 2/3;
    text-align: left;
    font-size: 1rem;
    grid-column: 4/9;
    margin-left: 1rem;
    align-self: flex-start;
    font-family: Cormorant Garamond SemiBold;
    transition: opacity .5s ease-in-out;
    opacity: 0;
}

#part7,
#part8 {
    margin-left: 1rem;
}

#part13,
#part14,#part15 {
    padding-left: 7rem;
}

.number {
    display: block;
    font-size: 1rem;
    margin-left: -1rem;
    margin-bottom: -1.65rem;
    text-align: center;
    grid-row: 4/5;
    grid-column: 7/7;
}
#container5 .number {margin-left:-8rem;}
#container3 .number {
    margin-left: -1rem;
}

.image1 {
    margin-top: 1rem;
    position: relative;
    left: -.3rem;
    width: 101vw;
}

.image2 {
    margin: 0 auto;
    width: 101vw;
    position: relative;
    z-index: -1;
    left: -.3rem;
    bottom:-12rem;

    transform: rotate(180deg);
    margin-bottom: 1rem;
}

.return {
    background-color: #FEFDEA;
    border: none;
    display: block;
    cursor: pointer;
    font-family: Playfair Display Bold;
    grid-row: 5/6;
    grid-column: 7/7;
    margin-top: 4vh;
    margin-left:.75rem;
    margin-bottom: 4vh;
    font-size: 1rem;
}

#pen {width:8rem;}

.pen {margin:0 auto !important;}
html {
    font-size: 14px;
}
.penno {padding-left:1rem;}

@media screen and (min-width: 250px) {

    html {
        font-size: calc(12px + 10 * ((100vw - 320px) / 640));
    }
}

@media screen and (min-width: 1000px) {

    html {
        font-size: 22px;
    }
}