@font-face {
    font-family: myFont; /* set name */
    src: url("../font/Orbitron-VariableFont_wght.ttf");
    }

*{
    font-family: myFont;
        /* color: aliceblue; */
}

body{
        background-color: rgb(46, 46, 46);
        margin: 0;
        letter-spacing: .5px;
}

header{
    display: flex;
    /* text-align: center; */
    justify-self: center;
    justify-content: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;

    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.header_box{
    /* background-color: rgb(42, 42, 42); */
    display: flex; 
}

.LogoMYCROMARS{
    /* background-color: rgb(96, 88, 88); */
    display: flex;

    img{
        width: 150px;
        height: 150px;

        /* border-radius: 0px;
        border: 2px;
        border-style:solid;
        border-color: rgb(25, 25, 25); */
    }

    p{
        font-family: Arial, Helvetica, sans-serif;
        color: rgb(255, 255, 255);
        font-size: 16px;
        margin-top: 137px;
        margin-left: 3px;
        margin-bottom: 0;
    }
}

.headerText{
    /* background-color: rgb(53, 86, 86); */
    justify-items: center;
    margin-left: 20px;

    h1 {
        letter-spacing: 3px;
        margin: 0;
        margin-top: 20px;
        font-size: 45px;
        color: rgb(0, 253, 21);
    }

    h2{
        letter-spacing: .5px;
        margin: 0;
        margin-top: 5px;
        color: rgb(197, 214, 0);
        font-size: 24px;
    }

    h3{
        letter-spacing: .5px;
        margin: 0;
        margin-top: 0px;
        color: rgb(197, 214, 0);
        font-size: 20px;
    }

    p{
        font-size: 14px;
        color: rgb(51, 158, 12);
        font-weight: 600;
    }
}

main{
    display: block;
    /* justify-items: center; not working in safari*/
    text-align: center;
    /* justify-items: center; */
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;

    color: aliceblue;

    h2{
        font-size: 20px;
    }

    p{
        font-size: 12px;
        line-height: 1.4;
    }
}

.service_box{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    
}

.service_tabs{
    background-color: rgb(98, 127, 154);

    border-radius: 10px;
    border: 2px;
    border-style:solid;
    border-color: rgb(126, 156, 183);

    margin: 5px;

    padding: 5px;

    color: rgb(255, 255, 255);
    font-style: italic;
    font-size: 18px;
}

.article_A{
    display: block;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;

    text-align: center;
    background-color: rgb(32, 32, 32);

    width: 100%;
    height: auto;

    /* max-width: 650px; */
    /* min-width: 600px; */

    border-radius: 10px;
    border: 2px;
    border-style:solid;
    border-color: rgb(96, 96, 96);


    h1{
        font-size: 24px;
         color: rgb(0, 253, 21);
    }

    h2{
        font-size: 15px;
    }

    p{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
    }

    a{
        background-color: rgb(0, 0, 0);
        text-decoration: none;
        font-weight: 800;
        font-size: 12px;
        padding: 5px;

        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(96, 96, 96);

        color: aliceblue;
    }

    .video1{
        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(96, 96, 96);
        margin-bottom: 10px;
    }

    a:hover{
        background-color: rgb(70, 70, 70);
    }

    img {
        max-width: 65%;

        margin-top: 10px;
        margin-bottom: 10px;

        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(70, 70, 70);
    }

    .img_duo{
        display: flex;
        margin-left: auto;
        margin-right: auto;
        align-items: center;
        max-width: 90%;
        justify-content: center;

        img{
            max-width: 45%;
            /* margin-right: 10px; */
        }
        
        div{
            img{
                max-width: 100%;
            }
            /* background-color: black; */
            margin: 10px;

            h5{
                margin: 0;
            }
        }
    }

    .Logo-game{
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}



.article1_box{
    /* background-color: rgb(122, 122, 122); */
    display: flex;
    justify-content: center;
    max-width: 65%;
    margin-top: 0px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 10px;
    padding-right: 10px;

    img{
        max-width: 60%;
        height: 100%;
        /* margin: 10px; */
        margin-top: 10px;
        margin-bottom: 10px;

        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(148, 148, 148);
        /* margin: 0; */
    }

    .List{
        /* background-color: rgb(97, 106, 112); */

        margin-top: auto;
        margin-bottom: 10px;
        margin-left: 10px;
        width: 100%;
        height: 100%;

        padding: 10px 5px 10px 30px;

        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(103, 103, 103);

        font-size: 14px;
        text-align: left;
        letter-spacing: .5px;
        line-height: 2;
    }

    a{
        background-color: rgb(0, 0, 0);
        text-decoration: none;
        font-weight: 800;
        font-size: 12px;
        padding: 5px;

        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(96, 96, 96);
    }
}

.article2_box{
    /* background-color: rgb(122, 122, 122); */
    display: flex;
    /* justify-content: center; */


    max-width: 65%;
    margin-top: 0px;

    margin-left: auto;
    margin-right: auto;

    /* padding-left: 10px; */
    /* padding-right: 10px; */

    img{
        max-width: 30%;
        height: 100%;
        /* margin: 10px; */
        margin-top: 0;
        margin-bottom: 10px;

        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(148, 148, 148);
        /* margin: 0; */
    }

    .List:first-child{
    margin-right: 5px;
    }
    .List:nth-child(2){
    margin-left: 5px;
    }

    .List{
        background-color: rgb(21, 21, 21);

        margin-top: 0;
        margin-bottom: 10px;
        width: 100%;
        height: 100%;

        padding: 0px 5px 10px 10px;

        ul{
            margin-top: 0;
        }

        li{
            padding-left: 0px;
        }

        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(103, 103, 103);

        p{
            font-size: 14px;
            text-align: left;
            letter-spacing: .5px;
            line-height: 1.5;
            text-align: center;
        }

        font-size: 14px;
        text-align: left;
        letter-spacing: 0.5px;
        line-height: 2;

        h3{
            text-align: center;
        }

        h4{
            margin-left: 30px;
            margin-bottom: 0;
        }
    }

    a{
        background-color: rgb(0, 0, 0);
        text-decoration: none;
        font-weight: 800;
        font-size: 12px;
        padding: 5px;

        border-radius: 10px;
        border: 2px;
        border-style:solid;
        border-color: rgb(96, 96, 96);
    }
}

footer{
    display:block;
    text-align: center;
    font-size: 12px;
    color: aliceblue;

    address{
        margin-bottom: 10px;
        line-height: 18px;

        img{
            border-radius: 10px;
            border: 2px;
            border-style:solid;
            border-color: rgb(96, 96, 96);
        }

        p{
            letter-spacing: 1.3px;
            line-height: 20px;
            margin-top: 5px;
            margin-bottom: 10px;
        }
    }
}

.EmailLink,
.git
{
    margin-top: 10px;
    margin-bottom: 20px;

    a{
        background-color: rgb(0, 0, 0);

        text-decoration: none;
        color: rgb(180, 253, 176);
        font-size: 14px;

        border-radius: 10px;
        border: 1px;
        border-style:solid;
        border-color: rgb(96, 96, 96);

        padding: 5px;

        box-shadow: 3px 5px 3px rgb(0 0 0 / 10%);
    }

    a:hover{
        background-color: rgb(31, 39, 31);
        border-color: rgb(75, 109, 76);
        color: rgb(66, 253, 66);
    }
}

.git{
    margin-top: 0;
    margin-bottom: 10px;
}

.myname{
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 0;
}

.icons-socialmedia{
    margin-top: 0;
    margin-bottom: 20px;

    #icon-li
    {
        height: 54px;
        width: 54px;
        margin-right: 20px;

        border-radius: 30px;
        border: 1px;
        border-style: solid;
        border-color: rgb(96, 96, 96);

        box-shadow: 3px 5px 3px rgb(0 0 0 / 10%);
    }

    #icon-Artstation
    {
        height: 54px;
        width: 189px;
        margin-bottom: 0;

        border-radius: 10px;
        border: 1px;
        border-style:solid;
        border-color: rgb(96, 96, 96);

        box-shadow: 3px 5px 3px rgb(0 0 0 / 10%);
    }

    display: flex;
    justify-content: center;

}

#icon-li {
    content: url("../icon/icon-li_0.png");
    background-size: 54px 54px;
    width: 54px;
    height: 54px;
}

#icon-Artstation {
    /* background-image: url("icon/artstation_0.png"); */
    content: url("../icon/artstation_0.jpg");

    background-size: 54px 189px;
    width: 189px;
    height: 54px;
}

#icon-li:hover {
    content: url("../icon/icon-li_1.png");
    /* background-size: 64px 64px;   */

    /* width: [IMAGE_WIDTH_IN_PIXELS]px; */
    /* height: [IMAGE_HEIGHT_IN_PIXELS]px; */
}

#icon-Artstation:hover {
    content: url("../icon/artstation_1.png");
    /* background-size: 64px 64px;   */

    /* width: [IMAGE_WIDTH_IN_PIXELS]px; */
    /* height: [IMAGE_HEIGHT_IN_PIXELS]px; */
}

.impressum{
    /* background-color: rgb(85, 91, 91); */

    margin-left: auto;
    margin-right: auto;

    text-align: left;
    letter-spacing: .5px;
    line-height: 18px;
    max-width: 95%;

    h1{
        font-size: 20px;
    }

    h2{
        font-size: 16px;
    }

    h3{
        font-size: 12px;
        margin-top: 30px;
    }

    li{
        font-size: 12px;
    }
}

summary{
    background-color: rgb(0, 0, 0);
    margin-left: auto;
    margin-right: auto;

    border-radius: 5px;
    border: 2px;
    border-style:solid;
    border-color: rgb(96, 96, 96);

    box-shadow: 3px 5px 3px rgb(0 0 0 / 10%);

    padding: 5px;
    width: 200px;

    font-size: 12px;
    cursor: pointer;
    text-align: center;
}

summary:hover{
    background-color: rgb(70, 70, 70);
}

.link{
    margin-top: 20px;
    margin-bottom: 10px;
}

/* ##################################################### */
@media only screen and (max-width: 800px) {

    .article_A{
        h1{
            font-size: 20px;
        }

        h2{
            font-size: 16px;
        }

        img {
            max-width: 80%;
        }

    .service_tabs{
        font-size: 17px;
    }

        .Logo-game{
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .video1{
            width: 80%;
        }

        .article1_box{
            max-width: 80%;

            .List{
                font-size: 12px;
            }
        }

        .article2_box{
            max-width: 80%;

            .List{
                font-size: 12px;

                p{
                    font-size: 12px;
                }
            }

            img{
                max-width: 50%;
            }
        }
    }

}

/* ##################################################### */
@media only screen and (max-width: 600px) {
.header_box{
    /* background-color: black; */
    display: block;
    text-align: center;
}

.LogoMYCROMARS{
    /* display: flex; */
    /* background-color: rgb(94, 107, 107); */
    justify-content: center;
}

.headerText{
    margin-left: 0;
    margin-left: 0;
    h1{
        font-size: 33px;
        margin-top: 0px;
    }

    h2{
        letter-spacing: .5px;
        margin: 0;
        margin-top: 5px;
        color: rgb(197, 214, 0);
        font-size: 20px;
    }

    h3{
        letter-spacing: .5px;
        margin: 0;
        margin-top: 0px;
        color: rgb(197, 214, 0);
        font-size: 15px;
    }

    p{
        font-size: 10px;
        margin-top: 5px;
    }
}

main{
    h1{
        font-size: 20px;
    }
    h2{
        font-size: 16px;
    }

    p{
        font-size: 10px;
    }
}

.article_A{
    padding: 0;
    
    h1{
        font-size: 20px;
    }

    h2{
        font-size: 16px;
    }

    img {
        max-width: 94%;
    }

    .video1{
        width: 94%;
    }

    .service_tabs{
        font-size: 16px;
    }


    .article1_box{
        display: block;
        text-align: center;

        padding-left: 0px;
        padding-right: 0px;


        .List{
            /* background-color: rgb(97, 106, 112); */

                margin-top: 0;
                margin-bottom: 10px;

                width: 94%;
                /* height: 100%; */
                margin-left: auto;
                margin-right: auto;

                font-size: 12px;
        }
    }

    .article2_box{
        display: block;
        /* text-align: center; */
        max-width: 94%;

        margin-left: auto;
        margin-right: auto;

        padding-left: 0;
        padding-right: 0;
        
        .List:first-child{
            margin-right: 0;
        }

        .List:nth-child(2){
            margin-left: 0;
        }

        .List{
            /* background-color: rgb(97, 106, 112); */
            
            margin-top: 0;
            margin-bottom: 10px;

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

            margin-left: auto;
            margin-right: auto;

            padding: 0;

            font-size: 12px;

            p{
                font-size: 12px;
                text-align: left;
                letter-spacing: .5px;
                line-height: 1.5;
            }
        }

        img{
            max-width: 98%;
            height: auto;
            
            margin-top: 0;
            margin-bottom: 10px;

            margin-left: auto;
            margin-right: auto;
            
            padding: 0;
        }
    }
    
    .img_duo{
        display: block;
        /* margin-left: auto;
        margin-right: auto; */
        
        /* justify-items: center; */
        max-width: 94%;
        /* background-color: black; */
    
        
        div{
            /* background-color: black; */
            margin: 0;
            max-width: 99%;
       
            h5{
                margin-top: 30px;
            }
        }
    }
}


.impressum{
    /* text-align: left; */

    h1{
        font-size: 18px;
    }

    h2{
        font-size: 14px;
    }

    h3{
        font-size: 10px;
    }

    li{
        font-size: 10px;
    }
}

.video1{
    width: 95%;
}
}