@font-face {
    font-family: nowregular;
    src: url("now.regular.otf") format("opentype");
}

body
{
    padding: 0;
    margin: 0;
    
    font-family: nowregular, sans-serif;
    overflow-x: hidden;
    
    /*background-color: #e3ffee;*/
    background-color: #ebfdff;
}

a
{
    color: chocolate;
}

a:visited
{
    color: #522600;
}

.hidden{
    display: none;
}

/* for the scroll bar */

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #c7931a;
    border-radius: 30px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #916a0f; 
}

/* load animation */
div.load-animation{
    padding: 0;
    margin: 0;
    position: absolute;
    
    transition: 0.5s ease;
    margin: 4vh 0 0vh;
}
canvas#initiate{
    width: 18vmin;
    height: 18vmin;
    position: relative;
    left: 50vw;
    margin-left: -9vmin;
}

/* the animation stuff */
@keyframes fade-in{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fade-out{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.animate-fade-in{
    animation-name: fade-in;
    animation-duration: 0.6s;
    animation-timing-function: ease;
}
.animate-fade-out{
    animation-name: fade-out;
    animation-duration: 0.6s;
    animation-timing-function: ease;
}

div#actual-site{
    transition: 0.5s ease;
    position: absolute;
}

/* tops */
div.top{
    text-align: center;
    min-height: 100vh;
}

div.wrapp{
    text-align: center;
    margin: 4vh 0 0vh;
}

div.top-logo{
    width: 18vmin;
    height: 18vmin;
    background-image: url("hornet's_nest_logo.svg");
    background-size: contain;
    text-align: center;
    position: relative;
    left: 50vw;
    margin-left: -9vmin;
    z-index: -999;
}

h1.title{
    font-family: nowregular;
    font-size: 2.8rem;
    font-weight: normal;
    text-align: center;
    padding: 2vh 0 0vh;
    margin: 0;
}
h2.title2{
    font-family: nowregular;
    font-size: 1.15rem;
    font-weight: normal;
    text-align: center;
    padding: 0 15vw;
    margin: 0;
}

div.top-titol{
    font-size: 1.7em;
    margin: 0.9em 0;
}
/* the primary items */
div.step-2{
    visibility: hidden;
}

div.top-items{
    display: flex;
    flex-direction: row;
}
div.top-item{
    flex: 1;
    text-align: center;
    padding: 0 1.5em;
    
    position: relative;
}

div.top-item div.item-imag{
    width: 12vmin;
    height: 12vmin;
    background-size: contain;
    margin: auto;
}

div.top-item div.tlink{
    font-size: 1.4rem;
}
div.top-item div.tdesc{
    font-size: 1rem;
    line-height: 1.8
}

div#top-item-am div.item-imag{
    background-image: url("logo_png.png");
}

div#top-item-nadiya div.item-imag{
    background-image: url("nadiya-bot/nadiya_plus.png");
}
div#top-item-spyballoon div.item-imag{
    background-image: url("balloon.png");
}
div#top-item-social div.item-imag{
    background-image: url("discord-512.png");
}

div#top-item-youtube div.item-imag{
    background-image: url("youtube-512.png");
}

div#top-item-2pi div.item-imag{
    background-image: url("2piboard_logo.png");
}

/* the secondary items */
div.top-items-2{
    text-align: left;
    padding: 0 5vw;
}
div.top-item-2{
    line-height: 1.5;
}
div.top-item-2 h2{
    font-size: 1.4em;
    font-weight: normal;
}

div.support{
    margin: 5vh 0;
    visibility: hidden;
}
@keyframes top-item-anim{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
div.top-item-anima{
    animation-name: top-item-anim;
    animation-duration: 0.6s;
    animation-timing-function: ease;
    visibility: visible;
}

/* the middle part */
div.mid{
    height: auto;
    width: 100vw;
    margin: 0;
}

div.team-desc{
    width: 100%;
    float: left;
}

div.our-team{
    margin: 6% 3% 2% 4%;
    border-top: 1px solid gray;
    border-left: 4px solid gray;
    padding: 0 1%;
    line-height: 1.5;
}

h2.about-site-owner {
    font-family: nowregular;
    font-size: 1.7rem;
    font-weight: normal;
    text-align: center;
    padding: 2vh 0 0vh;
    margin: 0;
}

div.individual-desc {
    margin: 1% 4%;
}

div.individual-desc div.our-team {
    margin: 2% 4% 2% 0%;
    /* width: 43%; */
    float: left;
}

div.our-team a {
    padding: 0 0.6em;
}

div.member-head{
    font-size: 2.0em;
    padding: 0.6em;
}

div.member-quote{
    padding: 1em 1em;
    text-align: center;
}

div#member-desc-kevvol div.member-quote{
    color: #9c0913;
}

div#member-desc-emily div.member-quote{
    color: #e38dda;
}
/*
div.desc-pics{
    width: 55%;
    height: 100%;
    float: right;
    display: flex;
    flex-direction: row;
    background-color: #202020;
    overflow: hidden;
}

div.desc-flex{
    flex: 1;
    
    transition: 0.7s ease;
    position: relative;
}

div.desc-pic{
    background-size: cover;
    background-position: center;
    width: 50vmax;
    height: 50vmax;
    position: absolute;
    left: 2vmax;
    top: 2vmax;
}

div.kevvol-ring-bg{
    background-image: url(ring_glo.png);
    position: absolute;
    width: 40vmax;
    height: 40vmax;
    left: 8vmax;
    top: 4vmax;
    background-size: contain;
    animation-name: spin;
    animation-duration: 60000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

canvas.spr{
    position: absolute;
    width: 48vmax;
    height: 48vmax;
    left: 4vmax;
    top: 0vmax;
}

img.code-txt{
    width: 28vmax;
    top: 2vmax;
    left: -0.5vmax;
    position: absolute;
}
*/

/* the second middle part */
div.mid2{
    min-height: 100vh;
    width: 100vw;
    background-color: #0f0f0f;
    background-image: url("we want you.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
    text-align: center;
    margin: 0;
}

div.mid2 h2{
    font-weight: normal;
    font-size: 3rem;
    margin: 0;
    padding: 0.4em;
}
div.mid2 div.descs{
    padding: 0.8em 18vw;
}
div.mid2 div.liste{
    padding: 0.8em 10vw;
    text-align: left;
    line-height: 1.4;
}
div.mid2 h3{
    font-weight: normal;
    font-size: 1.4rem;
    padding: 0.6em;
}
span.hl-ylw{
    color: yellow;
}
div.liste a{
    color: orange;
}

/* the bottom part */
div.bot{
    color: black;
}

/* for the mobile */
@media only screen and (max-width: 900px), screen and (orientation: portrait)
{
    div.top-items {
        flex-direction: column;
    }
    div.mid{
        height: auto;
    }
    div.team-desc{
        width: 100%;
        height: auto;
    }
    div.desc-pics{
        width: 100%;
        height: 60vmax;
    }

    div.desc-flex{}

    div.desc-pic{
        width: 63vmax;
        height: 63vmax;
    }

    div.kevvol-ring-bg{
        width: 52vmax;
        height: 52vmax;
    }

    div.individual-desc div.our-team {
        width: 95%;
    }

    canvas.spr{
        width: 52vmax;
        height: 52vmax;
    }

    img.code-txt{
        width: 36vmax;
        top: 7vmax;
    }

}