/*--------------------------------------------------body css ----------------------------------------------*/
body{overflow-x: hidden;margin: 0;padding: 0;
background:rgba(8, 52, 49, 0.553);
background-size: cover;
background-repeat: no-repeat;
}

/*------------------------------------------------Meny-----------------------------------------------*/

.menu{
    display: flex;
    height:30%;
    width: 100%;
    position: absolute;
    top: -5%;
    left: 1%;
    justify-content: center;
    align-items: center;
    color: aliceblue;
  
  
}
.menu a{
   
    background: rgba(2, 47, 66, 0.966);
    padding:2%;
    margin: 1%;
    color: wheat;
    box-shadow: -9px 3px 33px 3px rgba(21, 143, 143, 0.696);
    border-radius: 1em;
    text-decoration: none;
    border: 0.3em ridge rgba(21, 143, 143, 0.696);
    
}
.menu a:hover{color: aliceblue;font-weight: 300;background: rgb(18, 11, 6);}
#logo{
    border-radius: 5em;
    background: rgba(1, 7, 7, 0.979);
}

/*----------messages---------------------------------*/
.messages{
    position: absolute;
    background: rgba(3, 33, 37, 0.909);
    height:fit-content;
    padding: 2%;
    width: 30%;
    display: flex;
    top: 50%;
    left: 60%;
    border-radius: 1em;
    color: aliceblue;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   
}
.messages img{margin-left: 2%;}

/*-------------------Info-------------------------------*/
.Info{
    position: absolute;
    height: fit-content;
    width: 10%;
    background-image: url("../assets/messageIcon.png");
    background-color: rgb(3, 35, 39);
    background-size: cover;
    background-blend-mode:multiply;
    background-position: center;
    border-radius: 1em;
    color: azure;
    display: grid;
   padding: 1%;
   margin: 1%;
    top: 30%;
    left: 60%;
    justify-content: center;
    align-items: center;
    text-align: center;

}
.Info p{padding: 1%;}


/*------------------Accessories-------------------------------------------------*/
.Accessories{
    height: fit-content;
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.733);
    background-blend-mode:darken;
    background-position: center;
    background-size: cover;
    color: black;
    position: absolute;
    display: grid;
    padding: 1%;
    border: 0.1em ridge rgb(4, 14, 23);
    border-radius: 1em;
    top: 30%;
    left: 0.1%;
  
    color: aliceblue;
}

.Accessories button{
    padding-left:1%;
    padding-right:1%;
    width: 50%;
    padding-top: 3%;
    padding-bottom: 3%;
    margin: 1%;
    justify-content: center;
    justify-items: center;
    color:mediumturquoise;
    background: rgba(2, 47, 66, 0.966);
    box-shadow: 0px 1px 19px 0px #2C7C72;
    cursor: pointer;
    border-radius: 0.3em;


}
.Accessories button:hover{color: aliceblue;background: rgb(18, 11, 6);}
::-webkit-slider-runnable-track{background: rgba(10, 20, 20, 0.849);
    appearance: none;
border-radius: 5em;cursor: grab;
}

/*---------------------------------GreeterSelection--------------------------------*/
.GreeterSelection{
    position: absolute;
    background: rgba(1, 7, 7, 0.979);
    color: aliceblue;
    display: flow-root;
    height: fit-content;
    padding: 1%;
    width: fit-content;
    top: 20%;
    left: 10%;
    z-index: 10;
    border: 0.3em ridge rgb(5, 126, 182)
}
.GreeterSelection img{
    border: 2px ridge #8789;
   border-radius: 1em;
   cursor: pointer;
    
}
.GreeterSelection img:hover{transform: translateY(-5px);border: 0.2em ridge rgb(5, 126, 182)}
.GreeterSelection strong{color: mediumaquamarine;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
@keyframes SelectionAni {
    from{transform: translateY(-100px);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0px);}

    
}

/*---------------------------------Rotate Guide--------------------------------*/
.RotateGuide{
    position: absolute;
    display:grid;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: rgba(0, 2, 2, 0.795);
    color: antiquewhite;
    border: 0.3em ridge black;
    padding: 5%;
    left: 20%;
    top: 25%;
    z-index: 10;
    border-radius: 1em;

    
}
.RotateGuide button{color: rgb(225, 225, 232);background: rgba(2, 47, 66, 0.966);
padding-left:1% ;padding-right: 1%;
padding-top: 2%;padding-bottom: 2%;
border: 0.3em solid rgba(2, 47, 66, 0.966);
font-family: 'Times New Roman', Times, serif;
border-radius: 0.3em;
cursor: pointer;}
.RotateGuide button:hover{color: aliceblue;background: rgb(18, 11, 6);}
.RotateGuide img{animation: rotate 1s linear infinite;border-radius: 10em;}
@keyframes rotate {
    
    to{rotate: 360deg;background: rgba(218, 91, 32, 0.553);}
    
}


/*-----------------------------------About div -------------------------------------*/
.BreifCase{
    position:absolute;
    display: none;
    background: rgb(221, 227, 227);
    color: rgba(6, 11, 15, 0.719);
    border: 0.3em ridge rgba(0, 0, 0, 0.553);
    justify-content: center;
    align-items: center;
    padding: 1%;
   font-family: sans-serif;
   top: 0%;
   animation:BreifCaseAni 1s linear 1 ;
   border-radius: 2em;
}
@keyframes BreifCaseAni {
    from{opacity: 0;}
    50%{opacity: 1;border: 0.3em ridge rgb(40, 2, 2);background: rgba(254, 255, 255, 0.498);}
    100%{border: 0.3em ridge rgb(27, 49, 109);}
    
}
.BreifCase table{
    border: 0.1em solid black;
}
.BreifCase td,.BreifCase th{margin: 0.1%;padding: 1%;
border: 0.1em solid black;}
.BreifCase tr:hover,.BreifCase button:hover{background: rgb(18, 11, 6);color: aliceblue;cursor: pointer;}
.BreifCase button{padding-left: 5%;padding-right: 5%;padding-top: 3%;padding-bottom: 3%;
    margin-left: 30%;
background: rgba(134, 145, 145, 0.815);
box-shadow: -9px 3px 33px 3px rgba(73, 99, 99, 0.696);}
.BreifCase img{
    border-radius: 5em;
    margin-left: 5%;
    border: 0.3em ridge black;
  
}

/*--------------------------------Contact options--------------------------------*/
.Contact{display: none;position: absolute;}


.VirtualContact,.TikTok,.Gmail{
    display: grid;
    background-color:rgba(1, 4, 6, 0.87);
    color:bisque;
    border: 0.3em ridge rgba(70, 64, 64, 0.884);
    padding: 2%;
    margin-left: 1%;
    margin-right: 1%;
    justify-content: center;
    align-items: center;
    animation: ContactAni 1s linear 1;

}
@keyframes ContactAni {
    from{transform: translateX(-100px);}
    to{transform: translateX(0px);}
    
}
.VirtualContact input {padding: 5%;}
.Contact button{padding: 1%;background: rgb(6, 3, 2);color: aliceblue;cursor: pointer;}


/*------------------------------------------Projects--------------------------------*/
.ProjectInfo{
    background: rgb(0, 0, 0);
    color: aliceblue;
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 50%;
    padding: 3%;
    left: 25%;
    top: 25%;
    border: 1em ridge rgb(2, 3, 2);
}
.ProjectInfo p{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: antiquewhite;
    margin: 1%;
}
.ProjectInfo button{
    background: linear-gradient(rgb(15, 21, 17),rgb(7, 3, 15));
    color: aliceblue;
    align-items: center;
    padding: 3%;
    margin: 1%;
}
/*---------------------Loading Div----------------------------------*/
.LoadingDiv{
    display:grid;
    
    background-image: url("../assets/Logo.png");
   background-size: cover;
   background-position: center;
    color:aliceblue;
    padding: 1%;
    background-blend-mode:exclusion;
    position: absolute;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    z-index: 13;
    text-align: center;
    
}
.LoadingDiv h1,strong{
    padding: 0.3%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
   text-align: center;

}
.LoadingDiv progress{
    padding: 3%;
    height: 15%;
  
   width: 50%;
    align-self: center;
    align-items: center;
 
    
}
.LoadingDiv div{
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.721);
   display: grid;
   justify-content: center;
   align-items: center;
   text-align: center;
   justify-items: center;
   padding-top: 1%;
}