*{
    margin: 0px;
    padding: 0px;
    transition: 0.2s ease-in-out;
    scroll-behavior: smooth;
}
html,body{
    width: 100%;
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto;
    font-family: Montserrat;
}
#top{
    width: 100vw;
    height: 20vh;
    display: flex;
}
#top{
    .right{
        width: 20vw;
        height: 20vh;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        .logo{
            color: dodgerblue;
            transition: 0.2s ease-in-out;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            .l-top{
                font-size: 3.5vw;
                font-weight: 500;
            }
            .l-bottom{
                font-size: 1.5vw;
            }
        }
    }
    .left{
        width: 60vw;
        height: 20vh;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 19vw;
        .island{
            width: 60vw;
            background-color: rgb(97, 176, 255);
            height: 14vh;
            border-radius: 1.5vw;
            border: 0.3vw solid rgb(13, 60, 108);
            .links{
                display: flex;
                width: 60vw;
                height: 14vh;
                list-style-type: none;
                .isle-item{
                    width: 33.333vw;
                    height: 14vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 2vw;
                    color: rgb(13, 60, 108);
                    transition: 1s ease-in-out;
                    a {
                        color: rgb(13, 60, 108);
                        i{
                        transition: 0.2s ease-in-out;
                        cursor: pointer;

                        }
                    }
                }
            }
        }
    }
}
.isle-item a{
    text-decoration: none;
}
.isle-item span{
    font-size: 1.5vw;
    cursor: pointer;
    font-family: Poppins;
    font-weight: 500;
    color: white;
    margin-top: 1.5vh;
    margin-left: 0.3vw;
    font-size: 0.0001vw;
    transition: all .5s ease-in-out;

}

.isle-item:hover i {
    color: #fff; 
    font-size: 3vw;
}
.isle-item:hover span{
    font-size: 1.5vw;
}

.right:hover > .logo{
    scale: 1.3;
}

.right:hover > .logo{
    scale: 1.3;
}

#top-responsive{
    display: none;
}

.trailer{
    width: 80px;
    height: 80px;
    background-color: dodgerblue;
    border-radius: 50%;
    position: fixed;
    left: 0px;
    top: 0px;
    margin: 0px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* From https://css.glass */
/* From https://css.glass */
background: rgba(8, 150, 255, 0.2);
border-radius: 50%;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.7px);
-webkit-backdrop-filter: blur(4.7px);
}

body:hover .trailer{
    opacity: 1;
}
@media(max-width: 1118px){
    #top{ display:  none; }   
    #top-responsive{ display: flex; }

    .r-right{
        width: 70vw;
        height: 20vh;
        color: dodgerblue;
        background-color: white;
        font-family: Montserrat;
        display: flex;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .r-logo{
        font-size: 7vw;
        transition: 0.2s ease-in-out;
    }

    .r-left{
        width: 30vw;
        height: 20vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5vw;
    }
    .hamburger{
        width: 8vw;
        height: 8vw;
        border-radius: 2.5vw;
        background-color: rgb(97, 176, 255);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        border: 0.5vw solid rgb(13, 60, 108);
    }

    .v-items a{
        color: rgb(13,60,108);
    }
    .v-items-hover a{
        color: white;
    }

    .ver-isle{
        width: 25vw;
        height: 30vh;
        background-color: rgb(97, 176, 255);
        position: absolute;
        margin-top: 40vh;
        margin-right: 10vw;
        color: black;
        border-radius: 2.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 0.5vw solid rgb(13, 60, 108);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        scale: 0;
        transition: 0.5s ease-in-out;
        z-index: 6;
    }

    .v-items{
        width: 25vw;
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(13, 60, 108);
        font-size: 6.5vw;
        transition: 0.2s ease-in-out;
    }

    .v-items:hover > a > i{
        color: white;
        font-size: 8.5vw;
    }
    .trailer{
        display: none !important;
    }
}
.nav-show{
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 5;
    background-color: transparent;
    display: none;
    top: 0;
    left: 0;
}
#audio{
    display: none;
}
::-webkit-scrollbar{
    width: 5px;
}
::-webkit-scrollbar-thumb{
    background: rgb(100, 100, 255);
    border-radius: 5px;
    margin-right: 2px;
    transition: 0.5s ease-in-out;
}

::-webkit-scrollbar-thumb:hover{
    background: rgb(100, 100, 255);
    border-radius: 5px;
    margin-right: 2px;
    transition: 0.5s ease-in-out;
}