:root {
    --accent-color: #c0c0c0;
}

#arrowup{
    width: 40px;
    transition: all 0.3s;

}

br{
    user-select: none;
}

.official{
    height: 24px;
    transition: all 0.3s;
    margin: 0 0 0 20px;
    user-select: none;
}
.official:hover{
    cursor: pointer;
    filter: drop-shadow(0 0 8px var(--accent-color));
}

.partner{
    height: 24px;
    transition: all 0.3s;
    margin: 0 0 0 20px;
    user-select: none;
}
.partner:hover{
    cursor: pointer;
    filter: drop-shadow(0 0 8px var(--accent-color));
}


#arrowup:hover{
    cursor: pointer;
    opacity: 0.8;
}

#div-projects{
    display: block;
}
#div-aboutme{
    display: none;
}

#div-contact{
    display: none;
}
#div-partnerinfo{
    display: none;
}
#div-officialinfo{
    display: none;
}

#myprojectsspan{
    color: var(--accent-color);
}

#navbar span{
    text-decoration: none;
    transition: all 0.3s;
    padding: 0 20px 0 0px;
    font-weight: bold;
    user-select: none;
}
#navbar span:hover{

    cursor: pointer;
}

#content a{
    text-decoration: none;
    transition: all 0.3s;
    color: var(--accent-color);

}
#content a:hover{
    color : var(--accent-color);
}


#navbar{
    padding: 30px 0 60px 0;
}
#navbar span{
    font-size: 20px;
}
#whitesoka{
    height: 40px;
    margin: 0 0px 0 15px;
    transition: all 0.3s;
    user-select: none;
}


html {
    scroll-behavior: smooth;
  }
body {
    background-color: #080808;
    margin: 0;
    display: flex; 
    justify-content: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    transition: all 0.3s;
    
}

#copied{
    position: absolute;
    width: 200px;
}
h1{
    font-size: 28px;
}
h2{
    font-size: 22px;
}
h3{
    font-size: 19px;
    display: flex;
    align-items: center;
}
span{
    font-size: 16px;
}

.mainbutton{
    border: thin solid transparent;
    padding: 10px 25px 10px 25px;
    border-radius: 8px;
    color: white;
    background-color: rgb(40, 40, 40);
    transition: all 0.3s;
    user-select: none;
    
}
.mainbutton:hover{
    cursor: pointer;
    background-color:var(--accent-color);
    color: rgb(223, 223, 223);
    scale: 1.1;
}

#bodycenter {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#main {
    max-width: 700px;
    background-color: rgb(21, 21, 21);
    color: white;
    border-radius: 30px;
    height: auto;
    margin-top: 100px;
    margin-bottom: 100px;
    display: grid;
    justify-content: center;
    transition: all 0.3s;
    filter: drop-shadow(0px 0px 50px var(--accent-color));
    border: 4px solid var(--accent-color);

}


header{
    width: auto;
    height: auto;
}


#logo {
    max-width: 100%;
    transition: all 0.9s;
    user-select: none;
}
#logo:hover{
    filter: drop-shadow(0px 0px 20px var(--accent-color));
    cursor: pointer;
}

#head-div {
    display: flex;
    justify-content: center;
    height: 250px;
}

#banner {
    width: 100%;
    height: auto;
    border-radius: 30px 30px 0 0;
    user-select: none;
}
#hd-1{

    width: 150px;
    height: 100%;
    padding: 60px 50px 0 0;
}

#hd-2{
    width: 50%;
    height: 100%;
    padding: 3px 0 0 0;
    line-height: 1.5;
}

#usertag{
    opacity: 0.7;
    font-size: 20px;
    padding: 4px 0 0 0px;
    margin: 0 0 20px 15px;
    transition: all 0.3s;

}
#usertag:hover{
    color: var(--accent-color);
    cursor: pointer;
}
#usertag-bottom{
    opacity: 0.7;
    font-size: 20px;
    padding: 4px 0 0 20px;
    margin: 0 0 20px 0;
    transition: all 0.3s;
    color: var(--accent-color);

}
#usertag-bottom:hover{
    color: var(--accent-color);
    cursor: pointer;
}

#content{
    width: 70%;
    margin-left: 7%;
    margin-bottom: 50px;

    height: auto;
}

#hd-nametag{
    display: flex;
    padding: 60px 0 0 0;
}
#hd-nametag h1{
    margin: 0;
    padding: 0;
}
#contact-icons{
    width: auto;
    padding: 0 0 20px 70px;
    user-select: none;
}
.soc-icon{
    padding: 5px 20px 5px 15px;
    transition: all 0.3s;
    width: 30px;
    user-select: none;
}
.soc-icon:hover{
    cursor: pointer;
    opacity: 0.6;
    /* scale: 1.15; */
}

#content span{
    text-decoration: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}




.projectimg{
    width: 40px;
    margin: 0 20px 0 0;
    transition: all 0.3s;
    user-select: none;
}


@media (max-width: 600px){
    #fulcrum{
        height: 25px;
        margin: 0 0px 0 15px;
        transition: all 0.3s;
    }
    #main {
        max-width: 100%;
        background-color: rgb(21, 21, 21);
        color: white;
        border-radius: 30px;
        filter: drop-shadow(0px 0px 0px var(--accent-color));
        height: auto;
        margin-top: 10px;
        margin-bottom: 20px;
        
        display: grid;
        justify-content: center;
    }
    #main:hover{
        scale: 1;
        filter: none;
    }
    h1{
        font-size: 23px;
    }
    h2{
        font-size: 19px;
    }
    h3{
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .official{
        height: 16px;
        transition: all 0.3s;
        margin: 0 0 0 20px;
    }
    .official:hover{
        cursor: pointer;
        filter: drop-shadow(0 0 8px var(--accent-color));
    }
    
    .partner{
        height: 16px;
        transition: all 0.3s;
        margin: 0 0 0 20px;
    }
    .partner:hover{
        cursor: pointer;
    }
    span{
        font-size: 14px;
    }
    #banner {
        max-width: 100%;
        border-radius: 30px 30px 0 0;
    }
    #hd-nametag{
        display: flex;
        width: 50%;
        padding: 100px 0 0 10px;
        flex-wrap: wrap;
    }
    #usertag{
        opacity: 0.7;
        font-size: 13px;
        padding: 4px 0 0 0;
        margin: 0 0 20px 0;
        transition: all 0.4s;
        
    
    }
    #hd-infos{
        width: 100%;
        display: flex;
    }
    #hd-1{

        width: 100%;
        height: auto;
        padding: 0;
        position: absolute;
        display: grid;
        justify-content: center;
        top: 70px;
        transition: all 0.5s;
        /* top: 0;
        left: 50%;
        transform: translate(-50% , -50%); */
    }
    #logo{
        width: 110px;
        height: auto;

        transition: all 0.5s;
    }
    #hd-2{
        width: auto;
        padding-left: -30px;
        transition: all 0.5s;
        /* position: relative; */
    }
    #head-div {
        display: flex;
        height: auto;
    }
    
    #contact-icons{
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 20px 0 20px 0;
        margin: 0;
    }
    .soc-icon{
        padding: 5px 20px 5px 20px;
        transition: all 0.3s;
        width: 20px;
    }
    #content{
        width: 70%;
        margin-left: 7%;
    
        height: auto;
    }
    #navbar a{
        text-decoration: none;
        transition: all 0.3s;
        font-size: 13px;
        padding: 0;
    }
    #navbar a:hover{
        color: white;
    }
    #navbar{
        padding: 30px 0 30px 0;
        width: 100%;
        min-width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #navbar span{
        font-size: 15px;
    }
    .p-info{
        font-size: 10px;
        width: auto;
        margin: 10px;
    }
    
}

.mp-contentitem {
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    transition: all 0.3s;
    margin: 20px 0;
}

.mp-contentitem:hover {
    background-color: rgb(29, 29, 29);
}

.joinbutton {
    width: 300px;
    padding: 13px;
    background-color: #272727;
    color: white;
    border-radius: 10px;
    border: none;
    transition: all 0.3s;
    margin: 10px 0 10px 0;
}

.joinbutton:hover{
    background-color: #353535;
    cursor: pointer;
}

#version {
    font-size: 12px;
    opacity: 0.6;
    margin: 20px 0 0 0;
}