*, *:before, *:after {
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100vw;
}

body {
    box-sizing: border-box;
    overflow-x:hidden;
    background-color: #008080;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    align-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: Tahoma, Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 11px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

/* --------------------- ICONS DESKTOP ------------------------- */


.icon1 > div:hover{
    background-color: #0000001c;
    border-color:#ffffff59;
    border-width: 0.05px;
    border-style: solid;
}
.icon2 > div:hover{
    background-color: #0000001c;
    border-color:#ffffff59;
    border-width: 0.05px;
    border-style: solid;
}
.inconr > div:hover{
    background-color: #0000001c;
    border-color:#ffffff59;
    border-width: 0.05px;
    border-style: solid;
}
.icon3{ 
    font-family: monospace;
    position: absolute;
    z-index: 1;
    font-weight: 700;
    font-size: 1.2em;
    bottom:0px;
    color: white;
    right: 10px;
    display: table;
    margin-bottom: 50px;
    width: auto;
    margin-top: 10px;
    right: 0px;

    -webkit-animation: fadein 3s; 
    -moz-animation: fadein 3s; 
    -ms-animation: fadein 3s; 
    -o-animation: fadein 3s; 
    animation: fadein 3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ------------------ ERROR POPUP ------------------- */


.popup{
    margin: 0px;
    display: block;
    height: 100px;
    width: auto;
    position: relative;
    bottom: 0px;
    right: 0px;
    margin-right: 77px;
}

.closepop{
    border-radius: 3px;
    border-width:1px;
    border-color: grey;
    border-style: solid;
    float: right;
    height: 20px;
    width: 20px;
    font-size: 1.2em;
    text-align: center;
    padding: 2px;
    color: grey;
    position: absolute;
    z-index: 10000;
    right: 0px;
    opacity: 0.7;
    margin-top: 12px;
    margin-right: 90px;
    cursor: pointer;
}

/* ------------------ WINDOWS NAV / LINKS  ------------------- */

.textbox{
    font-family: Tahoma, Helvetica, Arial, sans-serif;
    text-transform:uppercase;
    border: 0px;
    background-color: black;
    color: white;

    overflow: hidden;
    resize: none;
    width: 100px;
    height: 15px;
}
.toolbar {
    z-index: 100;
    display: inline-block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #B8B8B8;
    border-top: 1px solid #d2d2d2;
    box-shadow: 0 -1px 0 #ebebeb;
}
.toolbar .start-button {
    float: left;
    margin-top: 2px;
    margin-left: 2px;
    position: absolute;
    height: 90%;
    padding: 5px 10px;
    line-height: 1.25;
    background-color: #B8B8B8;
    float: left;
    text-decoration: none;
    color: black;
    font-family: sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
.toolbar .start-button:hover{
    background-color: darkgrey;
    cursor: pointer;
}
.toolbar .start-button span {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
    background-image: url("../images/Icon_40.ico");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
}
.toolbar .start-menu {
    display: none;
}
.toolbar #start-menu {
    display: none;
}
.toolbar #start-menu:checked ~ .start-menu {
    margin: 0px;
    margin-top: 0;
    position: absolute;
    display: block;
    padding: 0px;
    bottom: 40px;
    width: 205px;
    background-color: #B8B8B8;
    border-right: 2px solid #666;
    border-left: 2px solid #999;
    border-top: 2px solid #999;
    border-bottom: 2px solid #666;
    overflow: hidden;
}
.iconcontainer{

    display:flex; 
    list-style-type: none;
    top : 0px;
    margin-left: 20px;
    padding: 15px;
    padding-left: 30px;
    cursor:pointer; 
    color: black;
    font-family: sans-serif;
    font-size: 1.2em;
    border-width: 1px;
    border-style: ridge;
    border-bottom: none;
    border-right: none;
}


.chut{
    display:flex; 
    list-style-type: none;
    top : 0px;
    margin-left: 20px;
    padding: 15px;
    padding-left: 30px;
    cursor:pointer; 
    color: black;
    font-family: sans-serif;
    font-size: 1.2em;
    border-width: 1px;
    border-style: ridge;
    border-bottom: none;
    border-right: none;
}
.chut:hover{
    background: #00007d;
    color: white;
    font-weight: bold;
    cursor:pointer; 
}
.pdf{
    text-decoration-line: none;
    color: black;
}
.pdf:hover{
    background: #00007d;
    color: white;
    font-weight: bold;
    cursor:pointer; 
}
.iconcontainer:hover{
    background: #00007d;
    color: white;
    font-weight: bold;
    cursor:pointer; 
}
.iconmenu{
    margin-right: 10px;
    height: 15px;
    width: auto;
}

.toolbar #start-menu:checked ~ .start-menu .workstation {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-image: linear-gradient(0deg, blue, black);
    float: left;
    z-index: 0;
}
.toolbar #start-menu:checked ~ .start-menu .workstation > div {
    position: relative;
    color: white;
    transform: rotate(270deg);
    transform-origin: left bottom 0;
    white-space: nowrap;
    font-size: 2em;
    left: 22px;
    top: 215px;
}
.iconbar{
    margin-top: 2px;
    display: block;
    float: left;
    width: 80px;
}
.enhaut{
    width: 10px;
    margin-right: 5px;
}
#smallone {
    margin-top: 2px;
    display: block;
    float: left;
    text-decoration: none;
    color: black;
    margin-left: 0px;
    width: 155px;
    height: 35px;
    text-align: right;
    font-family: sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    padding: 11px;
    padding-right: 15px;
    background-image: url("../images/scrnsave_100.ico");
    background-size: auto 70%;
    background-position: 8% 50%;
    background-repeat: no-repeat;
}
#smallone:hover {
    background-color: darkgrey;
}
#docss{

    margin-top: 2px;
    float: left;
    text-decoration: none;
    color: black;
    width: 165px;
    height: 35px;
    text-align: right;
    font-family: sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    padding: 11px;
    padding-left: 3px;
    padding-right: 15px;
    background-image: url("../images/folder.ico");
    background-size: auto 70%;
    background-position: 5% 50%;
    background-repeat: no-repeat;
}
.doci{    display: none;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid black;
    border-bottom: 2px solid black;}

.showsmall {
    display: none;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
#gros{
    margin-top: 2px;
    display: none;
    float: left;
    text-decoration: none;
    color: black;
    width: 100px;
    height: 35px;
    text-align: right;
    font-family: sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    padding: 11px;
    padding-right: 15px;
    background-image: url("../images/internet_explorer5-3.png");
    background-size: auto 70%;
    background-position: 5% 50%;
    background-repeat: no-repeat;
    margin-left: 5px;
}
#gros:hover {
    background-color: darkgrey;
}

.showwindow {
    display: none;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
#info{
    margin-top: 0px;
    margin-bottom: 0px;
    float: right;
    display: inline-block;
    text-decoration: none;
    color: black;
    width: 150px;
    padding-top: 10px;
    height: 38px;
    text-align: right;
    font-family: sans-serif;
    font-size: 1.2em;
    background-size: auto 65%;
    background-position: 68% 40%;
    background-repeat: no-repeat;
    font-weight: 800;
    opacity: 0.70;
    -webkit-box-shadow: inset -2px -2px 0 0 white, inset 1px 1px 0 0 , inset -2px -2px 0 0 white, inset 0px 0px 0 0 #dedcde
}
.infos > div {
    padding-right: 10px;
}
#info:hover {
    cursor: pointer;
    background-color: darkgrey;
}
.infos {
    border-top: 2px solid #cac6cb;
    border-left: 2px solid #cac6cb;
    border-right: 2px solid #cac6cb;
    border-bottom: 2px solid #cac6cb;
}
.attpop0{
    opacity: 0.7;
    position: absolute;
    width: 22px;
    height: auto;
    right: 120px;
    bottom: 10px;

}

.attpop{
    opacity: 0.7;
    position: absolute;
    width: 22px;
    height: auto;
    right: 90px;
    bottom: 10px;

}
.attpop2{
    opacity: 0.7;
    position: absolute;
    width: 22px;
    height: auto;
    right: 60px;
    bottom: 10px;

}

.browsing{
    border-width: 2px;
}
.compris button{
    margin-left: 43%;
    margin-top: 10px;
    font-weight: bold;
}
.credits{
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 20px;
    margin-left: 10px;
    margin-top: 10px;
}
.credits2{
    background-color: darkgrey;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    line-height: 20px;
    margin-left: 2px;
    margin-top: 10px;
}

/* ------------------ CSGO------------------- */

.fenetrecp4 {
    top: 25%;
    right: 35%;
    float: inherit;
    display: none;
    position: absolute;
    z-index: 120;
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height:90px;
    margin-top: 10%;
    padding: 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}
.error{
    text-align: justify;
    margin: 10px;
    font-size: 1.2em;
    line-height: 20px;
}
.fenetrecp4 .inner {
    width: 100%;
    height: 100%;
    background: #cac6cb;
    padding: 3px;
}
.fenetrecp4 .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.fenetrecp4 .bar:hover {
    cursor: move;
}
.fenetrecp4 .bar h1 {
    padding-left: 5px;
    font-weight: 700;
}
.fenetrecp4 .bar .buttons a {
    color: #464147;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    background: #cac6cb;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.fenetrecp4 .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.fenetrecp4 .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}
/* ------------------ INFOS & CREDITS ------------------- */

.fenetrecp3 {
    top: 25%;
    right: 35%;
    float: inherit;
    display: none;
    position: absolute;
    z-index: 120;
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height:110px;
    margin-top: 10%;
    padding: 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}

.fenetrecp3 .inner {
    width: 100%;
    height: 100%;
    background: #cac6cb;
    padding: 3px;
}
.fenetrecp3 .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.fenetrecp3 .bar:hover {
    cursor: move;
}
.fenetrecp3 .bar h1 {
    padding-left: 5px;
    font-weight: 700;
}
.fenetrecp3 .bar .buttons a {
    color: #464147;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    background: #cac6cb;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.fenetrecp3 .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.fenetrecp3 .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}

/* ------------------ DOWNLOADS & LINKS(cmd) ------------------- */

.fenetrecp2 {
    overflow: hidden;
    background-color: black;
    position: absolute;
    top:10px;
    display: none;
    z-index: 1;
    right: 50px;
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 530px;
    margin-top: 3%;
    margin-right: 50px;
    padding: 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}
.fenetrecp2 img{
    opacity: 0.80;
    margin-left: 1px;
}
.fenetrecp2 img:hover{
    opacity: 0.40;
}

.fenetrecp2 .inner {
    width: 100%;
    height: 100%;
    float: left;

    -webkit-box-shadow: inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 GREY;
    background-position: center;
}
.fenetrecp2 .bar {
    display: flex;
    margin-left: 2px;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 22px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.fenetrecp2 .bar h1 {
    padding-left: 5px;
    font-weight: 700;
}
.fenetrecp2 .bar .buttons a {
    color: #464147;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.fenetrecp2 .bar:hover{
    cursor: move;
}
.fenetrecp2 .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.fenetrecp2 .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}
.fenetrecp2 .menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1px 0;
    background: #cac6cb;
    border-bottom-style: ridge;
    border-bottom-width: 1px;

}
.fenetrecp2 .menu a {
    cursor: default;
    display: block;
    padding: 4px 6px 5px;
    color: #464147;
    text-decoration: none;
    background: #cac6cb;
}
.fenetrecp2 .menu a:first-letter {
    text-decoration: underline;
}

/* ------------------ PAGE PRINCIPALE ------------------- */

@media only screen and (max-width: 1920px){
    .fenetrecp { width: 90%; }
}
.fenetrecp {
    position: relative;
    display:none;
    z-index: 2;
    resize: both;
    overflow: hidden;
    width: 85%;
    height: 90%;
    max-width: 1440px;
    max-height: 1400px;
    padding: 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}
.fenetrecp .bar:hover{
    cursor: move;
}
.wesh {
    width: 100%;
    max-width: 1440px;
    height: 100%;
    max-height: 1920px;
    padding: 1px;
}

.weshz{
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}
.fenetrecp .inner {
    width: 100%;
    height: 100%;
    box-shadow: inset -1px -1px 0 0 #a099a1, inset 1px 1px 0 0 white;
    background: #cac6cb;
    padding: 3px;
}
.fenetrecp .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.fenetrecp .bar h1 {
    padding-left: 5px;;
    font-weight: 700;
}
.fenetrecp .bar .buttons {
    display: -webkit-box;
    display: flex;
}
.fenetrecp .bar .buttons a {
    color: #464147;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    border: 0;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.fenetrecp .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.fenetrecp .bar .buttons a.close:hover{
    background-color: darkgray;
    cursor: pointer;
}
.fenetrecp .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}
.fenetrecp .bar .buttons a.maximize:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    opacity: 0.3;
    width: 8px;
    height: 8px;
    border: 1px solid #464147;
    border-top-width: 2px;
}
.fenetrecp .bar .buttons a.close:before, .fenetrecp .bar .buttons a.close:after {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -1px;
    width: 2px;
    height: 8px;
    background: #464147;
}
.fenetrecp .bar .buttons a.close:before {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.fenetrecp .bar .buttons a.close:after {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.fenetrecp .menu ul {
    display: flex;
    padding: 1px;
}
.fenetrecp .menu a {
    display: block;
    padding: 4px 6px 5px;
    color: #464147;
    text-decoration: none;
}
.fenetrecp .menu a:first-letter {
    text-decoration: underline;
}
.fenetrecp .container {
    position: relative;
    height: calc(95%);
}
.fenetrecp .content {
    height: calc(100% - 24px);
}
.fenetrecp .content .content-section {
    opacity: 0;
    will-change: opacity, z-index;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.fenetrecp .menu-input, .fenetrecp .menu-label {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: calc(20% - 2px);
    height: 22px;
}
.fenetrecp .menu-input:nth-of-type(1), .fenetrecp .menu-label:nth-of-type(1) {
    left: 0;
}
.fenetrecp .menu-input:nth-of-type(2), .fenetrecp .menu-label:nth-of-type(2) {
    left: calc(20% + 0.5px);
}
.fenetrecp .menu-input:nth-of-type(3), .fenetrecp .menu-label:nth-of-type(3) {
    left: calc(40% + 1px);
}
.fenetrecp .menu-input:nth-of-type(4), .fenetrecp .menu-label:nth-of-type(4) {
    left: calc(60% + 1.5px);
}
.fenetrecp .menu-input:nth-of-type(5), .fenetrecp .menu-label:nth-of-type(5) {
    left: calc(80% + 2px);
}
.bouton{
    text-decoration-line: none;
    color: black;
}
.fenetrecp .menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1px;
    z-index: 4;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.fenetrecp .menu-input {
    opacity: 0;
    display: block;
    z-index: 3;
    margin: 0;
}
.fenetrecp .menu-input:checked + label {
    background-color: white;
    background-image: linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0), linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
    box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
}


.oui{
    line-height: 1.5em;
    text-transform: uppercase;
    font-family: 'VT323', monospace;
    margin-top: 2px;
    margin-left: 7px;
    color: white;
    font-weight: 500;
    font-size: 1.2em;
}
.oui a{
    text-decoration-line: none;
    color: green;
}

.icon1{ 
    position: absolute;
    z-index: 1;
    top:0px;
    left: 0px;
    display: table;
    height: 50%;
    width: 10px;
    margin-left: 10px;
    margin-top: 10px;
}
.icon1:hover{
    cursor: pointer;
}
.icon1, img{
    width: 70px;
    height: auto; 
}
.icon2{ 
    position: absolute;
    z-index: 1;
    top:0px;
    left: 90px;
    display: table;
    height: 50%;
    width: 10px;
    margin-left: 10px;
    margin-top: 10px;
}
.icon2:hover{
    cursor: pointer;
}


@media only screen and (max-width: 1920px){
    .documents { width: 90%; }
}
.fenetrecp2 {
    overflow: hidden;
    background-color: black;
    position: absolute;
    top:10px;
    z-index: 1;
    right: 50px;
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 530px;
    margin-top: 3%;
    margin-right: 50px;
    padding: 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}

.fenetrecp {
    position: absolute;
    display:none;
    z-index: 2;
    resize: both;
    overflow: hidden;
    width: 85%;
    height: 90%;
    max-width: 100%;
    max-height: 1400px;
    padding: 1px;
    top:0;
    left: 0;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}


.documents {
    position: absolute;
    display:none;
    z-index: 30;
    resize: both;
    overflow: hidden;
    width: 45%;
    height: 50%;
    max-width: 1440px;
    max-height: 1400px;
    padding: 1px;
    top:15%;
    left: 10%;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}

.documents .bar:hover{
    cursor: move;
}
.wesh {
    width: 100%;
    max-width: 1440px;
    height: 100%;
    max-height: 1920px;
    padding: 1px;
}
.documents .inner {
    width: 100%;
    height: 100%;
    box-shadow: inset -1px -1px 0 0 #a099a1, inset 1px 1px 0 0 white;
    background: #cac6cb;
    padding: 3px;
}
.documents  .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.documents .bar h1 {
    padding-left: 5px;;
    font-weight: 700;
}
.documents .bar .buttons {
    display: -webkit-box;
    display: flex;
}
.documents .bar .buttons a {
    color: #464147;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    border: 0;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.documents .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.documents .bar .buttons a.close:hover{
    background-color: darkgray;
    cursor: pointer;
}
.documents .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}
.documents .bar .buttons a.maximize:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    opacity: 0.3;
    width: 8px;
    height: 8px;
    border: 1px solid #464147;
    border-top-width: 2px;
}
.documents .bar .buttons a.close:before, .documents .bar .buttons a.close:after {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -1px;
    width: 2px;
    height: 8px;
    background: #464147;
}
.documents .bar .buttons a.close:before {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.documents .bar .buttons a.close:after {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.documents .menu ul {
    display: flex;
}
.documents .menu a {
    display: block;
    padding: 6px 6px 5px;
    color: #464147;
    text-decoration: none;
}
.documents .menu a:first-letter {
    text-decoration: underline;
}
.documents .container {
    border: 1px;
    position: relative;
    height: calc(95%);
}
.documents .content {
    height: calc(100% - 24px);
}
.documents .content .content-section {
    opacity: 0;
    will-change: opacity, z-index;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.documents.menu-input, .fenetrecp .menu-label {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: calc(20% - 2px);
    height: 22px;
}
.documents .menu-input:nth-of-type(1), .fenetrecp .menu-label:nth-of-type(1) {
    left: 0;
}
.documents .menu-input:nth-of-type(2), .fenetrecp .menu-label:nth-of-type(2) {
    left: calc(20% + 0.5px);
}
.documents .menu-input:nth-of-type(3), .fenetrecp .menu-label:nth-of-type(3) {
    left: calc(40% + 1px);
}
.documents .menu-input:nth-of-type(4), .fenetrecp .menu-label:nth-of-type(4) {
    left: calc(60% + 1.5px);
}
.documents .menu-input:nth-of-type(5), .fenetrecp .menu-label:nth-of-type(5) {
    left: calc(80% + 2px);
}
.bouton{
    text-decoration-line: none;
    color: black;
}
.documents .menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1px;
    z-index: 4;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.documents .menu-input {
    opacity: 0;
    display: block;
    z-index: 3;
    margin: 0;
}
.documents .menu-input:checked + label {
    background-color: white;
    background-image: linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0), linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
    box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
}
.beta{
    font-weight: 800;
    color: green;
    line-height: 1.5em;
    text-transform: uppercase;
    font-family: 'VT323', monospace;
    margin-top: 2px;
    margin-left: 7px;
    color: white;
    font-weight: 300;
    font-size: 1.2em;
}
.beta pre{
    text-decoration-line: none;
    color: green;
}
.back{
    margin-top: 0px;
    padding-top: 0px;
    background-color: transparent;
    font-weight: bold;
    cursor: pointer;
    margin: 0px;
}

.troplong{
    margin-top: 4px
}



/* ------------------ SHUTDOWN SCREEN ------------------- */
#feeback{
    display: none;
}
.shutdown {
    background-color: #cac6cb;
    display: none;
    top : 12%;
    left: 35%;
    position: absolute;
    z-index: 120;
    padding: 1px;
    max-width: 390px;
    padding-bottom: 6px;
    margin: 1px;
    -webkit-box-shadow: inset -2px -2px 0 0 #464147, inset 2px 1px 0 0 #dedcde;}

.shutdown .inner {
    height: 100%;
    padding: 3px;
}


.shutdown .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.shutdown .bar h1 {
    padding-left: 5px;;
    font-weight: 700;
}

.shutdown .bar:hover {
    cursor: move;
}
.fenetrecp3 .bar h1 {
    padding-left: 5px;
    font-weight: 700;
}
.shutdown .inner .user1:first-letter {
    text-decoration: underline;
}
.shutdown .inner .user2:first-letter {
    text-decoration: underline;
}
.user{
    margin-top: 15px;
}
.user a{

    margin-left: 10px;
    margin-top: 10px;
    padding-top: 10px;
}
.user1 {
    text-align: center;
    margin-top: 30px;
    margin-left: 10px;
    display: block;
    float: left;
    display: block;
    padding-bottom: 5px
}
.user1 a{
    margin-bottom: 10px;
    margin-right: 10px;
}
.user2 a{
    margin-bottom: 10px;
    margin-right: 16px;
}
.user2 {
    margin-left: 10px;
    display: block;
    margin-left: 10px;
    float: left;
    display: block;
    padding-bottom: 5px
}
.shut{
    float:right;
    overflow: hidden;
    resize: none;
    width: 150px;
    height: 25px;
    background-color: white;
    -webkit-box-shadow: inset -2px -2px 0 0 white, inset 1px 1px 0 0 , inset -2px -2px 0 0 white, inset 2px 2px 0 0 #dedcde

}
.shutdown img{
    margin-left: 10px;
    margin-top: 15px;
    margin-bottom: 50px;
    width: 60px;
    float: left;
    display: block;
}
.restart{

    margin-top: 10px;
    margin-left: 60px;
    background-color: transparent;
    font-weight: bold;
    cursor:pointer;
    width: 80px;
    height: 25px; 
}
.restarte{
    margin-top: 10px;
    margin-right: 13px;
    margin-top: 10px;
    margin-left: 60px;
    background-color: transparent;
    font-weight: bold;
    cursor: pointer;
    width: 80px;
    height: 25px; 
    right: 5px;
    float: right;
}
.restart:hover{
    background-color: darkgray;
}
.restarte:hover{
    background-color: darkgray;
}

.iconmenu a:first-letter {
    text-decoration: underline;
}

/* ------------------ Setup (paint) ------------------- */

.shalom{
    position: absolute;
    width: 100%;
    height: 97%;
    left: 0px;
    top: 0px;
}
.setup {
    position: relative;
    display:none;
    z-index: 30;
    resize: both;
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-width: 740px;
    max-height: 569px;
    padding: 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}

.setup .bar:hover{
    cursor: move;
}
.setup .inner {
    width: 100%;
    height: 100%;
    box-shadow: inset -1px -1px 0 0 #a099a1, inset 1px 1px 0 0 white;
    background: #cac6cb;
    padding: 3px;
}
.setup  .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.setup.bar h1 {
    padding-left: 5px;;
    font-weight: 700;
}
.setup .bar .buttons {
    display: -webkit-box;
    display: flex;
}
.setup .bar .buttons a {
    color: #464147;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    border: 0;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.setup .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.setup .bar .buttons a.close:hover{
    background-color: darkgray;
    cursor: pointer;
}
.setup .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}
.setup .bar .buttons a.maximize:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border: 1px solid #464147;
    border-top-width: 2px;
}
.setup .bar .buttons a.close:before, .setup .bar .buttons a.close:after {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -1px;
    width: 2px;
    height: 8px;
    background: #464147;
}
.setup .bar .buttons a.close:before {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.setup .bar .buttons a.close:after {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.setup .menu ul {
    display: flex;
}
.setup .menu a {
    display: block;
    padding: 6px 6px 5px;
    color: #464147;
    text-decoration: none;
}
.setup .menu a:first-letter {
    text-decoration: underline;
}
.setup .container {
    border: 1px;
    position: relative;
    height: calc(95%);
}
.setup .content {
    height: calc(100% - 24px);
}
.setup .content .content-section {
    opacity: 0;
    will-change: opacity, z-index;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.setup .menu-input, .setup .menu-label {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: calc(20% - 2px);
    height: 22px;
}
.bouton{
    text-decoration-line: none;
    color: black;
}
.setup .menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1px;
    z-index: 4;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.setup .menu-input {
    opacity: 0;
    display: block;
    z-index: 3;
    margin: 0;
}
.setup .menu-input:checked + label {
    background-color: white;
    background-image: linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0), linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
    box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
}

.gif{
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    width: 90%;
    height: auto;
}
.paint{
    margin-top: 5px;
    width: 60%;
}
.paint2{
    margin-top: 0px;
    float: left;
    margin-right: 3px;
}


/* ------------------ Notepad (help) ------------------- */

.notepad {

    position: relative;
    display:none;
    z-index: 30;
    resize: both;
    width: 100%;
    height: 100%;
    max-width: 740px;
    max-height: 569px;
    padding: 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}
.notepad .bar:hover{
    cursor: move;
}
.notepad .inner {
    width: 100%;
    height: 100%;
    box-shadow: inset -1px -1px 0 0 #a099a1, inset 1px 1px 0 0 white;
    background: #cac6cb;
    padding: 3px;
}
.notepad  .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.notepad.bar h1 {
    padding-left: 5px;;
    font-weight: 700;
}
.notepad .bar .buttons {
    display: -webkit-box;
    display: flex;
}
.notepad .bar .buttons a {
    color: #464147;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    border: 0;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.notepad .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.notepad .bar .buttons a.close:hover{
    background-color: darkgray;
    cursor: pointer;
}
.notepad .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}
.notepad .bar .buttons a.maximize:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border: 1px solid #464147;
    border-top-width: 2px;
}
.notepad .bar .buttons a.close:before, .notepad .bar .buttons a.close:after {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -1px;
    width: 2px;
    height: 8px;
    background: #464147;
}
.notepad .bar .buttons a.close:before {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.notepad .bar .buttons a.close:after {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.notepad .menu ul {
    display: flex;
}
.notepad .menu a {
    display: block;
    padding: 2px 6px 5px;
    color: #464147;
    text-decoration: none;
}
.notepad .menu a:first-letter {
    text-decoration: underline;
}
.notepad .container {

    padding-left: 10px;
    background-color: white;
    overflow:auto;
    border: 1px;
    position: relative;
    height: calc(93%);
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}
.notepad .content {

    height: calc(100% - 24px);
}
.notepad .content .content-section {
    opacity: 0;
    will-change: opacity, z-index;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.notepad .menu-input, .notepad .menu-label {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: calc(20% - 2px);
    height: 22px;
}
.bouton{
    text-decoration-line: none;
    color: black;
}
.notepad .menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1px;
    z-index: 4;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.notepad .menu-input {
    opacity: 0;
    display: block;
    z-index: 3;
    margin: 0;
}
.notepad .menu-input:checked + label {
    background-color: white;
    background-image: linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0), linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
    box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
}

.usage{

    background-color: white;
    font-size: 1.5em;
    line-height: 20px;

}
strong{
    font-weight:bold;}

.inconr{
    top: 0px;
    right: 0px;
    position: absolute;
    margin-right: 10px;
}
.inconr > div > a > img{
    width: 80px;;
}







.achievement {

    position: relative;
    display:none;
    z-index: 30;
    resize: both;
    width: 100%;
    height: 100%;
    max-width: 740px;
    max-height: 620px;
    padding: 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}
.achievement .bar:hover{
    cursor: move;
}
.achievement .inner {
    width: 100%;
    height: 100%;
    box-shadow: inset -1px -1px 0 0 #a099a1, inset 1px 1px 0 0 white;
    background: #cac6cb;
    padding: 3px;
}
.achievement  .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.achievement.bar h1 {
    padding-left: 5px;;
    font-weight: 700;
}
.achievement .bar .buttons {
    display: -webkit-box;
    display: flex;
}
.achievement .bar .buttons a {
    color: #464147;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    border: 0;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.achievement .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.achievement .bar .buttons a.close:hover{
    background-color: darkgray;
    cursor: pointer;
}
.achievement .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}
.achievement .bar .buttons a.maximize:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border: 1px solid #464147;
    border-top-width: 2px;
}
.achievement .bar .buttons a.close:before, .achievement .bar .buttons a.close:after {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -1px;
    width: 2px;
    height: 8px;
    background: #464147;
}
.achievement .bar .buttons a.close:before {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.achievement .bar .buttons a.close:after {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.achievement .menu ul {
    display: flex;
}
.achievement .menu a {
    display: block;
    padding: 2px 6px 5px;
    color: #464147;
    text-decoration: none;
}
.achievement .menu a:first-letter {
    text-decoration: underline;
}
.achievement .container {
    color: white;
    padding-left: 10px;
    background-color: black;
    overflow:scroll;
    border: 1px;
    position: relative;
    height: calc(93%);
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}
.notepad .content {

    height: calc(100% - 24px);
}
.notepad .content .content-section {
    opacity: 0;
    will-change: opacity, z-index;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.notepad .menu-input, .notepad .menu-label {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: calc(20% - 2px);
    height: 22px;
}
.bouton{
    text-decoration-line: none;
    color: black;
}
.notepad .menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1px;
    z-index: 4;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.notepad .menu-input {
    opacity: 0;
    display: block;
    z-index: 3;
    margin: 0;
}
.notepad .menu-input:checked + label {
    background-color: white;
    background-image: linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0), linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
    box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
}

.titrea{
    text-align: center;
}

.skills{
    padding: 50px;
    font-family: 'VT323', monospace;
}
.skills >h2{
    font-weight: 500;
    font-size: 1.2em;
}

#slideshowoneContainer {
    max-width: 870px;
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 0;
    z-index: 1000;
}
#slideshowone {
    padding: 0;
    position: relative;
}
#slideshowone > img {
    margin-top: 5px;
    padding: 0;
    border: 0;
    width: 100%;
    max-height: 440px;
    position: absolute;
    z-index: 1001;
}
#terminal{
    display: none;
}
#nav {
    display: block;
    width: 100%;
    background: #ff0000;
    list-style-type: none;
    z-index: 1002;
}
#nav >  li > a {
    display: block;
    width: 35px;
    height: 74px;
    text-indent: -9999px;
    outline: none;
    z-index: 1003;
}

#prev > a {
    width: 35px;
    height: 74px;
    position: absolute;
    top: 150px;
    z-index: 1005;
    font-family: verdana;
    font-size: 50px;
    left: 25px;
}
#prev > a :hover {
    z-index:1005;
    color: #f28;
}

#next > a {
    width: 35px;
    height: 74px;
    position: absolute;
    top: 150px;
    z-index: 1005;
    font-family: verdana;
    font-size: 50px;
    right: 25px;
}
#next > a:hover {
    z-index:1005;
    color: #f28;
}

#slideshowone > * {
    display: none;
}

#slideshowone > *.first {
    display: block;
}

/**
* PORTFOLIO
*/
.porfolio {
    position: absolute;
    display:none;
    z-index: 30;
    resize: both;
    overflow: hidden;
    width: 55%;
    height: 55%;
    max-width: 1440px;
    max-height: 1400px;
    padding: 1px;
    top:15%;
    left: 10%;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 #dedcde;
}
.porfolio .bar:hover{
    cursor: move;
}
.wesh {
    width: 100%;
    max-width: 1440px;
    height: 100%;
    max-height: 1920px;
    padding: 1px;
}
.porfolio .inner {
    width: 100%;
    height: 100%;
    box-shadow: inset -1px -1px 0 0 #a099a1, inset 1px 1px 0 0 white;
    background: #cac6cb;
    padding: 3px;
}
.porfolio  .bar {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    height: 18px;
    padding: 2px;
    background: linear-gradient(to right, #00007d,#00007d, #558cfe);
    color: white;
}
.porfolio .bar h1 {
    padding-left: 5px;;
    font-weight: 700;
}
.porfolio .bar .buttons {
    display: -webkit-box;
    display: flex;
}
.porfolio .bar .buttons a {
    color: #464147;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    padding-bottom: 10px;
    border: 0;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.porfolio .bar .buttons a.smallonemize:hover{
    background-color: darkgray;
    cursor: pointer;
}
.porfolio .bar .buttons a.close:hover{
    background-color: darkgray;
    cursor: pointer;
}
.porfolio .bar .buttons a.smallonemize:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #464147;
}
.porfolio .bar .buttons a.maximize:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    opacity: 0.3;
    width: 8px;
    height: 8px;
    border: 1px solid #464147;
    border-top-width: 2px;
}
.porfolio .bar .buttons a.close:before, .porfolio .bar .buttons a.close:after {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -1px;
    width: 2px;
    height: 8px;
    background: #464147;
}
.porfolio .bar .buttons a.close:before {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.porfolio .bar .buttons a.close:after {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.porfolio .menu ul {
    display: flex;
}
.porfolio .menu a {
    display: block;
    padding: 6px 6px 5px;
    color: #464147;
    text-decoration: none;
}
.porfolio .menu a:first-letter {
    text-decoration: underline;
}
.porfolio .container {
    border: 1px;
    position: relative;
    height: calc(95%);
}
.porfolio .content {
    height: calc(100% - 24px);
}
.contour{
    border: 110px;
    position: relative;
    border-color: aquamarine;
    width: 55%;
    height: 55%;
    max-width: 1440px;
    max-height: 1400px;

}
.porfolio .content .content-section {
    opacity: 0;
    will-change: opacity, z-index;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.porfolio.menu-input, .fenetrecp .menu-label {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: calc(20% - 2px);
    height: 22px;
}
.porfolio .menu-input:nth-of-type(1), .fenetrecp .menu-label:nth-of-type(1) {
    left: 0;
}
.porfolio .menu-input:nth-of-type(2), .fenetrecp .menu-label:nth-of-type(2) {
    left: calc(20% + 0.5px);
}
.porfolio .menu-input:nth-of-type(3), .fenetrecp .menu-label:nth-of-type(3) {
    left: calc(40% + 1px);
}
.porfolio .menu-input:nth-of-type(4), .fenetrecp .menu-label:nth-of-type(4) {
    left: calc(60% + 1.5px);
}
.porfolio .menu-input:nth-of-type(5), .fenetrecp .menu-label:nth-of-type(5) {
    left: calc(80% + 2px);
}
.bouton{
    text-decoration-line: none;
    color: black;
}
.porfolio .menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1px;
    z-index: 4;
    background: #cac6cb;
    -webkit-box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
    box-shadow: inset -1px -1px 0 0 #464147, inset 1px 1px 0 0 white, inset -2px -2px 0 0 #a099a1, inset 2px 2px 0 0 #dedcde;
}
.porfolio .menu-input {
    opacity: 0;
    display: block;
    z-index: 3;
    margin: 0;
}
.porfolio .menu-input:checked + label {
    background-color: white;
    background-image: linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0), linear-gradient(45deg, #efeef0 25%, transparent 25%, transparent 75%, #efeef0 75%, #efeef0);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    -webkit-box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
    box-shadow: inset -1px -1px 0 0 white, inset 1px 1px 0 0 #464147, inset -2px -2px 0 0 #dedcde, inset 2px 2px 0 0 #cac6cb;
}
#beta_1{
    padding-left: 5px;
    padding-top: 15px;
    color: white;
    text-transform: uppercase;
    font-family: 'VT323', monospace;
    line-height: 1.5em;
    color: white;
    font-weight: 500;
    font-size: 1.2em;
}

/* ------------------ Contact form ------------------- */
.name{
    float: left;
    font-size: 1.1em;
}
.namet{
    -webkit-box-shadow: inset -1px -1px 0 0 #dedcde, inset 1px 1px 0 0 white, inset 2px 2px 0 0 #dedcde;
    height: 2em;
    width: 100%;
    float: right;
}
.city{
    float: left;
    font-size: 1.1em;}
.cityt{
    -webkit-box-shadow: inset -1px -1px 0 0 #dedcde, inset 1px 1px 0 0 white, inset 2px 2px 0 0 #dedcde;
    height: 2em;
    width:100%;
    float: right;
}

.email{
    font-size: 1.1em;
    float: left;
}
.emailt{  
    -webkit-box-shadow: inset -1px -1px 0 0 #dedcde, inset 1px 1px 0 0 white, inset 2px 2px 0 0 #dedcde;
    height: 2em;
    width: 100%;
    float: right;

}
.msg{ 
    font-size: 1.1em;
    float: left;
    clear: both;
}
.msgt{
    resize: none;
    -webkit-box-shadow: inset -1px -1px 0 0 #dedcde, inset 1px 1px 0 0 white, inset 2px 2px 0 0 #dedcde;
    float: right;
    width: 100%;
}
.smail{
    float: right;
    margin-top: 5px;
    margin-left: 10px;
    background-color: transparent;
    font-weight: bold;
    cursor:pointer;
    width: 80px;
    height: 25px; 
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
.restart{
    float: left;
    margin-top: 5px;
    margin-left: 0px;
    background-color: transparent;
    font-weight: bold;
    cursor:pointer;
    width: 80px;
    height: 25px; 
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}

form{
    line-height: 2.5em;
    margin: auto;
    padding: 5px;;
}

.boutonnn{
    background-color: transparent;
    border-color: grey;
    border-width: 1px;
    color: white;
    font-weight: 600;
    font-size: 1.1em;
}

#github{
    opacity: 0.75;
    -webkit-box-shadow: inset -1px -2px 0 0 white, inset 1px 1px 0 0, inset -1px 1px 0 0 white, inset 1px 0px 0 0 #dedcde;
    float: right;
    margin-right: 1px;
    padding: 3px;
    padding-bottom: 6px;
    margin-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
    float: right;
}
#github > a > img{
    width: 82px;
}

.tutoriel{
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    position: absolute;
    z-index: 101;
    width: 100vw;
    height: 100vh;
    background-color: rgba(30, 26, 30, 0.65);
}

.croix{
    float: right;
    width: 25px;
    margin: 15px;
}
.git{
    position: absolute;
    bottom: 0;
    right: 260px;
    float: right;
}
.git > img {
    width: 370px;
}
.social{
    position: absolute;
    bottom: 50px;
    left:25px;
    float: left;
}
.social > img {
    width: 373px;
}
.cvp{
    position: absolute;
    top: 204px;
    left: 33px;
    float: left;
}
.cvp > img {
    height: 60px;
    width: auto;
}
.ach{
    position: absolute;
    top: 114px;
    left: 173px;
    float: left;
}
.ach > img {
    height: 60px;
    width: auto;
}
.email{
    top: 334px;
    left: 123px;
    float: left;
}
.email > img {
    height: 69px;
    width: auto;
}



.error-error > img {
    height: 50px;
    width: auto;
    padding-left: 10px;
    margin-left: 0px;
    margin-top: 4px;
}
.errmsg > p{
    padding-top: 8px;
    padding-bottom: 7px;

}
.error-icon{
    padding-top: 4px;
    width: auto;
    height: 14px;
}
.error-message{
    display: none;
    width:460px;
    height:125px;
    background: #BABFC3;
    overflow:hidden;
    border: outset 2px;
    border-bottom-color:#A8A9A8;
    border-right-color:#A8A9A8;
    border-top-color:#EAEAEA;
    border-left-color:#EAEAEA;
    position:absolute;
    top:25%;
    left:20%;
    z-index:9999;
}
.ctrls{
    opacity: 0;
    z-index:999999;
    position:absolute;
    border: outset 2px;
    border-bottom-color:#A8A9A8;
    border-right-color:#A8A9A8;
    border-top-color:#EAEAEA;
    border-left-color:#EAEAEA;
    width:300px;
    padding:10px;
    background: #BABFC3;
    font-size:.9em;
}
.error-title{
    background:#0000A6;
    color:#fff;
    overflow:hidden;
    height:20px;
    font-size:12px;
    padding: 2px 4px;
    padding-top: 1px;
}
.error-title{
    margin:0px 2px;
    position:relative;
    top:-2px;
}
.error-close{
    margin-top: 3px;
    background: #BABFC3;
    padding: 0px 3px;
    padding-bottom: 3px;
    padding-top: 1px;
    padding-left: 2px;
    width: 14px;
    height: 14px;
    color: dimgrey;
    float: right;
    font-weight: bold;
    text-align: center;
    position: relative;
    top: 0px!important;
    border: outset 1px;
    right: -2px;
    border-bottom-color:#A8A9A8;
    border-right-color:#A8A9A8;
    border-top-color:#EAEAEA;
    border-left-color:#EAEAEA;
    cursor:default;
}
.error-content .error-error{
    position:relative;
    float:left;
    top:50%;
}
.errmsg{
    margin-top: 17px;
    position: relative;
    font-size: 12px;
    font-weight: 100;
    width: 300px;
    left: 8px;
    margin-left: 40px;
}
.error-button{
    font-family:inherit;
    border: outset 2px;
    width: 78px;
    height: 26px;
    padding: 5px;
    text-align: center;
    font-size: 13px;
    position: relative;
    left: 368px;
    margin-bottom: 8px;
    top: -62px;
}
.error-button-a{
    top: -70px;
    border-bottom-color: #A8A9A8;
    border-right-color: #A8A9A8;
    border-top-color: #EAEAEA;
    border-left-color: #EAEAEA;
}
.error-button-b{
    top: -16px;
    left: 65px;
    border-bottom-color: #A8A9A8;
    border-right-color: #A8A9A8;
    border-top-color: #EAEAEA;
    border-left-color: #EAEAEA;
}
.ctrls .error-title{
    position: relative;
    top: -9px;
    left: -10px;
    width: 103.3%;
}

.bsod{
    display: none;
    position: absolute;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
}
.bsod > iframe{
    pointer-events: none;
    border: none;
    height: 100vh;
    width: 100vw;
}








#screen{
    display: none;
}
#restart, #restart .startup {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: none;
}


#black {
    background: #000;
    z-index: 10;
}

#restart {
    background: #000;
    z-index: 200;
}
#restart .starting {
    color: #fff;
    font-family: monospace;
    font-size: 16px;
    padding: 2px;
}
#restart .startup {
    opacity: 0;
}
#restart .clouds {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#restart .logo {
    position: absolute;
    left: 160px;
    top: 72px;
    width: 320px;
    height: 280px;
}
#restart sup {
    font-size: 8px;
}
#restart h2, #restart h3 {
    font-family: Arial, sans-serif;
}
#restart h2 {
    position: absolute;
    font-size: 42px;
    left: 108px;
    bottom: 80px;
    color: white;
    letter-spacing: 1.2px;
    line-height: 1ex;
    z-index: 1;
}
#restart h2 em {
    display: block;
    text-indent: 22px;
    font-size: 74px;
    font-weight: 900;
    color: #000;
    letter-spacing: -6px;
    line-height: 1ex;
}
#restart h2 sup {
    vertical-align: 42px;
}
#restart h2 strong {
    display: inline-block;
    -webkit-transform: scaleX(1.2);
    transform: scaleX(1.2);
    margin-left: -10px;
    color: #fff;
    font-weight: normal;
}
#restart h3 {
    position: absolute;
    right: 0;
    font-style: italic;
    font-weight: bold;
    font-size: 38px;
    line-height: 40px;
    z-index: 1;
    letter-spacing: -2px;
    margin-right: .5ex;
}
#restart h3 sup {
    margin-left: 4px;
}
#restart .bar {
    position: absolute;
    overflow: hidden;
    bottom: 0;
    width: 200%;
    height: 14px;
    background: linear-gradient(90deg, #47b, #bcd 19%, #bcd 31%, #47b 50%, #bcd 69%, #bcd 81%, #47b);
    -webkit-animation: barz 2s linear infinite;
    animation: barz 2s linear infinite;
}

#restart:target {
    -webkit-animation: booting .5s 7s 12 forwards;
    animation: booting .5s 7s 12 forwards;
}
#restart:target header {
    -webkit-animation: booting .5s 12s 12 forwards;
    animation: booting .5s 13s 12 forwards;
}
#restart:target .startup {
    -webkit-animation: startup-logo 7s linear 12 forwards;
    animation: startup-logo 7s linear 12 forwards;
}

@-webkit-keyframes booting {
    from {
        -webkit-transform: none;
        transform: none;
    }
    to {
        -webkit-transform: scale(0.0001);
        transform: scale(0.0001);
    }
}

@keyframes booting {
    from {
        -webkit-transform: none;
        transform: none;
    }
    to {
        -webkit-transform: scale(0.0001);
        transform: scale(0.0001);
    }
}
@-webkit-keyframes startup-logo {
    0%, 22% {
        opacity: 0;
    }
    25%, 90% {
        opacity: 1;
    }
    96%, 100% {
        opacity: 0;
    }
}
@keyframes startup-logo {
    0%, 22% {
        opacity: 0;
    }
    25%, 90% {
        opacity: 1;
    }
    96%, 100% {
        opacity: 0;
    }
}
@-webkit-keyframes barz {
    from {
        margin-left: 0;
    }
    to {
        margin-left: -100%;
    }
}
@keyframes barz {
    from {
        margin-left: 0;
    }
    to {
        margin-left: -100%;
    }
}
#fore-notepad:checked ~ #taskbar #task-notepad, #fore-ie:checked ~ #taskbar #task-ie, #fore-mine:checked ~ #taskbar #task-mine {
    background: rgba(255, 255, 255, 0.67);
    font-weight: bold;
}
i.clouds {
    background: url("/images/nuages.svg");
    background-repeat: no-repeat;
    background-size:cover;
}

i.logo {
    background: url("/images/loadinglogo.png");
    background-repeat: no-repeat;
    background-size: cover; 
    height: 100%;
    width: 100%;

}
#open-notepad:checked ~ #app-notepad, #open-ie:checked ~ #app-ie, #open-mine:checked ~ #app-mine {
    visibility: visible;
}

#open-notepad:checked ~ #taskbar #task-notepad, #open-ie:checked ~ #taskbar #task-ie, #open-mine:checked ~ #taskbar #task-mine {
    display: flex;
}

#fore-notepad:checked ~ #app-notepad, #fore-ie:checked ~ #app-ie, #fore-mine:checked ~ #app-mine {
    z-index: 3;
}
#fore-notepad:checked ~ #app-notepad h2, #fore-ie:checked ~ #app-ie h2, #fore-mine:checked ~ #app-mine h2 {
    color: #fff;
    background: #000080;
}

#task-notepad {
    display: none;
}

#task-ie {
    display: none;
}

#task-mine {
    display: none;
}

i.sm, i.md, i.lg {
    display: inline-block;
    pointer-events: none;
    text-align: center;
}

i.sm {
    width: 16px;
    height: 16px;
    line-height: 15px;
}

i.md {
    width: 24px;
    height: 24px;
    position: relative;
}
i.md::before, i.md::after {
    content: '';
    position: absolute;
}

i.lg {
    width: 32px;
    height: 32px;
}

.testt{
    height: 100%;
    width: 100%;
    position: absolute
}