@font-face { 
    font-family: "Auriol"; src: url('data/fonts/Auriol.otf') format('truetype'); 
}

*{
    margin: 0px;
    font-family: "Auriol";
}

#content, html, body {
    height: 100%;
}

/* Left side */

#magnify{
height: 500px;
}

#intro_paragraph{
    vertical-align: middle;
}

#firstnumber{
    vertical-align: middle;
    padding-right: 70px;
    padding-bottom: 100px
}

.box{
    height:400px;
    padding:20px;
    overflow: hidden;

}


.bottom{
    display: flex;
    align-items: flex-end;
}

.subtitles{
    font-weight:bold; 
    font-size:30px;
}

.numbercell{
    vertical-align: top;
    padding-right: 70px;
}

#box1{
    background: #5C2018;
    height:300px;
}
#box2{
    background: #F3E0DC;
}

#box3{
    background: #D4A59A;
}
#box4{
    background: #032730;
}
#box5{
    background: #BC4639;
}
#box6{
    background: #D4A59A;
}
#left {
    float: left;
    width: 70%;
    height: 100%;
    overflow: scroll;
}

/* Right side */
#right {
    float: left;
    width: 30%;
    background:#FFCB9A;
    height: 100%;
    overflow: scroll;
}

#right_title{
background-color:#FFCB9A;
color: #032730;
padding-top:15px;
margin-bottom:20px;
position: sticky;
top:0px;
}

.stamptable{
    text-align:center;
    margin-top:50px;
    color: #032730;
    padding-top:100px;
}

.stamptable p{
    color: #032730;
}

.stamps{
    width:70%;
}

.question-btn{
    width: 60%;
    background-color: #FFCB9A;
    border-color: #032730;
    color:#032730;
    transition-duration: 300ms;
    transition-property:all;
}

.question-btn:hover{
    background-color:#F3E0DC;
    width: 70%;
    color:#032730;
}


.card{
    background-color:#032730;
    transition-duration: 300ms;
    color:#F3E0DC;
}

img{
transition-duration: 300ms;
transition-property:all;
transition-timing-function: ease-in;
}

img:hover{
    transform:scale(1.4);
}