/* RESET */
* {margin: 0; padding: 0; text-decoration: none;}
html, body {overscroll-behavior: none; background: #f1f1f1;}

.mobileWrapper {
    width: 100vw;
    display: flex;
    padding: 20px 0;
    background: rgba(255,255,255,0.15);
    margin-bottom: -15px;
}
.mobileWrapper p {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin: auto;
    transition: 0.3s;
}
.mobileWrapper:hover .mobileWrapper p {scale: 0.95;}

header {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 120px;
    z-index: 9999;
    background: none;
}
.logoSet {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    margin-left: 100px;
}
.logoSet:hover {cursor: pointer;}
.icon {
    height: 60%;
}
.logoSet h2 {
    color: white;
    margin-left: 10px;
    font-size: 40px;
    letter-spacing: 3px;
}

@media (max-width: 1180px) {.logoSet h2 {font-size: 35px; letter-spacing: 0}}
@media (max-width: 430px) {
    .icon {display: none;}
    .logoSet {margin-left: 2%;}
    .logoSet h2 {font-size: 22px;}
}

header a {text-decoration: none; font-size: 18px; font-weight: 450; color: lightgray; transition: 0.3s;
    text-shadow:
            1px 1px 0 #3e2560,
            1px 1px 5px #3e2560;}
header a:hover {color: white; font-weight: bold;}

.desktopNav {
    position: absolute;
    right: 100px;
    display: flex;
    width: 42%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    transition: 0.3s;
}
.desktopNav li, .mobileNav li {list-style: none;}

@media (max-width: 1200px) {
    .desktopNav {right: 50px; width: 50%;}
    .logoSet {margin-left: 50px;}
}

/* HAMBURGER */
.menu {
    z-index: 616;
    position: absolute;
    right: 5%;
    display: none; /* hidden on desktop */
    flex-direction: column;
    justify-content: space-evenly;
}
.menu:hover, .userArea:hover, .mobileUserArea:hover {cursor: pointer;}
.menu span {
    margin: 2px 0;
    border-radius: 5px;
    width: 35px;
    height: 10px;
    background: #fff;
    transition: 0.3s;
}

.mobileMenu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #3e2560;
    padding: 20px 0;
    transition: 0.3s;
}
.mobileMenu a {
    margin-left: 50px;
    display: block;
    padding: 14px 0;
    color: white;
    font-size: 22px;
}
.mobileMenu a:hover {cursor: pointer;}


/* RESPONSIVE */
@media (max-width: 1000px) {
    .desktopNav {display: none;}
    .menu {display: flex;}
    .logo,.logoChanged {margin-left: 20px;}

    .loginBtn {
        padding: 0;
        margin-bottom: -18px;
        width: 100%;
    }
}

/* When active */
.menu.active span:nth-child(1) {transform: translateY(12px) rotate(45deg);}
.menu.active span:nth-child(2) {opacity: 0;}
.menu.active span:nth-child(3) {transform: translateY(-12px) rotate(-45deg);}

/* When menu is open */
@media (max-width: 900px) {
    .mobileMenu.open {
        display: flex;
    }
}

#header[data-page="home"] header {.PositionMain a {color: white; font-weight: bold;}}
#header[data-page="ourActors"] header {background: #3e2560; .PositionOurActors a {color: white; font-weight: bold;}}
#header[data-page="tickets"] header {background: #3e2560; .PositionTickets a {color: white; font-weight: bold;}}
#header[data-page="direction"] header {background: #3e2560; .PositionDirection a {color: white; font-weight: bold;}}
#header[data-page="about"] header {background: #3e2560; .PositionAbout #drop {color: #3e2560;}}

.PositionAbout a {
    background: white;
    padding: 5px 15px;
    border-radius: 10px;
    color: #3e2560;
    text-shadow: 0 0 black;
    font-weight: bold;
}

.PositionAbout a:hover {
    color: black;
    border-radius: 5px;
}

.PositionAbout:hover .dropdown {
    display: block;
}

.dropdown {
    width: 150px;
    display: none;
    position: absolute;
    background: white;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.dropdown li {
    text-align: left;
    margin: 10px 0;
}

.dropdown li a {
    background: none;
    color: #b28fdd;
}

.dropdown li a:hover {
    color: #3e2560;
}