/*  COLORS https://visme.co/blog/wp-content/uploads/2016/09/website15.jpg
    #EBC7B7      beige
    #EEE2DC      benvit
    #BAB2B5      ljusgrå
    #123C69      blågrå
    #AC3B61      rosagrå
*/

body {
    background: rgb(187, 187, 187);
    margin: 0px;
    color: #EEE2DC;
    font-family: "Montserrat";
    min-width: 370px;
}

h1, h2, h3 {
    font-family: "Montserrat";
    font-weight: Bold;
    text-shadow: -1px 0px #FFCB9A, 0px 1px #FFCB9A, 1px 0px #FFCB9A, 0px -1px #FFCB9A;
    color: #AC3B61;
}

h1 {
    font-size: 70px; 
    background-color:rgba(172, 59, 97, 0.177);
    padding: 10px 20px;
    border-radius: 120px;
}

h2 {
    font-size: 30px;    
}

h3 {
    font-size: 20px;
    text-align: center;  
}
.content h1, h3 {
    margin: 5px auto;
}

video {
    width: 100%;
    height: 600px;
    object-fit: cover;
    position: relative;
    z-index: -1;
} 

.content {
    width:100%;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
}

.apple-btn {
    height: 50px;
    line-height: 50px;
    width: 150px;
    background-color:#EBC7B7;
    color:   #123C69;
    font-family: "Montserrat";
    font-size: 17px;
    border-radius: 10px;
    font-weight: bold;
    position: relative;
    top: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0px;
        
    
}

.apple-btn:hover {
    background-color:  #BAB2B5 ;
}

.apple-btn img {
    height: 24px;
    position: relative;
    top:4px;
}

container {
    display: grid;
    grid-template-columns: repeat(2, 1fr );
    grid-auto-rows: minmax(auto, auto);
}

/*** Signup section ***/
.signup-section {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 70px;
    display: inline-block;
}
.stylebox-div{
    padding: 5px 0px 30px 0px;
    margin: 20px auto 20px auto;
    height: 490px;
    width: 95%;
    max-width: 450px;
    background-color: #123C69;
    border-radius: 1rem;
    text-align: center;
    
}

input[type="text"], input[type="email"] {
    
    margin: auto;
    display: block;
    width: 60%;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 1rem;
    font-size: 16px;
}

input[type="text"]:focus, input[type="email"]:focus {
    background-color:#EBC7B7; 
    box-shadow: 2px 2px 2px #AC3B61;
}

input[type="submit"] {
    margin: auto;
    display: block;
    width: 12em;
    line-height: 2.5em;
    background-color: #AC3B61;
    font-size: 18px;
    font-weight: bold;
    border:rgb(46, 0, 8) 1px solid;
    border-radius: 15px;
    color: #EEE2DC;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}

input[type="submit"]:hover {
    border:rgb(255, 253, 253) 1px solid;
    color: #EEE2DC;
}

input[type="radio"] {
    margin-left: 1rem;
}

text {
    margin-right: 1rem
}

form div {
    margin: 30px 0px;
}

/*** FAQ section ***/

.question, .answer {
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-size: 14px;
}

.question {
    background-color: #EBC7B7;
    color: #123C69;
    border: 1px #EEE2DC solid;
    font-weight: bold;
    padding-left: 12px;
    cursor: pointer;
}

.question .plus-button {
    padding: 0px;
    margin-right: 10px;
    float: right;
    font-size: 24px;
    width: 20px;
    text-align: center;
}

.answer {
    background-color: #EEE2DC;
    color: #AC3B61;
    display: none;
    padding-left: 20px;
}

.open + .answer {
    display: block;
    -webkit-animation-name: open-answer; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: open-answer;
    animation-duration: 0.8s;
    overflow: hidden;
    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes open-answer {
    from {height: 0px;}
    to {height: 50px;}
  }
  
  /* Standard syntax */
  @keyframes open-answer {
    from {height: 0px;}
    to {height: 50px;}
  }

/*** FOOTER***/
footer{
    width:100%;
    height: 180px;
    background-color: #EBC7B7;
    color: #123C69 ;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*** Media queries ***/

@media (max-width:660px) {

    .apple-btn {
        top: 0px;
    }
    
    container {
        grid-template-columns: unset;
        grid-template-rows: repeat(2, 1fr );
        grid-auto-columns: auto;
    }

    .signup-section, .accordion-section {
        height: auto;
    }
      
    video, .content{
        height: 300px;
    } 

}

@media (max-width:455px) {
    h1 {
        font-size: 60px;    
    }
}