@import url('https://fonts.googleapis.com/css2?family=Itim&family=Open+Sans&display=swap');
@import url(/font-awesome/css/font-awesome.min.css);

html {
    background: url(/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    vertical-align: top;
    font-size: 15px;
    color: #5a5b5d;
}

.logo {
    padding: 2px;
}


.romantik {
    font-size: 48px;
    letter-spacing: 60px;
    line-height: 150px;
}

.char1, .char2, .char3, .char4, .char6, .char7, .char8, .char9, .char11, .char12, .char13, .char14, .char15, .char16, .char17, .char18, .char19, .char20, .char22, .char23, .char24, .char25, .char26, .char27, .char28 {
    font-size: 48px;
    line-height: 48px;
    border-bottom: 5px solid #5a5b5d;
    width: 48px;
    height: 50px;
    padding: 10px;
    display: inline-block;
    margin: 6px;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    /*background-image: url('img/boxbg.jpg');*/
    background-image: linear-gradient(#f4f1de, #f4f1de);
    font-family: 'Itim', cursive;
    color: #5a5b5d;
    border-radius: 6px;
}

.slogan {
    font-size: 58px;
    color: #fff;
    letter-spacing: 6px;
    font-weight:700;
}

.char5 {
    width: 60px;
    height: 60px;
    display: inline-block;
}

.char10, .char21 {
    display: block;
    margin: 10px;
}

.sure {
    padding: 50px 0px 0px 0px;
}

.time {
    border-right: 1px solid rgba(255, 255, 255, 0.50);
    width: 150px;
    height: 70px;
    text-align: center;
    display: inline-block;
    padding: 20px 0px 0px 0px;
    font-size: 26px;
    line-height: 22px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.time2 {
    width: 150px;
    height: 70px;
    text-align: center;
    display: inline-block;
    padding: 20px 0px 0px 0px;
    font-size: 26px;
    line-height: 22px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

    .time span, .time2 span {
        font-size: 16px;
    }

.tarih {
    color: #fff;
    font-size: 26px;
    padding: 25px 0px 0px 0px;
    letter-spacing: 1px;
}

.clr {
    clear: both;
}

@media screen and (max-width: 480px) {

    html {
        background: url(img/bg.jpg) no-repeat 72% center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .logo {
        padding: 2px;
        margin-bottom: 50px;
    }

        .logo img {
            width: 80%;
            margin: 0px auto;
        }

    .char1, .char2, .char3, .char4, .char6, .char7, .char8, .char9, .char11, .char12, .char13, .char14, .char15, .char16, .char17, .char18, .char19, .char20, .char22, .char23, .char24, .char25, .char26, .char27, .char28 {
        font-size: 16px;
        line-height: 16px;
        border-bottom: 2px solid #5a5b5d;
        width: 18px;
        height: 18px;
        padding: 4px;
        display: inline-block;
        margin: 3px;
        box-shadow: 0 0 6px rgba(0,0,0,0.2);
        /*background-image: url('img/boxbg.jpg');*/
        background-image: linear-gradient(#f4f1de, #f4f1de);
        font-family: 'Itim', cursive;
        color: #5a5b5d;
        border-radius: 4px;
    }

    .char5 {
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .sure {
        padding: 100px 0px 0px 0px;
    }

    .time {
        border-right: 1px solid rgba(255, 255, 255, 0.50);
        width: 70px;
        height: 40px;
        text-align: center;
        display: inline-block;
        padding: 10px 0px 0px 0px;
        font-size: 18px;
        line-height: 18px;
        color: #fff;
        font-family: 'Open Sans', sans-serif;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }

    .time2 {
        width: 70px;
        height: 40px;
        text-align: center;
        display: inline-block;
        padding: 10px 0px 0px 0px;
        font-size: 18px;
        line-height: 18px;
        color: #fff;
        font-family: 'Open Sans', sans-serif;
    }

        .time span, .time2 span {
            font-size: 13px;
        }
    .slogan {
        font-size: 38px;
        color: #fff;
        letter-spacing: 2px;
    }
}

@media (min-width: 480px) and (max-width: 860px) {
    .logo {
        padding: 2px;
        margin-bottom: 40px;
    }

    .char1, .char2, .char3, .char4, .char6, .char7, .char8, .char9, .char11, .char12, .char13, .char14, .char15, .char16, .char17, .char18, .char19, .char20, .char22, .char23, .char24, .char25, .char26, .char27, .char28 {
        font-size: 40px;
        line-height: 40px;
        border-bottom: 5px solid #5a5b5d;
        width: 40px;
        height: 42px;
        padding: 8px;
        display: inline-block;
        margin: 6px;
        box-shadow: 0 0 6px rgba(0,0,0,0.2);
        /*background-image: url('img/boxbg.jpg');*/
        background-image: linear-gradient(#f4f1de, #f4f1de);
        font-family: 'Itim', cursive;
        color: #5a5b5d;
        border-radius: 6px;
    }

    .char5 {
        width: 50px;
        height: 50px;
        display: inline-block;
    }
}