@charset "UTF-8";

#Loading{display: grid;
place-items: center;
background-color: #222;
color: #fff;
position: fixed;
inset: 0;
font-size: 1.5rem;
transition-property: opacity;
transition-duration: 1s;
transition-delay: 1s;

}

#loading.loaded{
    opacity: 0;
    pointer-events: none;
}

html{
    font-size: 0.625rem;

}
body{
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: .1em;
    color: #f2f2f2;
    font-weight: bold;

    background-color: #114477;
    margin-top: 200px;

}

li{
    list-style: none;

}

a{
    text-decoration: none;
    color: #f2f2f2;
}

.menu{
    width: 60px;
 height: 60px;
 margin: 0 auto;

 border-radius: 30px;
 box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.3);
 background-color: #f2f2f2;
 transition: all .4s ease-in-out;
}

.menu.is-active{
    height: 420px;
}

.icon{
    width: 60px;
    height: 60px;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
}


.icon span{
    content: "";
    width: 40%;
 height: 3px;
 border-radius: 100vh;
 background-color: black;

 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 transition: all .4s ease-in-out;

}

.icon span:nth-child(1){
    top: 20px;
}

.icon span:nth-child(2){
    top: 30px;
}
.icon span:nth-child(3){
    top: 40px;
}

.icon.is-active span:nth-child(1){
    top: 25px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);

}

.icon.is-active span:nth-child(2){
    display: none;
}
.icon.is-active span:nth-child(3){
    top: 37px;
    left: 18px;
   transform: translateY(-6px) rotate(45deg);

}

.list{
  
   width: 100%;
}

.list li{
    margin: 32px 0;

    position: relative;

    opacity: 0;
    transition: all .4s ease-in-out;
}
.list.is-active li{
    opacity: 1;
}

.list i{
    display: block;
    color: #114477;
    padding: 12px 0;
     margin-left:-25px;

}
.list span{
    position: absolute;
    top: 10%;
    left: 100%;
    padding-left: 10px;

    opacity: 0;
}

.list li:hover span{
    opacity: 1;
    transform: translateX(15px);
    transition: all .3s ease-in-out;

}

.list li:hover i{
    color :skyblue;
    border-right: 3px solid skyblue;
}

.ti{
    position: absolute;
    text-align: center;
    font-size: 40px;

}

.listin {
    text-align: center;
    margin-top: 30px;
    color: #ffffff;
}

.list li a {
    color: #ffffff;
    text-decoration: none;
}
body {
    font-family: Arial, sans-serif;

    margin: 0;
    padding: 20px;
}