*{
    margin:0;
    font-family: 'Poppins', 'Helvetica';
}

:root{
    --primary-text:#f4f8ff;
    --secondary-text:white;
    --primary-background:#f4acb7;
    --secondary-background:#ffcad4;
    --tertiary-background:#696d7d;
}

.header{
    background-color: var(--primary-background);
    padding-left:1rem;
    padding-right:1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    color:var(--primary-text);
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.header h1{
    font-size:2.5rem;    
}

.container{
    text-align: center;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height:calc(100vh - 76px);
}
.container .buttons{
    padding-bottom:0.5rem;
    display:flex;
    flex-direction: row;
    justify-content: right;
}
.container video{
    width:50rem;
}
.container button{
    height:3rem;
    width:3rem;
    border-radius:3rem;
    margin:0.2rem;
    border:0;
    cursor:pointer;
    background-color: rgb(145, 226, 199);
    transition: ease 0.5s;
}
.container button:last-child{
    background-color: rgb(133, 206, 248);
}
.container button:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.container .bubble{
    width:18rem;
    background-color:var(--primary-background);
    margin:0.4rem;
    margin-left:1rem;
    border-radius:1.5rem;
    padding:1rem;
    transition: ease 0.5s;
    position: relative;
}
.container .bubble:hover{
    width:19rem;
    margin-left:0;
    transform: translateX(0.5rem);
}
.container .bubble p{
    word-wrap: break-word;
    text-align: left;
    font-size:1rem;
    color:var(--secondary-text);
}
.container .bubble h2{
    text-align: left;
    color:var(--primary-text);
    font-size:1.25rem;
}

.vid-container { position:relative; }
.vid-container video {
    position:relative;
    z-index:0;
}
.overlay {
    position:absolute;
    bottom:1rem;
    left:1rem;
    z-index:1;
}
.overlay p{
    font-size:2rem;
    color:white;
}
.overlay p span#name{
    font-weight:bold;
}

@media only screen and (max-width: 1200px) {
    .container video{
        width:40rem;
    }
    .overlay p{
        font-size:1.5rem;
    }
    .container .bubble p{
        font-size:.8rem;
    }
    .container .bubble h2{
        font-size:1.1rem;
    }

    .container button{
        height:2.5rem;
        width:2.5rem;
    }
}
@media only screen and (max-width: 1050px) {
    .container video{
        width:30rem;
    }
    .overlay p{
        font-size:1.2rem;
    }
    .container .bubble{
        width:16rem;
        padding:0.7rem;
    }
    .container .bubble:hover{
        width:17rem;
    }
    .container .bubble p{
        font-size:.75rem;
    }
    .container .bubble h2{
        font-size:1rem;
    }
}
@media only screen and (max-width: 850px) {

    .container{
        flex-direction: column;
    }

    .container video{
        width:35rem;
    }
    .overlay p{
        font-size:1.5rem;
    }

    .container .bubble{
        display:inline-block;
    }
}

@media only screen and (max-width: 615px) {
    .container video{
        width:30rem;
    }
    .overlay p{
        font-size:1.2rem;
    }
    .container .bubble{
        width:14rem;
    }
    .container .bubble:hover{
        width:15rem;
    }
    .container .bubble p{
        font-size:.75rem;
    }
    .container .bubble h2{
        font-size:1rem;
    }
    .header h1{
        font-size:1.5rem;    
    }
}
@media only screen and (max-width: 550px) {
    .container video{
        width:28rem;
    }
    .overlay p{
        font-size:1.2rem;
    }
    .container .bubble{
        width:28rem;
    }
    .container .bubble:hover{
        width:29rem;
    }
}
@media only screen and (max-width: 510px) {
    .container video{
        width:22rem;
    }
    .container .bubble{
        width:22rem;
    }

    .container .bubble:hover{
        width:23rem;
    }
    .header h1{
        font-size:1.2rem;
        text-align: center;  
    }
}

.spin {
    margin: 0.2rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid #ccc;
    animation: spin 1.5s linear infinite;
    border-bottom-color: var(--tertiary-background);
    border-top-color:  var(--tertiary-background);
}
.hide{
    display:none;
}
@keyframes spin {
    from {transform: rotate(0);}
    to {transform: rotate(360deg);}
}