/*GLOBAL STYLES*/
body {
    background-color: black;
    color:whitesmoke;
    margin:0px;
}

a{
    color:rgba(30, 28, 28, 0.865);
    text-decoration: none;
}

a, p {
    font-family:Arial, Helvetica, sans-serif;
}

p {
    font-weight:100;
    padding:0 5% 0 5%;
}

img, iframe {
    max-width: 100%;
    height:auto;
}

/*NAVBAR STYLES*/
header{
    background-color:whitesmoke;
    padding:10px;
}

.menu-item {
    font-size:1.5em;
    margin:20px;
}

nav{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:50px;
    padding:10px;
}

.logo{
    max-width: 50px;
}

/*HIDE THE DESKTOP NAV ON MOBILE*/
.desktop-nav{
    display:none;
}

/*THE HAMBURGER MENU*/

            .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
            }

            .sidenav a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
            }

            .sidenav a:hover {
            color: #f1f1f1;
            }

            .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
            }


/*HOMEPAGE STYLES*/
.container {
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-image:url('../img/homepage.gif');
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
    padding-left: 5%;
}

.page-title{
    font-family: 'Odibee Sans', cursive;
    font-size:4em;
    text-shadow:1px 1px 3px black;
    animation-name: flashText;
    animation-duration: 3s;
    animation-iteration-count: 2;
}

#cta-button{
    background:whitesmoke;
    color:rgba(30, 28, 28, 0.865);
    padding:20px;
}

/*CSS ANIMATION...Notice how I used the animation on the .page-title above*/
@keyframes flashText {
    from {text-shadow: none;}
    to {text-shadow: 1px 1px 3px black;}
  }


/*CLASSICAL BEAUTY PAGE STYLES*/
#tristan-header{
    height:90vh;
    background-image:url('../img/tristan.gif');
    background-repeat: no-repeat;
    background-size: cover;
}

.drop-cap{
    font-size:6em;
    color:grey;
    font-family:'Times New Roman', Times, serif;
}

@media screen and (min-width:1081px){
    /*Hide the mobile nav once the screen is 1081 pixels wide*/
    .mobile-nav{
        display:none;
    }

    /*Show the desktop nav*/
    .desktop-nav{
        display:flex;
    }
}