/*
        JS:    */
.myWidthMax     {width:100%;max-height:100%}
.myMax600px     {max-width:600px}
.myWidth        {width:600px}
.myDisplayFlex  {display:flex}
.myDisplayNone  {display:none}
.myBgClock      {background:linear-gradient(to right,rgba(0, 0, 0, 0), rgba(51, 51, 51, .5), rgba(51, 51, 51, .8))}


 /*
        PANEL COLORS:  */
.color3         {color:rgb(221, 96, 159)}
.color4         {color:rgb(158, 146, 228)}
.color5         {color:rgb(19, 164, 90)}
.color6         {color:rgb(107, 208, 24)}


/*
        CLASSIC COLORS: */
.color1         {color:rgb(42, 42, 42)}
.color2         {color:rgb(242, 242, 242)}
.blueColor      {color:rgb(0, 0, 255)}
.greenColor     {color:rgb(0, 255, 0)}
.redColor       {color:rgb(255, 0, 0)}


/*
BGCOLORS:      */
.myBgTrsprnt    {background-color:transparent}
.bgColor1       {background-color:rgb(42, 42, 42)}
.bgColor1_98    {background-color:rgb(42, 42, 42, 0.98)}
.bgColor1_80    {background-color:rgb(42, 42, 42, 0.9)}
.bgColor1_15    {background-color:rgb(42, 42, 42, 0.15)}
.bgColor2       {background-color:rgb(242, 242, 242)}
.bgColor2_95    {background-color:rgb(242, 242, 242, 0.95)}
.bgColor3       {background-color:rgb(221, 96, 159)}
.bgColor4       {background-color:rgb(158, 146, 228)}
.bgColor5       {background-color:rgb(19, 164, 90)}
.bgColor6       {background-color:rgb(107, 208, 24)}


/*
SEPARATOR:      */
.separation {
        margin:6rem 0;
        color:white;
        width:100%;
        border:none;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center
}

.separation p {
        font-size:1.5rem;
        text-align:center
}

.separation hr {
        border:none;
        width:36%;
        border-bottom:solid 3px;
        margin:0 2%
}


/*
        BALISES:        */ 
html,
body,
header, main, footer,
nav,
address,
section, div, article,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
p,
img,
span,
a,
i,
pre,
code {
        padding:0;
        margin:0;
        border:0;
        line-height:1rem;
        font-size:1rem;
        font:inherit;
        font-family:'Open Sans';
        vertical-align:baseline
}

ol, ul {list-style:none}

a {text-decoration:none}
a, a:focus, a:hover {color:rgb(221, 96, 159)}

.material-icons {cursor:pointer}


/*
        BODY:   */
body {
        margin-bottom:2rem;
        font-family:'Open Sans'
}

nav,
main,
#message>div{background-color:rgb(42, 42, 42, 0.8)}

/*
        HEADER */
header {
        padding:9rem 0 0 0;
        transition:1.5s;
        display:flex;
        flex-flow:column nowrap;
        justify-content:flex-end;
        align-items:stretch;
        background-attachment:fixed;
        background-position:center center;
        background-repeat:no-repeat;
        object-fit: scale-down;
        background-size:cover
}
nav {transition:1.5s}

nav>div>div:nth-child(3)>div:nth-child(2) {
        height:7rem;
        align-items:flex-end
}
nav>div>div:nth-child(3) {
        display: flex;
        align-items:flex-end
}


/* BLOCK CONTENT HEADER */
header>section {
        display:flex;
        flex-flow:column wrap
}

/* BLOCK SOCIAL NETWORKS */
.socialNetworks {
        display:flex;
        flex-flow:row wrap;
        justify-content:center;
        align-items:center
}

header .socialNetworks{
        justify-content:end
}

.socialNetworks>li {
        background-color:rgb(255, 255, 255, 0.2);
        text-align:center;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        height:64px;
        width:64px
}

.socialNetworks span {
        display:none
}

.socialNetworks>li>a>svg {
        fill:rgb(221, 96, 159) !important;
        width:48px;
        height:48px
}

.socialNetworks>li>a>svg:hover {
        fill:rgb(19, 164, 90) !important;
        width:64px;
        height:64px
}


/*
        FOOTER */
footer {
        vertical-align: middle;
        display:flex;
        flex-flow:row wrap;
        justify-content:center;
        align-items:center;
        margin:.5rem 0 0 0
}

/* 
        TITLE */
.container-title {
        display:flex;
        flex-direction:column;
        align-items:center
}

.container-title>p {
        font-style:italic;
        color:whitesmoke
}

h1 pre {
        padding:0.5rem
}

h1 pre {
        background-color:rgba(255, 255, 255, 0.05)
}

h1 {
        word-break:normal;
        flex:7;
        display:flex;
        flex-flow:row nowrap;
        align-items:center;
        animation:bounce;
        animation-duration:2s
}

h1 a {
        word-break:keep-all;
        font-weight:bold;
        text-decoration:none
}

h1>a:last-child {
        color: antiquewhite
}

h1>a>pre>code {font-family:monospace}
h1>a>pre>code:hover {color:rgb(19, 164, 90)}

h1>a>pre {
        white-space:pre;
        line-height:0.9rem;
        font-size:0.9rem;
        overflow:hidden
}

h1>i {
        color:rgb(221, 96, 159);
        padding:0 1rem 0 0.5rem
}

.tr1 {display:flex}
.tr2 {display:none}

/*
        MULTICOLOR */
.rainbow {
        font-family:monospace
}

.rainbow_text_animated {
        background: linear-gradient(to right, rgb(221, 96, 159), rgb(158, 146, 228), rgb(19, 164, 90), rgb(107, 208, 24));
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        animation:rainbow_animation 4s ease-in-out infinite;
        background-size:400% 100%
}


@keyframes rainbow_animation {
        0%, 100% {background-position: 0 0}

        50% {background-position: 100% 0}
}

@media (min-width:700px) {
        .tr1 {display:none}
        .tr2 {display:flex} 
}

@media (max-width:700px) {
        .separation {flex-direction:column}

        .separation hr {
                width:98%;
                margin:0 2%
        }

        footer  {font-size:1.1rem}
}

/*
DEBUG */
/* header {
        background-color: rgba(0, 255, 0, 0.75)
}
main {
        background-color: rgba(255, 255, 0, 0.75)
}

footer {
        background-color: rgba(255, 0, 0, 0.75)
} */