:root{
    --text:#5453c7; /*main text*/
    --accent:#c47cff; /*main text*/
    --badge:#bfcbff;
    --sorba:#ffbfda;
    --tart:#caffbf;
}

body{
    font-family: ms pgothic;
    font-size:18pt;
    background-color:#e7fff1;
    /*background-image:url('../media/images/sl_274.png');*/
    text-align:center;
    color:var(--text);
}

img{
    max-width:100%;
    max-height:400px;
}

h3{
    font-size:16pt;

    margin:auto;
    margin-top:0px;

    text-align: left;
    background-color:var(--text);
    border: 10px solid var(--text);
    color:#889ae9;
    max-width:800px;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    
    position:relative;
    z-index: 100;
}

hr{
    border:none;
    border-bottom:5px solid var(--text);
}

.icon{
    margin:10px;
    width:300px;
    float: inline-start;
    padding-bottom:30px;
}

.button, .button2{
    background-color:#ffbcf3;
    background-image:linear-gradient(#ffbcf3, #8ad4ff);
    color:#4f5dda;

    font-family: ms pgothic;
    font-size:16pt;

    border: none;

    border-radius: 20px;
    width:1000px;
    max-width:14%;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

    position:relative;
    z-index: -1;
}

.button2{
    background-color:var(--text);
    background-image:linear-gradient(var(--text), #33227e);
    color:#b7bef7;
}

.button:hover, .button2:hover{
    background-color:var(--text);
    background-image:linear-gradient(#7eceee, var(--text));
    color:#ffffff;
}

.mainbox{
    text-align:center;
    margin:auto;
    background-color:#c6e1ff;
    background-image:linear-gradient(to bottom left, #ffc983, #ffb2e8);

    max-width:800px;
    padding:10px;

    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;

    filter: drop-shadow(5px 5px var(--accent));

    z-index: 1;
}

.navbar{
    text-align:left;
    margin:auto;
    max-width:800px;
    filter: drop-shadow(5px 5px var(--accent));
}

.places{
    background-color:#caffbf;
    background-image:linear-gradient(to right, #ffccf8, #fff2a7);
}

.badge{
    background-color:(--badge);
    background-image:linear-gradient(to bottom right, var(--badge), #d1adff);
}

.sorba{
    background-color:var(--sorba);
    background-image:linear-gradient(to left, var(--sorba), #d0bcff);
}

.tart{
    background-color:#caffbf;
    background-image:linear-gradient(to left, var(--tart), #97bcff);
}

#badge, #sorba, #tart, #intro, #places{
    display:none;
}

.mainbox img{
    filter: drop-shadow(5px 5px var(--text));
}

/*mobile only*/
@media only screen and (max-width: 600px)
{
.icon{
    width:100%;
}

.button{
    min-width:40%;
}

}