body{
    margin: 0px;
    padding: 0px;
    width: 100vw;
    background-color: rgb(252, 248, 252);
}
@font-face {
    font-family: 'font-1';
    src: url('./fonts/font-1.ttf');
        font-weight: 700;
        font-style: normal;
}
@font-face {
    font-family: 'font-2';
    src: url('./fonts/font-2.ttf');
        font-weight: 600;
        font-style: normal;
}
@font-face {
    font-family: 'font-3';
    src: url('./fonts/font-3.ttf');
        font-weight: 600;
        font-style: normal;
}
@font-face {
    font-family: 'font-4';
    src: 
        url('./fonts/font-4.otf');
        font-weight: 600;
        font-style: normal;
}
.seo{
    font-size: 0.8rem;
    font-weight: 100;
    margin: 1px;
    margin-bottom: 1px;
    visibility: hidden;
    position: absolute;
}
.h0{
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: baseline;
    margin-left: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
}
.h1{
    padding: 0px;
    text-shadow: 1px 1px 5px black;
    color:  rgb(255, 255, 255);
    font-family: Impact  'Arial Narrow Bold', sans-serif;
    height: 40px;
    
}
.h2{
    margin-left: 5px;
    margin-right: 5px;
    padding: 1px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(237, 4, 4);
    text-shadow: 1px 1px 4px black;
    background-color: mediumseagreen;
    border-radius: 10px 10px;
    zoom: 1.1;
    height: fit-content;
    height: 35px;

}
.h3{
    height: fit-content;
    color: rgb(248, 246, 249);
    text-shadow: 1px 1px 5px black;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    height: 40px;
}
.dot{
    margin: 5px;
    font-size: 0.6rem;
}
.h4{
    font-size: 1.2rem;
    color:rgb(254, 253, 255);
    margin-top: 1px;
    margin-bottom: 1px;
    height:fit-content;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.794);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}
.toppage{
    background-color:rgb(27, 8, 48);
    position: fixed;
    width: 100vw;
    z-index: 2;
    top: 0;
    margin-bottom: 0px;
    box-shadow: 1px 1px 10px black;
}
.top{
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 90%;
    margin: auto;
    margin-bottom: 1px;
}
nav{
    display: flex;
    justify-content: end;
    align-items: center;
    margin-left: 50px;
    margin-right: 0px;
    height: fit-content;
    margin: 1px;
}
nav >div{
    margin-left: 10px;
    margin-bottom: 1px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.1rem;
    color:whitesmoke;
    font-weight: 600;
    height: fit-content;
    border-radius: 5px;
    padding: 2px;
}
nav >div:hover{
    background-color: rgba(4, 154, 74, 0.921);
    font-size: 1.5rem;
    transition: all 500ms;
}
.logo-titlees{
    background: linear-gradient(45deg, transparent 170px, red 0);
}
.dropmenu{
    text-align: end;

}
.drop{
    display: none;
    border: none;
    height: 2.4rem;
}
.b{
    color: white;
}
.back{
    margin: 0px;
    margin-top: 20px;
}
.firstpage{
    background-image: urll('./pictures/mobile1.jpg');
    max-width: 100vw;
    display: flex;
    margin: auto;
    background-size:contain;
    background-position:right;
    background-repeat: no-repeat;
    margin-top: 50px;

}
.background1{
    background-color: rgb(33, 11, 68);
    background-image: url('./projectsimg/backgroundfloor1.jpg');
    background-size:cover;
    background-position:center;

    height: 290px;
    width: 100vw;
    margin-left: 0px;
    margin-bottom: 0px;
    position: absolute;
    z-index: -1;
}
.first1{
    font-size: 2.8rem;
    background-color: rgba(255, 140, 0, 0);
    color: rgb(254, 252, 255);
    text-shadow: 3px 3px 6px black;
    margin-left: 20px;
    font-family: font-1;

}
.content{
    margin: auto;
    width: 900px;
    margin-top: 50px;
    background-image: linear-gradientt(90deg, rgba(255, 255, 255, 0.997)40%, rgba(255, 254, 254, 0.294), white);
}
.head1{
    color: white;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 1px 1px 1px black;
}
.head1 >h3{
    margin-bottom: 0px;
    margin-top: 1px;
    font-size: 1.4rem;
    font-family: font-2;
}
.head1 >p{
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 0.85rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    word-spacing: -1px;
}
.log{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.scroll{
    overflow: hidden;
    margin-top: 60px;
    margin-bottom: 10px;
    background-color: gainsboro;
}
.scrolltext{
    font-size: 1.1rem;
    margin: 2px;
    width: fit-content;
    text-wrap: nowrap;
    animation-name: runing;
    animation-duration: 25s;
    animation-iteration-count:infinite;
    animation-timing-function: linear;
    animation-direction: reverse;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
@keyframes runing{
    from{translate: -100%}
    to{
       translate:100vw;
    }
}
.head2{
    margin-top: 10px;
    display: flex;
    align-items: center;
}
#myimage{
    max-width: 430px;
}
.head2 >p{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin: 10px;
    line-height: 1.4;
}

.items{
    display: grid;
    grid-template-columns: minmax(150px, 2fr) minmax(150px, 2fr);
    width: auto;
    gap: 30px;
    padding: 30px;
    justify-content: center;
    margin-bottom: 30px;
    height: auto;
}
.item{
    box-shadow: 2px 2px 8px black;
    text-align: center;
    height: auto;
    font-family: font-3;
    padding: 10px;
    background-color: white;

}
.item >h4{
    font-size: 1.8rem;
    margin-top: 20px;
    margin-bottom: 30px;
}
.item >p{
    line-height: 1.4;
    font-size: 1.2rem;
}
.intro{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(20, 6, 31, 0.825);
    width: fit-content;
    padding: 8px;
    box-shadow: 2px 2px 2px black;
    margin-top: 50pxx;
    margin-left: 20px;
    border-radius: 5px;

}
.intro > p{
    margin: 1px;
    margin-left: 15px;
    font-size: 1.1rem;
    color: white;
    line-height: 1.4;

}
.contentt >h4{
    font-size: 1.6rem;
    color:rgb(229, 247, 222);
    text-shadow: 1px 1px 0px black;
    margin-bottom: 20px;
    margin-left: 10px;
}
.firstpage_webpages{
    display: flex;
    padding: 10px;
    margin-bottom: 40px;
    overflow-x: scroll;
}
.firstpage_webpages  img{
    max-width: 450px;
    box-shadow: 1px 1px 3px black;
}
.firstpage_webpages > div{
    display: block;
    margin: 5px;
}
.firstpage_webpages h4{
    margin-left: 10px;
    margin-bottom: 0px;
    color: rgb(241, 238, 242);
    font-size: 1.2rem;
}
.firstpage_pictures{
    display: flex;
    margin-bottom: 40px;
    overflow-x: scroll;
    height: 180px;
}
.firstpage_pictures >img{
    height: 150px;
    margin: 10px;
    border: 2px solid black;
    box-shadow: 1px 1px 3px rgb(18, 4, 4);
    border-radius: 8px;
    opacity: 80%;
}
footer{
    display: flex;
    flex-direction: column;
    height: auto;
    background-color: rgb(43, 30, 52);
    margin: auto;
    color: white;
    bottom: 0;
    padding: 8px;
}
footer > p{
    margin: auto;
    margin-bottom: 2px;
    margin-top: 6px;
}
a{
    margin: 0px;
}
.email_phone{
    margin: auto;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    margin-top:1px;
}
.email_phone > img{
    height: 22px;
    margin: 0px;
}
.links{
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    margin-top: 0px;
    padding: 0px;
    height: 25px;
    margin-bottom: 5px;
}
@media(max-width: 1050px){
    .firstpage{
        width: 100vw;
        margin-top: 0px;
    }
    .content{
        max-width: 100%;
        
    };
}

@media(max-width: 820px){
    .firstpage{
        background-image: urll('./pictures/mobile1.jpg');
        background-size: cover;
        width: 100vw;
    }
    .log{
        width: 90%;
        margin: auto;
    };
  
}

@media(max-width: 550px){
    .firstpage{
        background-image: urll('./pictures/mobile.jpg');
        background-size: cover;
        background-position:left;
        width: 100vw;
        margin-top: 1px;
    }
    .content{
        margin-top: 60px;
        background-image: linear-gradientt(90deg, rgba(255, 255, 255, 0.339)10%, rgba(255, 254, 254, 0.381),white);

    }
    .head2{
        display: block;
    }
    .head2 >img{
        width: 100%;
    }
    .items{
        grid-template-columns: 1fr;
    }
    .head1 > h3{
        font-size: 1.2rem;
    }
    .drop{
        display: flex;
        background-color: rgba(222, 196, 196, 0);
        align-items:center;
        color: aliceblue;
        z-index: 5;
    }
    nav{
        width: 0px;
        height: 240px;
        position:fixed;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
        right: 0;
        top: 50px;
        background-color:rgba(24, 24, 68, 0.751);
        z-index: 2;
    }
    nav >div{
        margin: 6px;
        padding: 3px;
        font-size: 1.2rem;
    }
    nav >div:hover{
    background-color: rgba(106, 232, 144, 0.95);
    color: rgb(244, 250, 127);
    font-size: 1.3rem;
    }

    .firstpage_webpages img{
        max-width: 340px;
    }
    .intro{
        max-width: 80%;
        margin: auto;
        margin-top: 40px;
        font-size: 1rem;
    }
    .first1{
        font-size: 1.6rem;
    }
}

.cube{
    float: left;
    transform: translateY(2px);
    color: rgb(251, 56, 56);
    text-shadow: 1px 1px 1px black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.2rem;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 1px;
    border-radius: 20% 20%;
    margin-top: 20px;
    margin-bottom: 5px;
    margin-right: 30px;
    width: fit-content;


}
.cube1{
    display: flex;
    position: absolute;
    font-size: 1.3rem;
    width: 100px;
    height: 100px;
    border: 2px solid rgb(10, 16, 55);
    box-shadow: 1px 1px 1px black;
    translate:10px;
    animation-name: exemple1;
    margin-top: 1px;
    animation-duration: 10s;
    animation-iteration-count:infinite;
    animation-timing-function: linear;
    text-align: center;
    justify-content: center;
    align-items:center;
    border-radius: 50%;
    z-index: 1;
    scale: 1;
    background-color: rgb(247, 243, 243);

}
.cube2{
    display: flex;
    position: relative;
    width: 100px;
    height: 100px;
    border: 2px solid rgb(225, 23, 23);
    border-radius: 50%;
    box-shadow: 1px 1px 1px black;
    animation-name: exemple2;
    translate: 40px;
    margin-top: 1px;
    animation-duration: 10s;
    animation-iteration-count:infinite;
    animation-timing-function: linear;
    text-align: center;
    justify-content: center;
    align-items:center;
    background-color:darkcyan;
    scale: 1;
}
.cube2 >p{
    transform: rotateY(180deg);
}
@keyframes exemple1{
    50%{z-index: 0;}
   100%{transform: perspective(400px) translateZ(0px) rotateY(360deg);}
}

@keyframes exemple2{
    100%{z-index: 0;}
    100%{transform: perspective(400px) translateZ(0px) rotateY(360deg);}
   }