:root {
    --main: #1A1A2E;
    --second: #16213E;
    --third: #0F3460;
    --highLight: #E94560;
    --font: white;
	
	font-size:1.2em;
}

body {
    color: white;
    background-color: black;
    display: grid;
    margin:0px;
    grid-template-areas: "header header header " "aside main main" "footer footer footer";
    /* grid-template-areas: "header header " "main main " "footer footer ";    */
    grid-template-columns: max-content 1fr 0px;
    gap: 0px;
    background-color: var(--main);
    color: var(--font);
    overflow-x:hidden;
}

.icon
{
    height:1.2em;
   

}

header {
   
    text-align: center;
    grid-area: header;
    height:99px;
    background-color: var(--second);
    border-bottom-style: solid;
    border-width: 1px;
    position: relative;
    z-index: 1000;
}
/* top img */
.top-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: -5;
    object-position: top;
    object-fit: cover;
   
}
@supports (animation-timeline: scroll()) {
    .top-img {
        animation: beg linear forwards;
        animation-timeline: view();
        animation-range: exit;
    }
}

@keyframes beg {
    0% {
        opacity: 1;
    }

    75%, 100% {
        opacity: 0;
        scale: 1.2;
    }
}
@supports not (animation-timeline: scroll()) {
    .top-img {
        animation: beg-fallback 2s ease-out forwards;
    }
}

@keyframes beg-fallback {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.1;
        transform: scale(1.2);
    }
}
.banner {
    position: absolute;
    width: 100%;
    color: white;
    bottom: 2px;
    left: 0px;
    padding:0px;
    background-color: black;
    opacity: 0.7;
    text-align: center;
    font-size: 40px;
    margin: 0px;
    padding: 0px;
    animation-name: slide;
    animation-duration: 4s;
    z-index: 1;

}

.banner p
{margin:0px;}
    .banner p:hover {
        text-decoration:underline;
    }
.hold
{position:relative;
 top:0px;
    height:100vh;
}

@keyframes slide {
  0%   { transform: translate(-100%, 0); }
  100% { transform: translate( 0%, 0); }
}
.hide-banner {

    
    animation: fade-out;
    animation-timeline: scroll(root);
}
@keyframes fade-out
{
    0% {
        opacity:1;
    }

    100% {
       opacity:0;
    }

}
.top-img p:hover
{
	 text-decoration:underline;
	
}

/* end top img */

aside {

    position: fixed;
    left: 0px;
    top: 100px;
    padding: 20px;
    margin: 0px;
    grid-area: aside;
    background-color: var(--second);
    border-right-style: solid;
    border-width: 1px;
    font-size: 1.2em;
    min-height: 100vh;
    z-index: 1000;
}

    aside li a {
        line-height: 1.6;
    }
    aside h3 {
        text-align: center;
        border-top:solid 1px;
        border-bottom:solid 1px;
    }
a {
    text-decoration: none;
    color: var(--font);
}
a:visited {
    color: white;
    color: var(--font);
    text-decoration:none;
}
main {
    grid-area: main;
   
    min-height: calc(100dvh - 200px);
    //overflow-x:hidden;
}
footer {
    grid-area: footer;
   
    
}
.left-menu
{
   padding:0px;
    list-style-type: none;
    z-index:999;
}
.left-menu-button:hover {
    cursor: pointer;
    text-decoration: underline;
}
#hideMenuButton {
    position: absolute;
    left: 0px;
    padding: 10px;
    bottom: 0px;
    height: 100%;
    border: none;
    box-shadow: none;
    background-color: var(--second);
    transform: rotateZ(90deg);
    opacity: 0.9;
}
button {
    background-color: var(--highLight);
    color: var(--font);
}

/*main menu
*/

.main-menu-div {
	position: sticky;
	background-color: var(--second);
	top: 0px;
	padding-left:15px;
	padding-right:15px;
    display: flex;
    justify-content: space-between;
    border-bottom-style: solid;
    border-width: 1px;
    margin-bottom: 5px;
	text-align:center;
	align-items: center;
	z-index:999;
	
}

.main-menu-ul {
    list-style-type: none;
    display: flex;
    column-gap: 30px;
    flex-flow: row wrap;
    padding: 0px;
}
.main-menu-li{
    display:inline-block;
    

}
    .main-menu-button:hover {
    cursor: pointer;
    text-decoration: underline;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--third);
    min-width: 125px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}



    .dropdown-content a {
        
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
.main-menu-li:hover .dropdown-content {
    display: block;
}


.dropdown-content a:hover {
    cursor: pointer;
    text-decoration: underline;
}

@media screen and (max-width: 800px) {
    header
    {position:sticky;
     top:0px;
    }
    aside
    {width:90%;
     padding:10px;
    }
    aside h3
    {margin:0px;}
    
.main-menu-div {display:none;

}
#contact
{display: none;}

iframe
{max-width:80%;}
}



    /* main menu stop */