@font-face {
    font-family: 'LethalFont';
    src: url('../../folder/3270-Regular.ttf') format('truetype');
}
html{
    scroll-behavior: smooth;
}       
body{
    position: sticky;
    margin: 0;
    padding: 0;
    background-color: black;
}
body::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background-image:url('../../video/moons/LethalMoonGif.gif');
    background-size: cover;
    opacity: 0.5;
    z-index: -1; 
}
header{
    position: sticky !important;
    top: 0;
     z-index: 4;

}
header nav ul li a{
    font-family: LethalFont;
    font-size: 40px;
    color: black;
    text-decoration: none;
}
header{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10% 5px 0;
    background-color: rgb(193, 33, 33);
}
.lethallogo{
    cursor: pointer;
    width: 160px;
    height: 65px;
    padding: 0;
    margin-left: 2%;
    padding-left: 1em;
}
.navigation_bar_links{
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
}
.navigation_bar_links a:hover{
    color: rgb(193, 33, 33);
    background-color: black;
}
.navigation_bar_links li{
    display: inline-block;
    vertical-align: middle;
}
.navigation_bar_links li + li{
    border-left: 5px solid black;
    padding-left: 20px;
    margin-left: 20px;
}
.navigation_bar_links li{
    border-left: 5px solid black;
    padding-left: 20px;
}
/* moon Selector*/
.container{
            padding-top: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2;        

}
        .moon-text {
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            Font-family: LethalFont;
            font-size: 1.5em;
            text-decoration: none;
             color: white;
             text-shadow: 2px 2px 4px black;
             z-index: 1;
        }
        .moon-image{
            width: 100%;
            height: 100%;
        }
        .grid_moon_container{
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: auto auto;
            gap: 15px;
            width: 90%;
            padding: 20px;
        }
        .moon1, .moon2, .moon3, .moon4, .moon5, .moon6, .moon7, .moon8, .moon9, .moon10, .moon11, .moon12{
            border: 2px solid black;
            position: relative;
        }
        .moon1:hover, .moon2:hover, .moon3:hover, .moon4:hover, .moon5:hover, .moon6:hover, .moon7:hover, .moon8:hover, .moon9:hover, .moon10:hover, .moon11:hover, .moon12:hover{
            transform: scale(1.05);
            transition: transform 0.3s ease, border-color 0.3s ease
            
        }

/* Moon info */

.moon__info__container{
    position: absolute;
    left: 0%;
    color: white;
    background-color: rgba(10, 2, 2, 0.9);
    font-family: Arial, Helvetica, sans-serif;
    border: 3px rgb(193, 33, 33);
    border-style:double;
    padding: 3% 5% 5% 5%;
    left: 5%;
    right: 5%;
    display: grid;
    grid-template-areas:
    "header header"
    "main image"
    "indesc image"
    ". info"
    "moon . ";
    grid-template-columns: 70% 30%;
    grid-template-rows: auto auto auto auto auto;
    gap: 10px;
    opacity: 0.95;
}
.moon__info__header{
    grid-area: header;
    display: flex;
    Font-family: LethalFont;
    font-size: 3em;
    border-bottom: 3px solid white;
}
.moon__info__paragraph{
    grid-area: main;
    display: flex;
    line-height: 1.5em;
}
.moon__info__head2{
    font-family: LethalFont;
    color: white;
    font-size: 2em;
}
.moon__info__description{
    grid-area: indesc;
    border: 2px solid rgb(193, 33, 33);
    background-color: #1E221B;
    margin-right: 30px;
    padding-inline: 20px;
    color: #01FB01;
    font-family: LethalFont;
    font-size: 20px;
    word-spacing: 5px;
    padding: 1em;
    width: 65%;
    line-height: 1em;
}
.moon__info__image{
    grid-area: image;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 4px solid rgb(193, 33, 33);
    box-sizing: border-box;
}
.moon__info__table{
    grid-area: info;
    border: 5px dotted rgb(193, 33, 33);
}

.moon__info__topView{
    grid-area: moon;
}
.moon__info__topView__img{
    width: 100%;
    height: auto;
    object-fit: cover;
    box-sizing: border-box;
    border: 1px solid rgb(193, 33, 33);
}