/* UTILITIES */
* 
        {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }

html 	{
		scroll-behavior: smooth;
		}

body 	{
		scroll-behavior: smooth;
		font-family: trebuchet ms;
		letter-spacing: 1px;
		background-color: #e0e0e0;
        overflow: hidden;
		}

.textbodyfont 	
        {
		font-family: "Inter", system-ui, sans-serif;
		letter-spacing: 1px;
        color: #252525;
        }

a 
        {
        text-decoration: none;
        }

li
        {
        list-style: none;
        }

/* NAVBAR STYLING STARTS */
.navbar
        {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        background-color: #252525;
        color: #99a3a4;
        height: 75px;
        }

.nav-links a
        {
        color: #99a3a4;
        }

/* LOGO */
.logo
        {
        background-color: none;
        }

/* NAVBAR MENU */
.menu
        {
        display: flex;
        gap: 1em;
        font-size: 18px;
        }

.menu li:hover
        {
        background-color: #383838;
        border-radius: 5px;
        transition: 0.3s ease;
        }

.menu li
        {
        padding: 5px 14px;
        }

/* DROPDOWN MENU */
.services
        {
        position: relative; 
        }

.dropdown
        {
        background-color: #383838;
        padding: 1em 0;
        position: absolute; /*WITH RESPECT TO PARENT*/
        display: none;
        border-radius: 8px;
        top: 35px;
        }

.dropdown li + li
        {
         margin-top: 10px;
        }

.dropdown li
        {
        padding: 0.5em 1em;
        width: 8em;
        text-align: center;
        }

.dropdown li:hover
        {
        background-color: #383838;
        }

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

/* RESPONSIVE NAVBAR MENU STARTS */

/* CHECKBOX HACK */

input[type=checkbox]
        {
        display: none;
        } 

/* HAMBURGER MENU */
.hamburger
        {
        display: none;
        font-size: 24px;
        user-select: none;
        }

.letters	
		{
		background-color: none;
		font-family: trebuchet ms;
		font-size: 20pt;
		color: #99a3a4;
		letter-spacing: 2px;
		text-decoration: none;
		}

.home
		{
		position: relative;
		width: 100vw;
		height: 100%;
		background-image: url('http://www.elizabethnewnam.com/MullicaProject.jpg');
		background-size: cover;
		background-position: top -170px left 0px;
        flex-shrink: 0;
		}

.about
		{
		position: relative;
		width: 100vw;
		height: calc(100vh - 75px);
		background-color: none;
        flex-shrink: 0;
        align-items: center;
		}

.about-inner
        {
        display: flex;
        gap: 1vw;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        }

.about-left
        {
        width: 35%;
        height: 100%;
        background: #d9dad9;
        overflow: hidden;
        }

.about-left img
        {
        height: 100%;
        object-fit: cover;
        display: block;
        }

.about-right
        {
        width: 65%;
        height: 100%;
        background: none;
        padding-left: 2vw;
        padding-right: 2vw;
        padding-top: 6vh;
        font-size: clamp(0.9rem, 0.95vw, 1.05rem);
        font-family: "Inter", system-ui, sans-serif;
		letter-spacing: 1px;
        line-height: 1.5;
        }

.fixnav
		{
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 100;
		}

a.body:link
		{
		font-family: trebuchet ms;
		font-size: 4vwmin;
		color: #99a3a4;
		letter-spacing: none;
		text-decoration: none;
		}
		
a.body:visited
		{
		font-family: trebuchet ms;
		font-size: 4vwmin;
		color: #99a3a4;
		letter-spacing: none;
		text-decoration: none;
		}
		
a.body:active
		{
		font-family: trebuchet ms;
		font-size: 4vwmin;
		color: #99a3a4;
		letter-spacing: none;
		text-decoration: none;
		}
		
a.body:hover 
		{
		font-family: trebuchet ms;
		font-size: 4vwmin;
		color: #7b6d78;
		letter-spacing: none;
		text-decoration: none;
		}

a.body2:link
		{
        font-size: clamp(0.9rem, 0.95vw, 1.05rem);
        font-family: "Inter", system-ui, sans-serif;
		letter-spacing: 1px;
		color: #494949;
		letter-spacing: none;
		text-decoration: none;
		}
		
a.body2:visited
		{
        font-size: clamp(0.9rem, 0.95vw, 1.05rem);
        font-family: "Inter", system-ui, sans-serif;
		letter-spacing: 1px;
		color: #494949;
		letter-spacing: none;
		text-decoration: none;
		}
		
a.body2:active
		{
        font-size: clamp(0.9rem, 0.95vw, 1.05rem);
        font-family: "Inter", system-ui, sans-serif;
		letter-spacing: 1px;
		color: #ba78c7;
		letter-spacing: none;
		text-decoration: none;
		}
		
a.body2:hover 
		{
        font-size: clamp(0.9rem, 0.95vw, 1.05rem);
        font-family: "Inter", system-ui, sans-serif;
		letter-spacing: 1px;
		color: #ba78c7;
		letter-spacing: none;
		text-decoration: none;
		}
		
.containallx
        {
        position: fixed;
        top: 75px;
        left: 0;
        height: calc(100vh - 75px);
        width: 100vw;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        }

.section
        {
        width: 100vw;
        height: 100vh;
        flex-shrink: 0;
        }

/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {

  body
    {
    overflow-y: auto;
    }

 .menu
    {
    display:none;
    position: absolute;
    background-color: #252525;
    right: 0;
    left: 0;
    text-align: center;
    padding: 16px 0;
    }

  .menu li:hover
    {
    display: inline-block;
    background-color: #383838;
    transition: 0.3s ease;
    }

  .menu li + li
    {
    margin-top: 12px;
    }

  input[type=checkbox]:checked ~ .menu
    {
    display: block;
    }

  .dropdown
    {
    left: 50%;
    top: 30px;
    transform: translateX(35%);
    }

  .dropdown li:hover
    {
    background-color: #383838;
    }

  .about
    {
    padding-top: 0;
    padding-bottom: 4rem;
    min-height: calc(100vh - 75px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    }

  .about-inner
    {
    flex-direction: column;
    gap: 0.75rem;
    height: auto;
    }

  .about-left
    {
    width: 100%;
    height: auto;
    min-height: 55vh;
    padding-bottom: 0.5rem;
    background: none;
    overflow: hidden;
    }

  .about-left img {
    width: 100%;
    height: 100%;
    min-height: 55vh;
    position: relative;
    margin: 0 auto;
    display: block;
    object-fit: cover;
  }

  .about-right
    {
    width: 100%;
    height: auto;
    padding-top: 0;
    }

  .navbar
    {
    padding-left: 12px;
    padding-right: 12px;
    }

  .logo
    {
    margin-right: 8px;
    }

  .nav-links
    {
    margin: 0;
    padding: 0;
    }

  .hamburger
    {
    display: block;
    margin-left: auto;
    }

  .letters
    {
    font-size: 18pt;
    letter-spacing: 1px;
    }

  .containallx
    {
    position: relative;
    top: 0;
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    }

  .home
    {
    min-height: calc(100vh - 75px);
    height: auto;
    background-position: center;
    }
}