@font-face {
    font-family: ReggaeOne;
    src: url("ReggaeOne-Regular.ttf");
}
/*
 * Base Styling
 */
#popup_div {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 600px;
    height: 428px;
    margin-left: -300px;
    margin-top: -100px;
    background-repeat: no-repeat;
}

.theme_button {
    transition-duration: 0.1s;
    width: 150px;
    height: 40px;
    text-align: center;
    font-family: ReggaeOne;
    font-size: 18px;
}

.theme_button:hover {
    transform: scale(1.1);
}

.theme_textarea {
    width: 550px;
    height: 280px;
    box-sizing: border-box;
    font-size: 28px;
    resize: none;
    margin-bottom: 5px;
}

.popup_title {
    font-family: ReggaeOne;
    font-size: 25px;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: 30px;
}

/*
 * Parchment Theme
 */
#popup_div.Parchment {
    background-image: url("popup_background_parchment.png");
}

.theme_button.Parchment {
    background-color: #EBD5BD;
    border: 3px solid #B16541;
}

.theme_button.Parchment:hover {
    background-color: #FFE3A0;
}

.theme_textarea.Parchment {
    background-color: #EBD5BD;
}

.popup_title.Parchment {
    color: #000000;
}

/*
 * Jade Theme
 */
 #popup_div.Jade {
    background-image: url("popup_background_jade.png");
}

.theme_button.Jade {
    background-color: #D6DBCF;
    border: 3px solid #244633;
}

.theme_button.Jade:hover {
    background-color: #F9C4A5;
}

.theme_textarea.Jade {
    background-color: #F9F5D8;
}

.popup_title.Jade {
    color: #000000;
}

/*
 * Sakura Dark Theme
 */
 #popup_div.SakuraDark {
    background-image: url("popup_background_sakura_dark.png");
}

.theme_button.SakuraDark {
    background-color: #F7C4C9;
    border: 3px solid #FD7885;
}

.theme_button.SakuraDark:hover {
    background-color: #FFA0A9;
}

.theme_textarea.SakuraDark {
    background-color: #424142;
    color: #E4F3F7;
}

.popup_title.SakuraDark {
    color: #E4F3F7;
}

/*
 * Sakura Light Theme
 */
 #popup_div.SakuraLight {
    background-image: url("popup_background_sakura_light.png");
}

.theme_button.SakuraLight {
    background-color: #F7C4C9;
    border: 3px solid #FD7885;
}

.theme_button.SakuraLight:hover {
    background-color: #FFA0A9;
}

.theme_textarea.SakuraLight {
    background-color: #E4F3F7;
    color: #424142;
}

.popup_title.SakuraLight {
    color: #424142;
}

/*
 * Great Wave Theme
 */
 #popup_div.GreatWave {
    background-image: url("popup_background_great_wave.png");
}

.theme_button.GreatWave {
    background-color: #D0E0D2;
    border: 3px solid #266289;
}

.theme_button.GreatWave:hover {
    background-color: #5C94B9;
}

.theme_textarea.GreatWave {
    background-color: #F7EFD6;
    color: #000000;
}

.popup_title.GreatWave {
    color: #000000;
}

/*
 * Lantern Theme
 */
 #popup_div.Lantern {
    background-image: url("popup_background_lantern.png");
}

.theme_button.Lantern {
    background-color: #F7C46A;
    border: 3px solid #EF7908;
}

.theme_button.Lantern:hover {
    background-color: #FDB538;
}

.theme_textarea.Lantern {
    background-color: #292929;
    color: #FFF8DC;
}

.popup_title.Lantern {
    color: #FFF8DC;
}