/* ===============================================================================
=================================   SCREEN   =====================================
==================================================================================*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Amatic SC', cursive;
}

html, body, #main{
    width: 390vw;
    height: 570vh;
    font-size: 1.5em;
}

/* GESTION DES SCOLLBARS - INVISIBLES SAUF DANS CONTENU */
/* Google Chrome */
body::-webkit-scrollbar { 
    display: none; 
}
/* Firefox */
@-moz-document url-prefix(){
    body {
     overflow: hidden;
    }
}
/* IE */
body{
  -ms-overflow-style: none;
}
#contenu{
  -ms-overflow-style: auto;
}

/*EFFETS*/

.hidden{
    display: none;
}


/* ===============================================================================
===========================   ORDER AND  SIZE   ==================================
==================================================================================*/

/*DIMENSIONS & DISPLAY du MAIN, qui contient tous les divs*/
#main{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-image: url("../img/bg_paper.png");
}


/*DIMENSIONS des différentes classes de DIVS */
.section{
    width: 100vw;
    height: 100vh;
    background-color: black;
    color: blue;
}
.empty{
    width: 145vw;
    height: 100vh;
}
.languette_long{
    width: 390vw;
    height: 10vh;
}
.languette_petit{
    width: 10vw;
    height: 100vh;
}
.languettes_transition{
    width: 145vw;
    height: 50vh;
}
.vertical_transition{
    width: 100vw;
    height: 50vh;
    background-color: black;
}
.lateral_transition{
    width: 35vw;
    height: 100vh;
    background-color: black;
}


/*      ORDER .section*/

#main>div:nth-of-type(1){ /*home*/
    order: 11;
}
 #main>div:nth-of-type(2){ /*news*/
    order: 13;
}
 #main>div:nth-of-type(3){ /*portfolio*/
    order: 9;
}
 #main>div:nth-of-type(4){ /*profile*/
    order: 21;
}
 #main>div:nth-of-type(5){ /*timeline*/
    order: 29;
}
 #main>div:nth-of-type(6){ /*webdev*/
    order: 19;
}
 #main>div:nth-of-type(7){ /*miscellaneous*/
    order: 23;
}
 #main>div:nth-of-type(8){ /*contact*/
    order: 3;
}

/*ORDER .empty */
#main>div:nth-of-type(9){
    order: 2;
}
#main>div:nth-of-type(10){
    order: 4;
}
#main>div:nth-of-type(11){
    order: 28;
}
#main>div:nth-of-type(12){
    order: 30;
}
/*ORDER .lateral_transition*/
#main>div:nth-of-type(13){ /* portfolio to home */
    order:10;
    background-image: url("../img/transitions/transition_portfolio.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#main>div:nth-of-type(14){ /* home to news */
    order:12;
    background-image: url("../img/transitions/transition_news.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#main>div:nth-of-type(15){ /* webdev to profile */
    order:20;
    background-image: url("../img/transitions/transition_profile_to_webdev.png");
    background-size: 100vw 110vh;
    background-repeat: no-repeat;
}
#main>div:nth-of-type(16){ /* profile to miscellaneous */
    order:22;
    background-image: url("../img/transitions/transition_profile_to_divers.png");
    background-size: 100vw 65vh;
    background-repeat: no-repeat;
}

/*ORDER .vertical_transition */
#main>div:nth-of-type(17){ /* contact to home */
    order: 6;
    background-image: url("../img/transitions/transition_blacktogreen.png");
    background-size: 100% 100%;
}
#main>div:nth-of-type(18){ /* home to profile */
    order: 16;
    background-image: url("../img/transitions/transition_towater.png");
    background-size: 100% 100%;
}
#main>div:nth-of-type(19){ /* profile to timeline */
    order: 26;
    background-image: url("../img/transitions/profileBlue.png");
    background-size: 100% 100%;
    background-position: 0 -2vh;
    background-repeat: no-repeat;
}

/*ORDER .languettes_transition*/
#main>div:nth-of-type(20){
    order: 5;
    background-image: url("../img/transitions/crayon_haut_gauche.png");
    background-size: 35vw 50vh;
    background-position: right;
    background-repeat: no-repeat;
    
}
#main>div:nth-of-type(21){
    order: 7;
    background-image: url("../img/transitions/crayon_haut_droite.png");
    background-size: 35vw 50vh;
    background-position: left;
    background-repeat: no-repeat;
}
#main>div:nth-of-type(22){
    order: 15;
    background-image: url("../img/transitions/crayon_bas_gauche.png");
    background-size: 35vw 50vh;
    background-position: right;
    background-repeat: no-repeat;
    
}
#main>div:nth-of-type(23){
    order: 17;
    background-image: url("../img/transitions/crayon_bas_droite.png");
    background-size: 35vw 50vh;
    background-position: left;
    background-repeat: no-repeat;
}
#main>div:nth-of-type(24){
    order: 25;
}
#main>div:nth-of-type(25){
    order: 27;
}

/*ORDER .languette_petit*/
#main>div:nth-of-type(26){
    order: 8;
}
#main>div:nth-of-type(27){
    order: 14;
}
#main>div:nth-of-type(28){
    order: 18;
}
#main>div:nth-of-type(29){
    order: 24;
}

/*ORDER .languette_long*/
#main>div:nth-of-type(30){
    order: 1;
}
#main>div:nth-of-type(31){
    order: 31;
}
/* ===============================================================================
=================================  HAMBURGER MENU ================================
==================================================================================*/
/*MENU HAMBURGER*/

#hamburger{
    z-index: 1000;
    position: fixed;
    top: 3vw;
    right: 3vw;
    width: 10vw;
    max-width: 50px;
    height: 10vw;
    max-height: 50px;
    background-color:forestgreen;
    border: inset 5px darkred;
    border-radius: 5px;
    background-image: url("../img/icons/hamburger.png");
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
}

body>nav, #sous_menu{
    z-index: 10;
    position: fixed;
    top: 30px;
    right: 30px;
    background-color: floralwhite;
    padding: 10px;
    border: 3px dotted forestgreen;
}

#sous_menu{
    position: relative;
    right: 140px;
    top: -75px;
    width: 110px;
}

body>nav li{
    display: block;
    width: 100px;
    height: 80px;
    margin-bottom: 10px;
    list-style-type: none;
}

body>nav a{
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    display: block;
    width: 100%;
    height:100%;
}

body>nav>ul>li:nth-child(1){
    background-image: url('../img/icons/home_icon_mini.png');
    background-size:auto;
    background-repeat: no-repeat;
    background-position: center;
}
body>nav>ul>li:nth-child(2){
    background: url('../img/icons/fish_icon_mini.png');
    background-size:auto;
    background-repeat: no-repeat;
    background-position: 20px 15px;
}
body>nav>ul>li:nth-child(3){
    background: url('../img/icons/portfolio_icon_mini.png');
    background-size:auto;
    background-repeat: no-repeat;
    background-position: 15px 15px;
}
body>nav>ul>li:nth-child(4){
    background: url('../img/icons/dog_icon.png');
    background-size:contain;
    background-repeat: no-repeat;
    background-position: right;
}
body>nav>ul>li:nth-child(5){
    background: url('../img/icons/bird_icon_mini.png');
    background-size:auto;
    background-repeat: no-repeat;
    background-position: 27px 10px;
}

body>nav>ul>li>ul{
    position: relative;
    right: 115px;
    bottom: 75px;
    padding: 10px;
}

#sous_menu>li:nth-child(1){
    background: url('../img/icons/seashell-shell-illustration_mini.png');
    background-size:auto;
    background-repeat: no-repeat;
    background-position: 10px 20px;
}
#sous_menu>li:nth-child(2){
    background: url('../img/icons/mermaid_timeline_section_mini.png');
    background-size:auto;
    background-repeat: no-repeat;
    background-position: -5px 0px;
}
#sous_menu>li:nth-child(3){
    background: url('../img/icons/miscellaneous_icon_mini.png');
    background-size:auto;
    background-repeat: no-repeat;
    background-position: 10px 20px;
}

/* ===============================================================================
=================================  SECTION HOME  =================================
==================================================================================*/

#home{
    display: block;
    position: relative;    
}

/*zone de texte centrale*/
#home>div{
    display: block;
    position: absolute;
    left: 25vw;
    top: 35vh;
    width: 50vw;
    height: 30vh;
    text-align: center;
}
#home h1{
    margin-top: 0;
    margin-bottom: 5vh;
    color: green;
    width: 100%;
    font-size: 40px;
}
#home h2{
    color: darkgoldenrod;
    width: 100%;
    font-size: 25px;
}

@media screen and (min-width: 500px){
    #home h1{
        margin-top: 0;
        margin-bottom: 5vh;
        color: green;
        width: 100%;
        font-size: 50px;
    }
    #home h2{
        color: darkgoldenrod;
        width: 100%;
        font-size: 35px;
    }
}

#home h3{
    color: darkgoldenrod;
    width: 100%;
    font-size: 30px;
}

#home>div>div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 25px;
    margin-top: 2vh;
}
#home>div>div a{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vh;
    margin: 1vh;
    width: 5vh;
    height: 5vh;
    text-decoration: none;
    color: indianred;
    border: 2px dashed dodgerblue;
    border-radius: 50%;
}

/*les dessins se trouvent dans une liste à puces dans <nav>*/
#home li{
    list-style-type: none;
}
#home img{
    display: block;
    position: absolute; /* images positionnées par rapport au 1er ancêtre en display block et position relative, soit le div home justement */
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}
#home li:hover img{
    -webkit-filter: brightness(100%); /* Safari */
    filter: brightness(100%);  
}

#home li em{
    display: none;
    position: absolute;
}

#home li:hover em{
    display: block;
    color: red;
    width:inherit;
    height: inherit;
}

/*lake*/
#home li:nth-of-type(1) img {
    bottom: 0;
    left: 15vw;
    right: 15vw;
    max-height: 40vh;
    max-width: 70vw;
    margin: auto;
}
/*profile*/
#home li:nth-of-type(1) em{
    bottom: 20vh;
    left: 50vw;
}

/*tree*/
#home li:nth-of-type(2) img{ 
    top: 0;
    left: 1vw;
    max-width: 50vw;
    max-height: 75vh;
}
/*portfolio*/
#home li:nth-of-type(2) em{
    top: 20vh;
    left: 3vw;
}

/*dog*/
#home li:nth-of-type(3) img{ 
    top: 50vh;
    left: 75vw;
    max-width: 60vw;
    max-height: 25vh;
}
/*news*/
#home li:nth-of-type(3) em{
    top: 50vh;
    left: 75vw;
}


/*bird*/
#home li:nth-of-type(4) img{ 
    bottom: 65vh;
    left: 32vw;
    right: 16vw;
    margin: auto;
    max-width: 30vw;
    max-height: 30vh;
}

@media screen and (min-width:800px){
    #home li:nth-of-type(4) img{ 
        max-width: 15vw;
        max-height: 14vh;
    }
}
/*contact*/
#home li:nth-of-type(4) em{
    bottom: 64vh;
    left: 55vw;
}

/* ===============================================================================
============================  SECTION CONTACT  ===================================
==================================================================================*/
/*SECTION CONTACT*/
/*de base, display block, position relative*/

#contact *{
    margin: 0;
    padding: 0;
}

#contact{
    display: flex;
    flex-direction: column;
/*    position: relative;*/
    justify-content: center;
    align-items: center;
    
    color: deeppink;
    
    background: black url("../img/bird_contact_section.png") no-repeat;
    background-position: 3vw 7vh;
    background-size: 14vw;
}

@media screen and (min-width: 800px){
/*    positionne l'oiseau plus bas à gauche du formulaire lorsque la largeur de la fenêtre dépasse 800px*/
    #contact{
        background-position: 1vw 30vh;
    }
}
@media screen and (min-width: 1100px){
/*    limite l'agrandissement de l'image (oiseau) à sa résolution initiale au max */
    #contact{
        background-size: 165px 211px;
    }
}

#contact h1{
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 70vw;
    padding-bottom: 3vh;
        
    color: green;
    font-size: 5vh;
}

#contact form{    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    width: 70vw;
    padding: 3vw;
    
    min-height: 65vh;
    max-height: 75vh;
    
    border: solid 1px deepskyblue;
    font-size: 3vh;
}

#contact textarea, #contact input{
    font-family: monospace;
    font-size: 2vh;
    width: 65vw;
    margin-bottom: 2vh;
}
#contact label{
    padding-bottom: 1vh;
}
#contact textarea{
    min-height: 10vh;
    max-height: 35vh;
}

#contact form button{
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    min-width: 10vw;
    height: auto;
    padding: 1vh;
    
    background-color: green;
    border: 1px solid deeppink;
    border-radius: 10px;
    
    font-family: inherit;
    font-weight: bold;
    font-size: 2vh;
    color: black;
}

#contact>a{
    align-self:flex-end;
    margin: 0vh 10vh -7vh 0vh;
    z-index: 10;
}
#contact>a>img{
    display: block;
    min-width: 30px;
    min-height: 30px;
    max-width: 10vw;
    max-height: 10vh;
}

#temp{
    position: absolute;
    top: 10vh;
    left: 145vw;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    font-size: 4vw;
    font-family: monospace;
    color: olivedrab;
    width: 100vw;
    height: 100vh;
    z-index: 9;
}

/* ===============================================================================
=================================  SECTION NEWS  ==================================
==================================================================================*/
/*SECTION NEWS*/

#news{
    display: block;
    position: relative;

    color: green;
    
    background: black url("../img/dog_news_section.png") bottom left no-repeat;
    background-size: 50vh auto;
    background-origin: border-box;
}

#news h1{
    display: block;
    position: absolute;
    top: 3vh;
    left: 3vh;
    
    margin: 0;
    padding: 0;
    
    font-size: 5vh;
    
    color: goldenrod;
}

#news div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20vh;
    left: 15vw;
    
    width: 70vw;
    height: 35vh;
    
    border: dotted 0.5vw red;
    border-radius: 2.5vw;
    
    padding: 5vw;
    text-align: center;
    line-height: 1.2;
}

#news div p{
    font-family: monospace;
    font-size: 2vh;
}

#news a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 30px;
    position: absolute;
    border: 2px dashed darkgoldenrod;
    border-radius: 25%;
    color: darkred;
    font-size: 20px;
    text-decoration: none;
    padding: 2vw;
}

/*portfolio*/
#news a:nth-of-type(1){
    bottom: 2vh;
    right: 110px;;
}
/*contact*/
#news a:nth-of-type(2){
    bottom: 2vh;
    right: 210px;
}
/*profile*/
#news a:nth-of-type(3){
    bottom: 2vh;
    right: 10px;
}

/*home*/
#news a:nth-of-type(4){
    bottom: 2vh;
    right: 310px;
    border: 0px;
}
#news a:nth-of-type(4) img{
    width: 50px;
    height: 50px;
}

/* ===============================================================================
=================================  SECTION PORTFOLIO  =============================
==================================================================================*/
/*SECTION PORTFOLIO*/

#portfolio{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#portfolio>div{
    width: 90vw;
}

#portfolio h1{
    align-self:flex-start;
    margin: 3vh 3vh;
    padding: 0;
    font-size: 5vh;
    color: royalblue;

}

/*SELECTION PAR CRITERES*/

#criteres{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-height: 25vh;
}
#criteres button{
    font-size: 12px;
    font-family: monospace;
    margin: 1vh;
    background-color: black;
    border: 1px dotted white;
    color: green;
    border-radius: 10%;
    padding: 0.5vh; 
}

/*MINIATURES PROJETS*/
#miniatures{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-height: 20vh;
    flex-wrap: wrap;
    flex-shrink: 2;
}

#miniatures img{
    width: 5vw;
    height: 5vw;
    min-width: 40px;
    min-height: 40px;
    background-color: white;
    margin: 1vh;
    border-radius: 10%;
}


/*PARTIE CENTRALE PROJET*/
#projet{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50vh;
    margin-top: 3vh;
}

#description{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2vh;
    height: 100%;
    width: 50vw;
    background-color: antiquewhite;
    border-radius:10px 0 0 10px;
}
#description h2{
    font-size: 4vh;
    margin-bottom: 2vh;
    color: darkslateblue;
}

#contenu{
    overflow-y: auto;
    max-height: 40vh;
    max-width: 100%;
}



#contenu *{
    font-family: monospace;
    font-size: 13px;
    line-height: 1.4;
    list-style-position: inside;
    color: darkslateblue;
    max-width: 100%;
}
#contenu li{
    font-size: 11px;
}
#contenu>*{
    margin-bottom:4vh;
}
@media screen and (min-height: 600px){
    #contenu *{
        font-size: 16px;
    }
    #contenu li{
        font-size: 14px;
    }
}

#project_controls{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
}
#project_controls a{
    display: block;
    text-decoration: none;
    font-size: 3vh;
    margin-top: 2vh;
    border: 2px dotted green;
    padding: 1vh;
    border-radius: 2vh;
}

#project_controls img{
    max-height: 10vh;    
}

#visuel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: inherit;
    background-color: white;
    border: 1px dotted green;
    overflow: hidden;
    width: 30vw;
    border-radius: 0 10px 10px 0;
}

#visuel img{
    width: auto;
    max-width: 30vw;
    height: auto;
    max-height: 100%;
}

@keyframes blink { 
   50% { border: 3px dotted green; } 
}
#portfolio>a{
    align-self: flex-end;
    font-size: 3vh;
    text-decoration: none;
    border: 3px solid black;
    border-radius: 10px;
    color: yellowgreen;
    padding: 1vh;
    animation: blink .5s step-end infinite alternate;
    margin-right: 5vh;
    margin-top: 5vh;
}

#criteres .skill-selected{
    background-color: antiquewhite;
    border : 2px dotted red;
}

#miniatures .html,
#miniatures .css,
#miniatures .js,
#miniatures .jquery,
#miniatures .jquery-ui,
#miniatures .csharp,
#miniatures .asp,
#miniatures .mysql,
#miniatures .sqlserver,
#miniatures .database,
#miniatures .cms,
#miniatures .zend,
#miniatures .php
{
    border : 5px solid goldenrod;
}

/* ===============================================================================
=================================  SECTION PROFILE  ==============================
==================================================================================*/
#profile{
    display: block;
    position: relative;
    background-color: black;    
    background-image: 
        url("../img/fish_profile_section.png"), 
        url("../img/transitions/profileBlue.png"),
        url("../img/transitions/transition_towater.png");
    background-repeat:  no-repeat;
    background-size: 
        20vw, 
        100vw 35vh,
        100vw 35vh;
    background-origin: border-box;
    background-position: 
        50vw 2vh, 
        0 -2vh,
        0 65vh;
}

#profile h1{
    display: block;
    position: absolute;
    top: 3vh;
    left: 3vh;
    
    margin: 0;
    padding: 0;
    
    font-size: 5vh;
    
    color: goldenrod;
}

#profile ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    
    position: relative;
    top: 30vh;
}

#profile li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    width: 25vw;
    max-width: 300px;
    height: 25vw;
    max-height: 300px;
    background-color: antiquewhite;
    
    border-radius: 50%;
}

#profile li:nth-of-type(1){
    position:relative;
    top: -5vh;
}
#profile li:nth-of-type(2){
    position:relative;
    top: 10vh;
}
#profile li:nth-of-type(3){
    position:relative;
}

#profile a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#profile span{
    width: 22vw;
    text-align: center;
    
    font-size:3vw;
    font-weight: bold;
    font-family: monospace;
    color: darkgreen;
}


#profile li:hover{
    background-color: darkseagreen;
}
/* ===============================================================================
=================================  SECTION TIMELINE  ==============================
==================================================================================*/
/*SECTION TIMELINE*/
#timeline{
    display: flex;
    flex-direction: row;
    position: relative;
    background-image: url("../img/mermaid_timeline_section.png");
    background-repeat: no-repeat;
    background-position: center 45vh;
    background-size: auto 50vh;
}

#timeline h1{
    display: block;
    position: absolute;
    top: 3vh;
    left: 3vh;
    
    margin: 0;
    padding: 0;
    
    font-size: 5vh;
    
    color: darkmagenta;
}

#timeline>a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 30px;
    position: absolute;
    bottom: 2vh;
    right: 2vw;
    border: 2px dashed darkgoldenrod;
    border-radius: 25%;
    color: darkred;
    font-size: 20px;
    text-decoration: none;
    padding: 2vw;
}

/*container des bulles et texte svg*/
#timeline>div{
    display: block;
    position: absolute;
    top: -30vh;
    left: 10vw;
    width: 80vw;
    height: 100vh;
    font-size: 7vw;
}

text{
    font-size: 7vw;
    stroke-width: 0;
}

@media screen and (min-width: 700px){
    
    #timeline>div{
        top: -30vh;
        left: 40vw;
        width: 60vw;
        height: 100vh;
    }
    text{
        font-size: 5vw;
        stroke-width: 0.3;
    }
}

/*liens dans la section timeline > non soulignés */
#timeline>div>a{
    text-decoration: none !important; /* Safari */
}

/*paragraphes parcours timeline*/
#timeline p{
    display: block;
    position: absolute;
    color: green;
    font-family: monospace;
    font-size: 10px;
    padding: 2vh;
}

@media screen and (min-width:500px) and (min-height:500px){
    #timeline p{
        display: block;
        position: absolute;
        color: green;
        font-family: monospace;
        font-size: 15px;
        padding: 2vh;
    }
}
#timeline p:nth-of-type(1){
    top: 45vh;
    right: 85vw;
    max-width: 15vw;
}
#timeline p:nth-of-type(2){
    top: 65vh;
    right: 85vw;
    max-width: 15vw;

}
#timeline p:nth-of-type(3){
    top: 75vh;
    right: 70vw;
    max-width: 30vw;
}
#timeline p:nth-of-type(4){
    top: 85vh;
    left: 30vw;
    max-width: 40vw;

}
#timeline p:nth-of-type(5){
    top: 75vh;
    left: 65vw;
    max-width: 35vw;
}
#timeline p:nth-of-type(6){
    top: 60vh;
    left: 80vw;
    max-width: 20vw;
}
#timeline p:nth-of-type(7){
    top: 50vh;
    left: 80vw;
    max-width: 20vw;
}
#timeline p:nth-of-type(8){
    top: 45vh;
    left: 55vw;
    max-width: 45vw;
}
#timeline p:nth-of-type(9){
    top: 35vh;
    right: 15vw;
}

/* ===============================================================================
=================================  SECTION MISCELLANEOUS  ========================
==================================================================================*/
#miscellaneous{
    position: relative;
}
#miscellaneous h1{
    margin: 3vh 3vh;
    padding: 0;
    font-size: 5vh;
    color: darkmagenta;
}

#miscellaneous h2{
    font-size: 18px;
}

@media screen and (min-width: 700px){
    #miscellaneous h2{
        font-size: 30px;
    }
}

#miscellaneous>h2{
    display: block;
    position: absolute;
    width: 30vw;
    height: 10vh;
}

/*modern languages*/
#miscellaneous>h2:nth-of-type(1){
    left: 10vw;
    top: 20vh;
    color: forestgreen;
    text-align: left;
}
#miscellaneous>h2:nth-of-type(1)+div{
    color: forestgreen;
}

/*world music*/
#miscellaneous>h2:nth-of-type(2){
    left: 10vw;
    top: 30vh;
    color: darkgoldenrod;
}
#miscellaneous>h2:nth-of-type(2)+div{
    color: darkgoldenrod;
}

/*computer stuff*/
#miscellaneous>h2:nth-of-type(3){
    left: 10vw;
    top: 40vh;
    color: forestgreen;
}
#miscellaneous>h2:nth-of-type(3)+div{
    color: forestgreen;
}

/*video events*/
#miscellaneous>h2:nth-of-type(4){
    left: 10vw;
    top: 50vh;
    color: darkgoldenrod;
}
#miscellaneous>h2:nth-of-type(4)+div{
    color: darkgoldenrod;
}
#miscellaneous>h2:nth-of-type(4)+div a{
    color: dodgerblue;
}

/*game jam - hackathon*/
#miscellaneous>h2:nth-of-type(5){
    left: 10vw;
    top: 60vh;
    color: forestgreen;
}
#miscellaneous>h2:nth-of-type(5)+div{
    color: forestgreen;
}
#miscellaneous>h2:nth-of-type(5)+div a{
    color: dodgerblue;
}



#miscellaneous h2+div{
    display: none;
    position: fixed;
    width: 55vw;
    height: 70vh;
    top: 15vh;
    left: 40vw;
    padding: 2vh;
    z-index: 3;
    border-radius: 5%;
    overflow-y: scroll;
    background-image: url(../img/bg_paper.png);
}
@media screen and (min-width: 850px){
    #miscellaneous h2+div{
        left: 35vw;
    }   
}

#miscellaneous div>h2{
    margin: 10px;
}

#miscellaneous li, #miscellaneous p, #miscellaneous a{
    font-family: monospace;
    font-size: 13px;
    list-style-position: inside;
    line-height: 1.7;
    width: 100%;
    text-decoration: none;
}

#miscellaneous div>ul{
    border: 2px dashed darkmagenta;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 40px;
}

#miscellaneous li>ul{
    padding-left: 30px;
}

/*
#miscellaneous>h2:hover+div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    width: 55vw;
    height: 70vh;
    top: 15vh;
    left: 35vw;
    padding: 2vh;
    z-index: 3;
    border-radius: 5%;
}
*/
#miscellaneous #backBtn{
    font-family: 'Amatic SC', cursive;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 30px;
    position: absolute;
    bottom: 2vh;
    left: 2vw;
    border: 2px dashed darkgoldenrod;
    border-radius: 25%;
    color: darkred;
    font-size: 20px;
    text-decoration: none;
    padding: 2vw;
}


/* ===============================================================================
=================================  SECTION WEBDEV  ==============================
==================================================================================*/
#webdev{
    position: relative;
}
#webdev h1{
    margin: 3vh 3vh;
    padding: 0;
    font-size: 5vh;
    color: yellowgreen;
}

#webdev h2{
    font-size: 30px;
}

#webdev>h2{
    display: block;
    position: absolute;
    width: 30vw;
    height: 10vh;
}

/*languages*/
#webdev>h2:nth-of-type(1){
    left: 25vw;
    top: 15vh;
    color: green;
    text-align: left;
}
#webdev>h2:nth-of-type(1)+div{
    color: green;
}

/*frameworks*/
#webdev>h2:nth-of-type(2){
    left: 5vw;
    top: 35vh;
    color: darkmagenta;
}
#webdev>h2:nth-of-type(2)+div{
    color: darkmagenta;
}

/*web*/
#webdev>h2:nth-of-type(3){
    left: 15vw;
    top: 50vh;
    color: darkgoldenrod;
}
#webdev>h2:nth-of-type(3)+div{
    color: darkgoldenrod;
}

/*tools*/
#webdev>h2:nth-of-type(4){
    right: 15vw;
    top: 35vh;
    color: blue;
    text-align: right;
}
#webdev>h2:nth-of-type(4)+div{
    color: blue;
}

/*analysis*/
#webdev>h2:nth-of-type(5){
    right: 15vw;
    top: 50vh;
    text-align: right;
    color: darkgoldenrod;
}
#webdev>h2:nth-of-type(5)+div{
    color: darkgoldenrod;
}

/*database*/
#webdev>h2:nth-of-type(6){
    right: 20vw;
    bottom: 25vh;
    color: green;
    text-align: right;
}
#webdev>h2:nth-of-type(6)+div{
    color: green;
}

/*project management*/
#webdev h2:nth-of-type(7){
    right: 10vw;
    top: 20vh;
    text-align: right;
    color: darkred;
}
#webdev h2:nth-of-type(7)+div{
    color: darkred;
}

/*cms*/
#webdev h2:nth-of-type(8){
    left: 15vw;
    bottom: 15vh;
    color: blue;
}
#webdev h2:nth-of-type(8)+div{
    color: blue;
}

/*web servers*/
#webdev>h2:nth-of-type(9){
    left: 45vw;
    bottom: 10vh;
    color: darkmagenta;
}
#webdev>h2:nth-of-type(9)+div{
    color: darkmagenta;
}

/*mobile*/
#webdev>h2:nth-of-type(10){
    left: 5vw;
    top: 65vh;
    color: darkred;
}
#webdev>h2:nth-of-type(10)+div{
    color: darkred;
}




#webdev h2+div{
    display: none;
    background-image:url("../img/bg_paper.png");
    position: fixed;
    width: 50vw;
    min-height: 50vh;
    top: 25vh;
    left: 25vw;
    padding: 2vh;
    z-index: 3;
    border-radius: 5%;
}

@media screen and (min-width:800px){
    #webdev h2+div{
      background-image:none;
    }  
}

#webdev div>h2{
    margin: 5vh;
}

#webdev li{
    font-family: monospace;
    font-size: 13px;
    list-style-position: outside;
    line-height: 1.7;
}

#webdev>h2:hover+div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

@keyframes blink { 
   50% { border: 3px dotted green; } 
}
#webdev a{
    display: block;
    box-sizing:content-box;
    position: absolute;
    bottom: 5vw;
    right: 5vw;
    font-size: 4vh;
    text-decoration: none;
    border: 3px solid black;
    border-radius: 10px;
    color: yellowgreen;
    padding: 1vh;
    animation: blink .5s step-end infinite alternate;
}