*{
    margin:0px;
    padding:0px;
}

body{
    width:100%;
    height:100%;
    font-family:"Raleway";
    overflow:hidden;
}

#splash{
    text-align:center;
    font-family:"Raleway";
    position:relative;
    top:25%;
    color:white;
    
    text-shadow: 1px 2px 15px rgba(0, 0, 0, 0.35);
}

#splash #title{
    width:100%;
    
    font-weight:100;
    
    color:white;
    font-size:90px;
    margin-bottom:30px;
}

#glo-content{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

.opbtn{
    display:inline-block;
    margin:40px;
    width:200px;
    height:40px;
    border:1px solid white;
    font-size:20px;
    padding-top:11px;
    background: transparent;
    border-radius:1000px;
    transition:all 0.2s ease;
    cursor:pointer;
}

.opbtn:hover{
    background:white;
    color:black;
}

#menu_button{
    position:absolute;
    top:0px;
    left:0px;
    cursor: pointer;
}

#mines-logo{
    position:absolute;
    bottom:20px;
    right:20px;
    filter:invert(1);
    height:auto;
    transition:all 0.2s ease;
}

#header{
    color:white;
    text-align:center;
    background:rgba(0,0,0,0.8);
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    border-radius:5px;
    box-shadow: 2px 2px 15px rgba(0,0,0,0.3);
    z-index:9999;
}

#header span{
    display:inline-block;
    padding:20px;
    border-top:0px solid white;
    padding-top:20px;
    margin-left:20px;
    transition:border-top 0.3s ease,padding-top 0.3s ease,background 0.3s ease;
    cursor:pointer;
    background:transparent;
}

#header span:hover{
    background:rgba(255, 255, 255, 0.2);
    padding-top:15px;
    border-top:5px solid white;
}

#content{
    padding:90px 20px 20px 20px;
    background: white;
    height: 100%;
    position: absolute;
    top: 110%;
    left: 100px;
    right: 100px;
    box-shadow: 0px 0px 35px rgba(0,0,0,0.8);
    z-index: 25;
    transition:top 0.4s ease;
    overflow-y: auto;
}

.categorybox{
    display:inline-block;
    width:250px;
    height:250px;
    border-radius:5px 5px 0px 0px;
    box-shadow: 2px 2px 25px rgba(0,0,0,0.2);
    background:#dbdbdb;
    border-bottom:6px solid #b2b2b2;
    overflow:hidden;
    margin-left: 80px;
    transition:all 0.5s ease;
    margin-bottom:20px;
    position:relative;
}

.weirdtitle{
    display:inline-block;
    width:250px;
    height:50px;
    text-align:center;
    font-size:30px;
    color:black;
}

.categorybox:hover{
    border-bottom: 0px solid #b2b2b2;
    box-shadow:5px 5px 30px rgba(0,0,0,0.3);
}

.profilebox{
    display:inline-block;
    width:200px;
    height:200px;
    margin-left: 50px;
    text-align:center;
}

.profilebox img{
    margin:10px;
    border-radius:1000px;
}

iframe{
    border:0px solid black;
}


#overlay{
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:1000;
}

#overlay div{
    display:none;
}

#overlay #ov-box{
    display:block;
    width:300px;
    position:absolute;
    padding:20px;
    background:white;
    border-radius:5px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
    font-size:12px;
    transition:height 0.7s ease;
}

#login-area{
    background:white;
    box-shadow:2px 2px 15px rgba(0,0,0,0.6);
    border-radius: 1000px;
    position:absolute;
    top:25px;
    right:25px;
    z-index:99999;
    text-align:center;
    padding:5px 20px 5px 20px;
    cursor:pointer;
    transition:bottom 0.7s ease,background 0.5s ease,box-shadow 0.7s ease;
}

#login-area:hover{
    background:#bbb;
    box-shadow:2px 5px 25px rgba(0,0,0,0.6);
}

#optique-side,#matiere-side,#svt-side,#energie-side,#astronomie-side{
    width:40%;
    margin-top:30px;
}

#optique-side mark{
    background:rgba(0, 0, 0, 0.49);
    color:white;
}

#optique-menu,#matiere-menu,#svt-menu,#energie-menu,#astronomie-menu{
    position:absolute;
    top:120px;
    right:20px;
}

#optique-menu div,#matiere-menu div,#svt-menu div,#energie-menu div,#astronomie-menu div{
    color:white;
    transition:all 0.5s ease;
    width:300px;
    margin-bottom:10px;
    padding:10px;
    text-align:center;
    cursor:pointer;
    position:relative;
    bottom:0px;
    box-shadow:0px 0px 0px transparent;
}

#optique-menu div{
    background:crimson;
}

#matiere-menu div{
    background:#dc14b6;
}

#svt-menu div{
    background:#5a9cac;
}

#energie-menu div{
    background:#d8d810;
}

#astronomie-menu div{
    background:#1f5eeb;
}


#optique-menu div:hover,#matiere-menu div:hover,#svt-menu div:hover,#energie-menu div:hover,#astronomie-menu div:hover{
    bottom:2px;
    box-shadow:2px 2px 10px rgba(0, 0, 0, 0.55);
}

img[src="forward.png"]{
    filter:invert(1);
    position: absolute;
    right: 10px;
}