/* css reset */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* //////////////////////////////////// */

/* start code */
/* universal code */

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

:root {
    font-family: Arial, Helvetica, sans-serif;
    --dark-pink: #f4a4b9;
    --black: #1e1e24;
    --med-pink: #f0b9c6;
    --light-pink: #eed3da;
    --yellow: #ffdc5e;
    --white: #FFFFFF;
    --title-font : 'Abril Fatface', serif;
}


body {
    margin: 0 auto;
    overflow-x: hidden;
}

.skipLink {
    position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
    text-decoration: none;
    color: var(--dark-pink);
}
.skipLink:focus {
    position: static;
    width: auto;
    height: auto;
}

.hide {
    position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

h2 {
    font-family: var(--title-font);
    font-size: 3rem;
    margin: 30px 0 15px 0;
}

h3 {
    font-family: var(--title-font);
    font-size: 3rem;
    margin: 30px 0 15px 0;
}

p::selection, a::selection, h2::selection, h3::selection, td::selection, th::selection {
    color: var(--white);
    background-color: var(--dark-pink);
}

/* /////////////////////////////////////// */
/* header */

header {
    width: 100vw;
    height: 30vh;
    position: fixed;
    background-image: linear-gradient(var(--white), rgba(255, 255, 255, 0));
    display: flex;
    justify-content: space-between;
    z-index: 6;
    top: 0;
}

#home {
    width: 20vw;
    transition: fill 1s;
    float: left;
    z-index: 5;
    padding: 10px;
}

button {
    border: none;
    background: none;
    visibility: hidden;
    display: none;
}

#nav {
    right: 5vw;
    top: 5vh;
    width: 50vw;
    height: 16vh;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: center;
    margin-top: 30px;
    gap: 20px;
    z-index: 5;
}

ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
    gap: 10px;
    flex-grow: 1;
    margin-bottom: 20px;
}

#langList {
    justify-content: center;
    gap: 20px;
    border-radius: 100px;
    align-items: center;
}

#langList a {
    padding: 15px;
}

a {
    text-decoration: none;
    color: var(--black);
    transition: color 1s;
    font-size: 1.2rem;
}

a:hover {
    color: var(--dark-pink);
    font-weight: bold;
    border-bottom: 1px solid var(--dark-pink);
}

/* .prefEng {
    background-color: var(--dark-pink);
    border-radius: 100px;
    color: var(--white);
    font-weight: bold;
}

.prefEng:hover {
    background-color: transparent;
    color: var(--dark-pink);
    text-decoration: none;
    border: solid var(--dark-pink) 1px;
    border-radius: 100px;
}

.prefKOR:hover{
    color: var(--dark-pink);
    text-decoration: none;
    border: solid var(--dark-pink) 1px;
    border-radius: 100px;
} */

#home:hover {
    fill: var(--dark-pink);
    font-weight: normal;
    border: none;
}

nav p {
    flex-grow: 1;
}

a[href="tel:+1(623)300-8798"]{
    color: var(--dark-pink);
}

p {
    font-size: 1.2rem;
}

/* ////////////////////////////////// */
/* main */

#img1 {
    background-image: url("img/aybeauty.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
}

/* ////////////////////////////////////// */
/* about section */

#about {
    height: 100vh;
    margin-left: 5vw;
    width: 90vw;
    display: flex;
    align-items: center;
    gap: 30px;
}

#about img {
    width: 40vw;
    height: auto;
}

/* ////////////////////////////////////// */
/* services section */

#services {
    height: 100vh;
    margin-left: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}

#servicesMenu {
    display: flex;
    flex-direction: row;
    gap: 10%;
}

table {
    width: 30%;
    font-size: 1.5rem;
}
td {
    padding: 15px;
}

td:last-child{
    text-align: right;
}

#moreServiceInfo {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#moreServiceInfo a[href="services.html"],  #moreServiceInfo a[href="servicesKOR.html"]{
    padding: 10px;
    width: 30%;
}

#moreServiceInfo a[href="services.html"]:hover, #moreServiceInfo a[href="servicesKOR.html"]:hover {
    border: solid 2px var(--dark-pink);
    border-radius: 100px;
}

/* ////////////////////////////////////// */
/* stylists section */

#meetStylists {
    height: 100vh;
    width: 90vw;
    margin-left: 5vw;
    display: flex;
    align-items: center;
}

#stylistCards {
    display: flex;
}

#stylistCards::-webkit-scrollbar {
    width: 0;
}

figure {
    position: relative;
    transition: all 1s;
}
figure:nth-child(2){
    left: 10vw;
    z-index: 4;
}

figure:nth-child(3) {
    left: 5vw;
    bottom: -20px;
    z-index: 3;
}

figure:nth-child(4) {
    left: -3vw;
    bottom: -40px;
    z-index: 2;
}

figure:nth-child(5) {
    left: -6vw;
    bottom: -60px;
    z-index: 1;
}

figure:hover {
    transform: scale(1.2, 1.2);
    z-index: 5;
}

figure img{
    width: 20vw;
    border-radius: 50px;
}

.name {
    font-weight: 900;
    font-size: 2.3rem;
    position: absolute;
    bottom: 90px;
    left: 30px;
    color: var(--white);
}



figure p:last-child {
    font-style: italic;
    position: absolute;
    bottom: 50px;
    left: 30px;
    color: var(--white);
}

figure img {
    transition: all 1s;
}

figure img:hover {
    filter: brightness(50%);
    font-weight: auto;
    cursor: pointer;
}

figure a:hover {
    border: none;
}

/* ////////////////////////////////////// */
/* contact section */

#contact {
    height: 100vh;
    width: 85vw;
    margin-left: 5vw;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.instagram-media {
    box-shadow:0 0 1px 0 var(--dark-pink),0 1px 10px 0 var(--dark-pink);
    transition: all 1s;
    transform: scale(.75, .75);
}

.instagram-media:hover {
    box-shadow:0 0 1px 0 var(--yellow),0 1px 10px 0 var(--yellow);
}

#viewText {
    color: var(--dark-pink);
}

.instagram-media svg g {
    fill: var(--dark-pink);
}

#contactInfo {
    display: flex;
    flex-flow: column;
    gap: 40px;
}

#contactInfo table {
    display: flex;
    flex-flow: column;
    text-align: left;
}

#contactInfo th, #contactInfo td {
    text-align: left;
}

#contactInfo a[href="tel:+1(623)300-8798"] {
    color: var(--black);
}

#contactInfo a[href="tel:+1(623)300-8798"]:hover {
    color: var(--dark-pink);
}

/* ////////////////////////////////////// */
/* services page styles */

#tables {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10vh;
    justify-content: space-evenly;
    align-items: flex-start;
}

#tables table {
    width: 20vw;
}

/* ////////////////////////////////////// */
/* stylists page styles */

.stylistsPage {
    margin-top: 30vh;
}

#stylistTitle {
    margin-left: 150px;
    margin-bottom: 15vh;
}

#meetStylist1, #meetStylist2, #meetStylist3, #meetStylist4 {
    margin: 0 auto;
    width: 80vw;
    display: flex;
    gap: 50px;
}

.stylistsPage img {
    width:40vw;
    height: auto;
}

#meetStylist1 img:first-of-type {
    clip-path: url("#blob1");
}

#meetStylist2 img:first-of-type {
    clip-path: url("#blob2");
    
}

#meetStylist3 img:first-of-type {
    clip-path: url("#blob3");
}

#meetStylist4 img:first-of-type {
    clip-path: url("#blob4");
}

.introStylist {
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.position {
    font-style: italic;
}

/* ////////////////////////////////////// */
/* footer styles */

#backToTop {
    font-size: 1rem;
    color: var(--dark-pink);
    position: relative;
    right: -85vw;
}

footer {
    background-color: var(--black);
    margin-top: 10px;
    display: flex;
    flex-flow: column;
    gap: 15px;
    text-align: center;
    padding: 60px 0 30px 0;
}

footer a:hover {
    border: none;
}

footer a svg:hover {
    transition: all 1s;
    fill: var(--yellow);
}

footer a[href="https://www.instagram.com/aybeauty.munich/"] svg path:nth-child(2):hover{
    transition: all 1s;
    fill: var(--yellow);
    color: var(--yellow);
}

.instagram-media:hover #viewText, .instagram-media:hover svg g{
    transition: all 2s;
    fill: var(--yellow);
    color: var(--yellow);
}

footer p {
    color: var(--white)
}

footer p:first-of-type {
    font-weight: bold;
}

#footerLinks {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ////////////////////////////////////////////////////// */
/*                  RESPONSIVE SCREENS                    */

@media screen and (min-width:970px) {
    #home {
        width: 15vw;
    }

   
}

@media screen and (max-width:980px){

   

    #home {
        width: 20vw;
        
    }

    #nav{
        position: fixed;
        width: 80vw;
        background-color: rgba(255, 255, 255, 0.551);
        padding: 40px;
        filter: drop-shadow(0 0 0.75rem var(--dark-pink));
        flex-flow: column;
        gap: 20px;
        justify-items: center;
        align-items: center;
        display: none;
        visibility: hidden;
    }

    button {
        visibility: visible;
        display: block;
        margin: 30px;
        cursor: pointer;
        z-index: 7;
    }

    button:hover svg {
        transition: all 1s;
        fill: var(--dark-pink);
    }

    button:focus svg {
        transition: all 1s;
        fill: var(--dark-pink);
    }

    button:hover + #nav, #nav:hover {
        display: flex;
        visibility: visible;
    }

    button:focus + #nav {
        display: flex;
        visibility: visible;
    }

    #moreServiceInfo a[href="services.html"],  #moreServiceInfo a[href="servicesKOR.html"]{
        width: 50%;
        text-align: center;
    }

    figure img{
        border-radius: 20px;
    }

    #tables {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10vh;
        justify-content: space-around;
        align-items: flex-start;
    }
    #tables table {
        width: 40vw;
    }

    #meetStylist1, #meetStylist2, #meetStylist3, #meetStylist4 {
        width: 90vw;
    }

    .stylistsPage img {
        width: 50vw;
    }
}

@media screen and (max-width:820px){
    header {
        height: 30vh;
    }

    #about {
        flex-flow: column;
        width: 60vw;
        margin: 20vh auto;
    }

    #about img {
        width: 60vw;
    }

    #services {
        width: 80vw;
    }

    #services h2 {
        align-self: center;
    }

    #servicesMenu {
        flex-flow: column;
        row-gap: 40px;
    }

    #moreServiceInfo {
        order: 1;
        display: flex;
        flex-flow: row;
        width: 80vw;
    }

    #moreServiceInfo p {
        order: 1;
    }

    #moreServiceInfo a {
        order: 2;
    }

    #servicesMenu table {
        order: 2;
        width: 80vw;
    }

    #meetStylists {
        flex-flow: column;
        row-gap: 60px;
        justify-content: center;
    }

    figure img{
        width: 25vw;
        border-radius: 25px;
    }

    #stylistTitle {
        text-align: center;
        margin-left: auto;
    }
}

@media screen and (max-width:618px) {
    .name {
        font-size: 2rem;
        left: 20px;
        bottom: 70px;
    }

    figure p:last-child {
        left: 20px;
        bottom: 30px;
    }

    p {
        font-size: 1rem;
    }

    #moreServiceInfo a[href="services.html"],  #moreServiceInfo a[href="servicesKOR.html"]{
        width: 70%;
        text-align: center;
    }

    #home {
        width: 30vw;
    }

    #contact {
        width: 100vw;
        flex-flow: column;
        margin: 0 auto;
        justify-content: center;
        height: 150vh;
    }

    #tables {
        display: flex;
        flex-flow: column;
        margin-bottom: 10vh;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
        margin-left: 20vw;
    }
    #tables table {
        width: 50vw;
    }

    #backToTop {
        right: -80vw;
    }

    #meetStylist1, #meetStylist2, #meetStylist3, #meetStylist4 {
        display: block;
        flex-flow: column;
        margin: 0 auto;
    }

    .stylistsPage .imgs {
        position: absolute;
        z-index: 0;
    }

    .introStylist {
        position: relative;
        text-align: right;
        margin: 0 auto;
        width: 60vw;
    }

    .introStylist p:last-child {
        text-align: left;
        margin-bottom: 80px;
        padding: 40px 0 0 40px;
    }
}

@media screen and (max-width:500px) {
    figure img{
        width: 40vw;
        border-radius: 25px;
        position: static;
    }

    figure:nth-child(2){
        left: 40vw;
        z-index: 4;
    }
    
    figure:nth-child(3) {
        left: 10vw;
        bottom: -40px;
        z-index: 3;
    }
    
    figure:nth-child(4) {
        left: -20vw;
        bottom: -80px;
        z-index: 2;
    }
    
    figure:nth-child(5) {
        left: -50vw;
        bottom: -120px;
        z-index: 1;
    }

    figure:hover {
        transform: scale(1.2, 1.2);
        z-index: 5;
    }

    #backToTop {
        right: -75vw;
    }

    footer {
        padding-bottom: 50px;
    }

    footer p {
        width: 70vw;
        margin: 0 auto;
    }

    
    #img1 {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100vh;
    }
}