*,
* {
    margin: 0%;
    padding: 0px;

    /* border: 1px solid gold; */
}

a:visited {
    color: #aaf;
}

a {
    color: #ddf;
}

main {
    background-color: #556;
    background-image: linear-gradient(90deg, #55556f, #44444f, #44444f, #55556f);

    color: white;

    padding: 1rem;

    font-size: 14pt;
}

#audioMute-hidden,
#audioV-hidden {
    display: none;
}

.audioIcon {
    width: 30px;
    grid-row: 3/4;
    grid-column: 1/2;

    justify-self: left;
    align-self: center;
}

.audioIcon:hover {
    cursor: pointer;
}

header {
    margin: 1rem;
    display: grid;

    font-family: 'Bad Script', cursive;

    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: 1fr 1fr;

    text-align: left;

    column-gap: 1rem;
    width: 90%;
}

header h1 {
    grid-column: 2/3;
    font-size: 12pt;
}

header h2 {
    grid-column: 2/4;
    grid-row: 3/4;
    font-size: 12pt;
}

h2 {
    font-family: 'Bad Script', cursive;
}

#logo {
    width: 100px;
    border: 1px solid white;
    border-radius: 90px;

    grid-column: 1/2;
    grid-row: 1/3;
}

#Tlogo {
    width: 100px;
    grid-column: 3/4;
    grid-row: 1/3;
}

main {
    font-family: 'Roboto Slab', serif;
}

#grid {
    height: 100%;

    display: grid;
    justify-items: center;
    align-items: center;

    column-gap: 1rem;
    row-gap: 1rem;

    grid-template-rows: 2fr 2fr 2fr 1fr;
}

#grid div {
    border: 2px solid black;
    border-radius: 5px;

    width: 90%;
    height: 90%;
}

#modelDiv {
    /* width: 100%;
    height: 100%; */

    background-color: #667;

    margin: 1rem;
    padding: 1rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 4fr 1fr 1fr;

    justify-items: center;
    align-items: center;
}

#model {
    width: 100%;
    height: 100%;

    grid-column: 1/3;
    grid-row: 1/2;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 4fr 1fr;
}

#model3d {
    width: 100%;
    height: 100%;

    grid-column: 1/4;
    grid-row: 1/2;
}

#btn {
    grid-column: 1/2;
    grid-row: 2/3;
}

#modelDiv p {
    /* grid-row: 2/3; */
    width: 75%;

    border: 2px groove #eef;
    border-radius: 5px;

    background-color: #445;
    color: #eef;

    text-align: center;
    justify-self: center;
    align-self: center;

    font-size: 10pt;

    margin: 1rem;
    padding: 5px;
}

#modelDiv p:hover {
    cursor: pointer;
}

#showLablesBtn {
    grid-column: 2/3;
    grid-row: 2/3;
}

#lightLampBtn {
    grid-column: 1/2;
    grid-row: 3/4;
}

#galleryBtn {
    grid-column: 2/3;
    grid-row: 3/4;
}


#img-gallery {
    width: 100%;
    height: 100%;

    grid-column: 1/5;
    grid-row: 1/2;

    display: grid;
    grid-template-columns: 1fr 1fr;

    border: none !important;
}

#img-gallery img {
    justify-self: center;
    align-self: center;

    /* max-height: 100%;
    width: 70%; */

    border-radius: 5px;
}

#img1 {
    max-height: 100%;
    width: 70%;
    grid-column: 1/2;
}

#img2 {
    max-height: 100%;
    width: 100%;
    grid-column: 2/3;
}

#model-hidden,
#showLables-hidden,
#lightLamp-hidden,
#img-gallery-hidden {
    display: none;
}

#showLables {
    width: 100%;
    height: 100%;

    grid-column: 1/5;
    grid-row: 1/2;

    text-align: center;

    border: none !important;
}

#showLables img {
    width: 75%;
}

#lightLamp {
    width: 100%;
    height: 100%;

    grid-column: 1/5;
    grid-row: 1/2;

    text-align: center;

    border: none !important;
}

#lightLamp img {
    width: 75%;
}

.facts {
    padding: 1rem;
    margin: 1rem;

    background-color: #667;

    font-size: 12pt;
}

ul {
    /* list-style-type: disc; */
    list-style-image: url("img/flameDot-1.png");
    list-style-position: inside;
}

footer {
    text-align: center;
    margin: 1rem;

    font-size: 10pt;

    border: none;
}

#foot {
    grid-column: 1/2;
    grid-row: 4/5;
    height: 10rem;

    border: none !important;
}

/* Desktop*/
@media (min-width: 700px) {

    header h2 {
        grid-column: 2/3;
        grid-row: 2/3;
        font-size: 12pt;
    }

    .audioIcon {
        width: 30px;
    }

    #grid {
        /* max-height: 35rem; */
        max-height: 100%;

        display: grid;
        justify-items: center;
        align-items: center;

        text-align: left;

        column-gap: 1rem;
        row-gap: 1rem;

        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: 4fr 1fr;
    }

    #foot {
        grid-column: 1/5;
        grid-row: 2/3;
        height: 10rem;
        width: 100%;

        border: none !important;
    }

    header h1 {
        grid-column: 2/3;
        font-size: 16pt;
    }

    header h2 {
        grid-column: 2/3;
        font-size: 16pt;
    }

    #modelDiv {
        background-color: #667;

        margin: 1rem;
        padding: 1rem;

        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 4fr 1fr 1fr;

        justify-items: center;
        align-items: center;
    }

    #model {
        grid-column: 1/5;
        grid-row: 1/2;
    }

    /* #btn {
        grid-column: 1/2;
        grid-row: 2/3;
    } */

    #showLablesBtn {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #lightLampBtn {
        grid-column: 3/4;
        grid-row: 2/3;
    }

    #galleryBtn {
        grid-column: 4/5;
        grid-row: 2/3;
    }
}