@font-face {
    font-family: dancing;
    src: url(../fonts/dancing.ttf);
}

@font-face {
    font-family: arimo;
    src: url(../fonts/arimo.ttf);
}
@font-face {
    font-family: news;
    src: url(../fonts/news.ttf);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: black;
    background-size: center;
    position: relative;
}
.container {
    margin: 0 auto;
    max-width: 1900px;
}
.header {
    background-image: url("../images/12524background.png");
    background-size: 800px 800px;
}
.top-header {
    z-index: 200;
    width: 100%;
    background-image: url(../images/12524background.png);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    background-color: rgba(255, 0, 0, 0.085);
    border-bottom: 2px solid gold;
    position: sticky;
    top:0;
}
.logo img{
 width: 100px;
 margin-left: 20px;
 border: 1px solid white;
}
.menu {
    color: white;
    font-size: 2rem;
    display: none;
}
.mobile-menu {
    display: none;
}
.show {
    display: block;
}
.menuBtn {
    display: none;
    padding: 10px;
}
.nav ul {
    display: flex;
    width: 100%;
}
.nav ul li{
    list-style: none; 
}
.nav ul li a {
    text-decoration: none;
    padding: 10px;
    margin-right: 15px;
    font-family: dancing;
    color: goldenrod;
    font-size: 1.5rem;
    font-weight: bold;
    border: 1px solid goldenrod;
}
.nav ul li a:hover {
    background-color: lemonchiffon;
}
.web {
    margin:30px;
}
.web p, i{
    text-align: center;
    color:white;
    font-family: news;
}
.web a {
    text-decoration: none;
    color: white;
    cursor: pointer;
}
.topic {
    width: 100%;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    background-image: url(../images/35567.jpg);
}
.topic image{
    opacity: 0.9;
}
.ladies {
    width: 100%;
}
.ladies img {
    margin: 30px auto;
    display: block;
    width: 50%;
}
.topic h1 {
    font-size: 4rem;
    color: goldenrod;
    text-shadow: 2px 2px rgb(0, 0, 0);
    text-align: center;
    font-family: arimo;
}
.caption {
    border-top: 2px solid gold;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(53, 107, 214, 0.279);
}
.caption p {
    text-align: center;
    font-size: 2.8rem;
    padding: 30px;
    color:goldenrod;
    text-shadow: 1px 1px rgb(34, 33, 33);
    width: 100%;
    font-family: dancing;
    font-weight: bold;
}
.snippet {
    display: flex;
    justify-content: space-around;
    background-color: rgb(79, 4, 4);
    padding: 30px 0 30px 0;
    border-bottom: 3px solid goldenrod;
}
.snippet img {
    width: 30.5%;
    box-shadow: 10px 10px rgba(0, 0, 0, 0.636);
}
.video-caption {
    width: 100%;
    background-color: rgb(62, 3, 3);
}
.video-caption p {
    color: goldenrod;
    text-align: center;
    padding: 10px;
    font-family: dancing;
    font-weight: bold;
    font-size: 2rem;
}
.videos {
    background-image: url("../images/candid.png");
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-content: center;
}
.videos video {
    width: 99%;
    height: 450px;
    border: 4px solid goldenrod;
    transition: border 2s;
    background-color: rgba(255, 0, 0, 0.18);
}
.videos video:hover {
    border: 5px solid red;
    cursor: pointer;
}
.method {
    background-color: rgb(31, 27, 27);
    color: goldenrod;
    text-shadow: 1px 1px red;
    text-align: center;
    font-family: dancing;
    padding: 20px;
    font-size: 1.2rem;
}
.article {
    background-image: url(../images/romantic-black-couple-sitting-restaurant-wearing-elegant-clothes.jpg);
    background-size: cover;
    height: 800px;
    width: 100%;
}
.article h1{
    color: rgb(0, 0, 0);
    font-family: news;
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    padding-top: 350px;
}
.time {
    width: 100%;
    padding: 20px;
    font-family: arimo;
    background-color: rgba(165, 42, 42, 0.895);
    }
    .time h2 {
        text-align: center;
        color: goldenrod;
        padding-bottom: 30px;
        padding-top: 30px;
    }
    .time h3 {
        text-align: center;
        color: rgb(9, 189, 189);
    }
    .time h4 {
        text-align: center;
        margin-bottom: 20px;
        color: white;
    }
.footer {
    background-color: rgb(31, 27, 27);
    border-top: 15px solid white;
    display: flex;
    justify-content: space-around;
    padding-top: 80px;
}
.address {
    padding: 50px;
}
.address h2 {
    text-align: center;
    color: white;
    font-family: news;
    font-weight: bold;
    font-size: 2rem;;
}
.address p {
    text-align: center;
    padding-top: 20px;
    font-family: news;
    color: white;
}
.social {
    padding: 50px;
}
.social h2 {
        text-align: center;
        color: white;
        font-family: news;
        font-weight: bold;
        font-size: 2rem;;
    }
    .social p {
        text-align: center;
        padding-top: 20px;
        font-family: news;
        color: white;
    }
    .social i {
        color: white;
        font-size: 1rem;
        text-align: center;
    }
    .social a {
        text-decoration: none;
        color: white;
    }
.footer-add {
    padding: 20px;
    color: white;
    background-color: black;
    border-top: 5px solid goldenrod;
}
.footer-add p {
    text-align: center;
}
@media screen and (max-width: 912px){
    .logo img {
        width: 100px;
    }
}
@media screen and (max-width: 812px) {
    .top-header {
        position: relative;
    }
    .mobile-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 100;
        background-color: rgb(102, 7, 7);
        width: 100%;
    }
    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .mobile-menu li {
        display: block;
        margin: 0 auto;
        padding: 10px;
        width: 100%;
        text-align: center;
        margin: 30px;
    }
    .mobile-menu a {
        text-align: center;
        padding: 10px;
        font-size: 1.5rem;
        text-decoration: none;
        color: goldenrod;
        font-family: news;
        font-weight: bold;
    }
    .hookah {
        width: 100%;
        display: flex;
        align-items: bottom;
        justify-content: center;
    }
    .hookah img {
        width: 100%;
        /* filter: blur(1px); */
    }
    .logo {
        font-size: 1.5rem;
        padding: 10px;
        margin-left: 10px;
    }
    .nav ul li a {
        font-size: 1rem;
    }
    .topic h1 {
        font-size: 2.5rem;
        margin-top: 50px;
    }
    .caption p {
        font-size: 1.5rem;
        text-align: center;
        width: 100%;
    }
    .ladies img{
        width: 100%;
        margin: 15px auto;
    }
    .snippet {
        display: flex;
        flex-direction: column;
        background-color: rgb(31, 27, 27);
        padding: 30px 0 30px 0;
    }
    .snippet img {
        width: 100%;
        padding: 0;
    }
    .videos video {
        margin-bottom: 10px;
    }
}
@media screen and (max-width: 590px) {
    .nav ul {
        display: none;
        width: 100%;
    }
    .mobile-menu {
        display: none;
        height: 100vh;
        z-index: 100;
        top: 120px;
        left: 0;
        background-image: url(../images/hook.jpg);
        background-size:  center;
        background-repeat: no-repeat;
    }
    .menuBtn {
        position: relative;
        display: inline-block;
    }
    .menuBtn i {
        color: rgb(192, 189, 189);
        font-size: 2rem;
        margin-right: 20px;
        position: absolute;
        top: -8px;
        right: 0;
    }
    #close {
        display: none;
    }
    .caption p{
        padding: 15px;
    }
}
@media screen and (max-width: 420px) {
    .topic h1 {
        font-size: 2rem;
        margin-top: 0;
        padding-top: 50px;
    }
    .footer {
        flex-direction: column;
    }
}