body{
    margin: 0;
    padding: 0;
}

div.construct{
    background-color: #ffcc00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: rgba(13, 15, 51, 0.5) 0 .2em 1em;
}

div.construct > h1{
    font-size: 2em;
    color: black;
    font-family: "Couture", sans-serif;
    margin: .5em 0 0 0;
}

p.c-explain{
    font-family: Tenorite,sans-serif;
    text-align: center;
    color: black;
}

p.cross{
    position: absolute;
    top: 0;
    right: 1em;
    font-family: "Couture", sans-serif;
    cursor: pointer;
    color: black;
}

.pop-up{
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0),#0d0f33);
    z-index: 10;
    display: flex;
    justify-content: center;
}

.pop-up .slogan{
    position: relative;
    bottom: -80%;
    font-family: "Tenorite Bold",sans-serif;
    font-weight: normal;
    text-align: center;
    font-size: 1.5em;
    color: #f7f7ff;
}

.align-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.discover-button{
    position: relative;
    width: 7em;
    height: 2.5em;
    overflow: hidden;
    border: 2px solid #f7f7ff;
    font-family: "Tenorite Bold", sans-serif;
    transition: 0.5s;
    border-radius: .75em;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.discover-button span{
    font-weight: normal;
    border: none;
}
.discover-button button{
    width: 101%;
    height: 100%;
    font-family: "Tenorite Bold", sans-serif;
    font-size: 1em;
    background: #f7f7ff;
    -webkit-mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
    mask: url("https://raw.githubusercontent.com/pizza3/asset/master/natureSmaller.png");
    -webkit-mask-size: 7100% 100%;
    mask-size: 7100% 100%;
    border: none;
    color: #5d5e76;
    cursor: pointer;
    -webkit-animation: ani2 0.7s steps(70) forwards;
    animation: ani2 0.7s steps(70) forwards;
}
.discover-button button:hover{
    -webkit-animation: ani 0.7s steps(70) forwards;
    animation: ani 0.7s steps(70) forwards;
}
@-webkit-keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}
@keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}
@-webkit-keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}
@keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}
.mask-def{
    position: absolute;
    color: #f7f7ff;
    width: 101%;
    font-family: "Tenorite Bold", sans-serif;
    font-size: 1em;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

section article h1{
    margin: 1.2vw 0 .5vw 0;
    font-weight: normal;
    font-size: 2vw;
    font-family: "Tenorite Bold",sans-serif;
    color: #0D0F33;
}

section article p{
    margin: 0;
    color: #0D0F33;
    font-size: 1.25vw;
}

i.bold{
    font-family: "Tenorite Bold",sans-serif;
    font-style: normal;
}

section .big-title{
    font-family: "Stretch Pro", sans-serif;
    font-weight: normal;
    font-size: 3.5vw;
    color: #0D0F33;
    letter-spacing: 0;
    margin: 0 0 .5vw 0;
}

.intro{
    margin-bottom: 1vw;
}

section.bio{
    background-color: #eaeaf0;
    border-radius: 4vw;
    border: 4px solid #f7f7ff;
    box-shadow: rgba(13, 15, 51, 0.5) 0 .2em 1em;
}

section.portfolio{
    background-image: url("../media/fond_da_lignes.svg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4vw;
    border: 4px solid #f7f7ff;
    box-shadow: rgba(13, 15, 51, 0.5) 0 .2em 1em;
    padding-bottom: 0;
}

.portfolio article{
    background-color: rgba(247, 247, 255, 0.8);
    border-radius: 2vw;
    border: 2px solid #f7f7ff;
    padding: 0 2em 2em 2em;
    margin: 2vw 0;
}

.p-line{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container{
    height: 16vw;
    width: 16vw;
    border: 2px solid #f7f7ff;
    border-radius: 2vw;
    background-color: #eaeaf0;
    margin: 0 1vw;
    overflow: hidden;
}

.p-card{
    z-index: 2;
    position: relative;
    top: 0;
    height: 16vw;
    width: 16vw;
    border-radius: 8vw 8vw 0 0;
    background-color: #ff4d66;
    transform: translateY(105%);
    transition: ease-in-out .4s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container:hover .p-card{
    transform: translateY(0%);
    border-radius: 2vw;
}

.p-card h2{
    margin: 0 0 .25vw 0;
    padding-top: 1vw;
    font-size: 1.25vw;
    font-weight: normal;
    font-family: "Tenorite Bold",sans-serif;
}

.p-card p{
    padding: 0 1vw 1vw 1vw;
    text-align: center;
    font-size: .75vw;
}

.p-card img{
    margin: -.5vw 0 0 0;
    padding: 0;
    object-fit: contain;
}

.sig-6{
    background-image: url("../media/cypher.svg");
    background-size: 130%;
}

.sigs, .graph{
    background-repeat: no-repeat;
    background-position: center;
}

.graph-1{
    background-image: url("../media/logo_noir.svg");
    background-size: 70%;
}
.graph-2{
    background-image: url("../media/MaxAttack.png");
    background-size: 90%;
}
.graph-3{
    background-image: url("../media/logo_bliiink.png");
    background-size: 90%;
}
.sig-1{
    background-image: url("../media/volt.svg");
    background-size: 140%;
}
.sig-2{
    background-image: url("../media/kyxsan.svg");
    background-size: 120%;
}
.sig-3{
    background-image: url("../media/Lucky.svg");
    background-size: 150%;
}
.sig-4{
    background-image: url("../media/Grim.svg");
    background-size: 80%;
}
.sig-5{
    background-image: url("../media/Regali.svg");
    background-size: 90%;
}
.sig-6{
    background-image: url("../media/cypher.svg");
    background-size: 130%;
}




.container-l{
    height: 19.125vw;
    width: 34vw;
    border: 2px solid #f7f7ff;
    border-radius: 2vw;
    background-color: #eaeaf0;
    margin: 0 1vw;
    overflow: hidden;
}

.p-card-l{
    z-index: 2;
    position: relative;
    top: 0;
    height: 19.125vw;
    width: 34vw;
    border-radius: 8vw 8vw 0 0;
    background-color: #ff4d66;
    transform: translateY(105%);
    transition: ease-in-out .4s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-l:hover .p-card-l{
    transform: translateY(0%);
    border-radius: 2vw;
}

.p-card-l h2{
    margin: 0;
    padding-top: 1vw;
}

.p-card-l p{
    padding: 1vw;
    text-align: center;
}

.justify{
    text-align: justify;
}

.more-button{
    z-index: 2;
    position: relative;
    transform: translateX(1vw);
    padding: 1vw;
}

.more-bubble{
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-1vw);
    background-color: #5d5e76;
    height: 1vw;
    width: 1vw;
    padding: .5vw;
    text-align: right;
    border-radius: 1vw;
}