@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

body {
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(17, 17, 17, 1) 75%, rgba(34, 34, 34, 1) 100%);
    background: radial-gradient(circle, rgba(34, 34, 34, 1) 0%, rgba(17, 17, 17, 1) 75%, rgba(0, 0, 0, 1) 100%);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color:#fff;
}

h1, h2, h3, .h1, .h2, .h3 { text-align: center; }
.h1, h1 {
    font-size: 5rem;
}
@media only screen and (max-width: 600px) {
    .h1, h1 {
        font-size: 3rem;
    }
}

a.btn-apple {
    background-color: #65008a !important;
    border:2px solid #490063 !important;
}
a.btn-apple:hover, a.btn-apple:focus, a.btn-apple:active {
    background-color: #6f0894 !important;
}

section.container {
    margin-top: 0px;
    margin-bottom:0px;
    min-height:100vh;
    padding-top: 20vh;
}
section.container > h3 {
    font-size: 2rem;
}

section.container > p {
    margin-top:5rem;
    font-size: 1.8rem;
    font-weight: lighter;
}
section.container.intro {
    margin-top:20vh;
    padding-top:0px; 
}
section.container.guarantee {
    margin-top: 20vh;
}

section.container.top {
    padding-top: 10vh;
}
section.container.top .left-col {
    padding-top:20vh;
    padding-bottom:20vh;
}

@media only screen and (max-width:600px){
    .intro .book .row > div.p-5 {
        padding-left:10px !important;
        padding-right:10px !important;
    }
}
@media only screen and (min-width: 50em) {
    .intro .book { transform: rotate(-2deg); }

    .open-book {
        margin: 1em;
        position: relative;
    }

    .open-book:before {
        background-color: #8B4503;
        border-radius: 0.25em;
        bottom: -1em;
        content: '';
        left: -1em;
        position: absolute;
        right: -1em;
        top: -1em;
        z-index: -1;
    }

    .open-book:after {
        background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 46%, rgba(0, 0, 0, 0.5) 49%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.5) 51%, rgba(0, 0, 0, 0.2) 52%, transparent 100%);
        bottom: -1em;
        content: '';
        left: 50%;
        position: absolute;
        top: -1em;
        transform: translate(-50%, 0);
        width: 4em;
        z-index: 1;
    }

    /* Header/Footer */
    .open-book .header:before,
    .open-book .header:after,
    .open-book .footer:before,
    .open-book .footer:after {
        background: #fff;
        border-radius: 25%;
        content: '';
        height: 3em;
        position: absolute;
        z-index: -1;
        width: calc(50% + 0em);
    }

    .open-book .header:before,
    .open-book .footer:before,
    .open-book .footer:after {
        border-top-left-radius: 0;
    }

    .open-book .header:after,
    .open-book .footer:before,
    .open-book .footer:after {
        border-top-right-radius: 0;
    }

    .open-book .header:before,
    .open-book .header:after,
    .open-book .footer:after {
        border-bottom-right-radius: 0;
    }

    .open-book .header:before,
    .open-book .header:after,
    .open-book .footer:before {
        border-bottom-left-radius: 0;
    }

    .open-book .header:before,
    .open-book .header:after {
        top: -0.35em;
    }

    .open-book .header:before,
    .open-book .footer:before {
        right: 50%;
    }

    .open-book .header:before {
        transform: rotate(-2deg);
        background-color:#000;
    }

    .open-book .header:after,
    .open-book .footer:after {
        left: 50%;
    }

    .open-book .header:after {
        transform: rotate(2deg);
    }

    .open-book .footer:before,
    .open-book .footer:after {
        bottom: -0.35em;
    }

    .open-book .footer:before {
        transform: rotate(2deg);
        background-color:#000;
    }

    .open-book .footer:after {
        transform: rotate(-2deg);
    }

}



/* faqs */
.questions details summary {
    font-size: 2.5em;
}
@media only screen and (max-width: 600px) {
    .questions details summary {
        font-size: 1.5em;
    }
}
.questions details {
    cursor: pointer;
    margin-top:20px;
    margin-bottom:20px;
    padding:10px;
    margin-bottom:10px;
    border-radius: 10px;
    background-color: #111;
    transition: all 0.5s ease;
    border:2px solid #222;
}
.questions details:open,
.questions details:hover {
    background-color:#222;
}
.questions details summary.h4 { margin-top: .5rem; }
.questions details div {
    color: #ccc;
}
.questions details summary::-webkit-details-marker,
.questions details summary::marker{
    display:none !important;
    content:'';
}
.questions details summary::after{
    content: '+';
    float: right;
    margin-right: 10px;
    transition: .5s ease;
}
.questions details:open summary::after{
    transform: rotate(45deg);
}


/* device-photos */


.device {
    width: 40%;
        /* border: 8px solid #404040; */
    background: linear-gradient(white, white) padding-box, linear-gradient(to right, #222, #111) border-box;
    border: 8px solid transparent;
    border-radius: 35px;
    transition: filter 1s ease;
    box-shadow: 8px 2px 20px 10px #000;
}

@media only screen and (max-width:600px){
    .device-container { margin:50px; display:block; }
    .device-container .device {}
    .device-container .device img { width:90%;}
}

@media only screen and (min-width:600px){
    .device-container {
        display: inline-block;
    }
    .device-container.rotate-right {
        transform: rotate(10deg)
    }
    .device-container.rotate-left {
        transform: rotate(-10deg)
    }
    .container.top .device1 {
        position:absolute;
        top:20px;
        left: 10%;
        width:50%;
    }
    .container.top .device2 {
        position:absolute;
        top:20px;
        right: 15%;
        width:50%;
    }
}