@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root{
    --light-gray: #434B66;
    --secondary-gray: #b5bbcc;
    --dark-blue: #171622;
    --red-accent: #401300;
    --off-white: #FCFBBF;
    --white: #FFFFFF;
    --black: #000000;
    --animation-end: 3s;
}

body{
    margin: 0;
    padding: 5% 0 0 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-blue);
    color: var(--white);
    box-sizing: border-box;
    position: relative;
    padding-right: 1.5%;
}

body::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1.5%;
    z-index: 1000;
    background: repeating-linear-gradient(
        var(--red-accent) 0,
        var(--red-accent) 33vh, 
        var(--off-white) 33vh, 
        var(--off-white) 66vh,
        var(--light-gray) 66vh,
        var(--light-gray) 100vh);

}

a {
    text-decoration: none;
}

/* Loader 
- Normal animation end is 5s
*/


body{
    overflow: hidden;
    animation: bodyOverflows 0s linear var(--animation-end) 1 normal forwards;
}

@keyframes bodyOverflows {
    to {
        overflow-y: auto;
    }
}

body>*:not(#loader, nav){
    opacity: 0;
    animation: appear .6s ease-in-out var(--animation-end) 1 normal forwards;
}


#loader{
    animation: disappear .6s ease-in-out 2.4s 1 normal forwards, disable 0s linear var(--animation-end) 1 normal forwards;
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dark-blue);
}

@keyframes disappear {
    to {
        opacity: 0;
    }
}

@keyframes disable {
    to {
        display: none;
    }
}

img{
    width: 100%;
}

#loader .visual{
    width: 10%;
    min-width: 150px;
    aspect-ratio: 1/1;
    animation: bounceIn .9s ease 0s 1 normal forwards,
                heartbeat .6s ease-in-out 1.02s 1 normal forwards;
    counter-reset: svgCounter;
}

#loader .visual img, #loader .visual svg{
    position: absolute;
    width: 100%;
    counter-increment: svgCounter;
}

#loader .visual svg{
    opacity: 0;
    scale: .9;
}

#loader .visual svg:last-of-type, #loader .visual img{
    scale: 1;
    animation: appear .18s ease-out 1.14s 1 normal forwards,
                slide1 .6s ease-out 1.5s 1 normal forwards;
}

#loader .visual svg:nth-of-type(4){
    animation: appear 0s ease-out 1.5s 1 normal forwards,
                slide2 .6s ease-out 1.5s 1 normal forwards,
                fixScale .6s ease-out 1.5s 1 normal forwards;
}

#loader .visual svg:nth-of-type(3){
    animation: appear 0s ease-out 1.5s 1 normal forwards,
                fixScale .6s ease-out 1.5s 1 normal forwards;
}

#loader .visual svg:nth-of-type(2){
    animation: appear 0s ease-out 1.5s 1 normal forwards,
                slide4 .6s ease-out 1.5s 1 normal forwards,
                fixScale .6s ease-out 1.5s 1 normal forwards;
}

#loader .visual svg:first-of-type{
    animation: appear 0s ease-out 1.5s 1 normal forwards,
                slide5 .6s ease-out 1.5s 1 normal forwards,
                fixScale .6s ease-out 1.5s 1 normal forwards;
}

#loader h1{
    font-size: 15px;
    text-align: center;
    animation: textSlideFade .6s ease-out 1.5s 1 normal forwards;
    opacity: 0;
    margin: 0;
    color: var(--off-white);
    position: absolute;
    top: 100%;
}

@keyframes bounceIn {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateY(-250px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateY(-65px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateY(-28px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	95% {
		animation-timing-function: ease-in;
		transform: translateY(-8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}
}

@keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
}

@keyframes appear {
    to {
        opacity: 1;
    }
}

@keyframes slide1 {
    to{
        transform: translateX(-25%);
    }
}
@keyframes slide2 {
    to{
        transform: translateX(-12.5%);
    }
}

@keyframes slide4 {
    to{
        transform: translateX(12.5%);
    }
}

@keyframes slide5 {
    to{
        transform: translateX(25%);
    }
}

@keyframes fixScale {
    to {
        scale: 1;
    }
}

@keyframes textSlideFade {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */

header{
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 2% 1% 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--dark-blue);
    z-index: 1000;
}

header .left{
    display: flex;
    align-items: center;
    width: 50%;
    position: relative;
}

header .left::before, header .left::after{
    content: '';
    position: absolute;
    display: block;
    width: 25%;
    aspect-ratio: 300 / 4;
    background: var(--off-white);
    top: 110%;
    left: 0;
}

header .left::after{
    top: 140%;
    width: 15%;
    aspect-ratio: 180 / 4;
}

header .left img{
    width: 10%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    max-width: 40px;
}

header .left h1{
    margin: 0;
    margin-left: 1%;
    color: var(--off-white);
    font-weight: normal;
    font-size: 130%;
}



header .right{
    aspect-ratio: 1 / 1;
    background: none;
    border: none;
    color: var(--light-gray);
    font-size: 400%;
    cursor: pointer;
    position: relative;
}


/* Nav */

header #nav-opener.open{
    animation: openNav 1s ease-in-out 0s 1 normal forwards, disappear .3s ease-in-out 1.3s 1 normal forwards;
}

@keyframes openNav {
    to {
        transform: translate(-46vw, 50vh) scale(500);
        color: var(--dark-blue);
    }
}

nav{
   animation: disable 0s linear .5s 1 normal forwards, navBackground 0s ease-in-out .5s 1 reverse backwards;
   transform: translateX(100%);
   transition: transform .5s ease-in-out;
   position: fixed;
   inset: 0;
   box-sizing: border-box;
   padding: 3% 5%;
   z-index: 10000;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   backdrop-filter: blur(5px);
   background-color: rgba(0, 0, 0, 0.5);
}

nav.hidden{
    display: none;
}

nav.open{
    transform: none;
    opacity: 0;
    animation: appear .5s ease-in-out .6s 1 normal forwards, navBackground .3s ease-in-out 1s 1 normal forwards;
}

nav a{
    font-size: 400%;
    width: 45%;
    color: var(--light-gray);
    position: relative;
    background-color: var(--dark-blue);
    padding: .5% 3%;
}

nav a::after, nav a::before{
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    background: var(--light-gray);
}

nav a::before{
    top: 100%;
    bottom: -5%;
    transition: right .5s ease-in-out;
}

nav a:hover::before{
    transition: right .3s linear;
    right: 0;
}

nav a:hover::after{
    transition: left .5s ease-in-out, right .3s linear;
    left: 100%;
    right: 0;
}

@keyframes navBackground {
    from {
        background-color: transparent;
    }
    to {
        background-color: rgba(0, 0, 0, 0.5);
    }
}


/* Main */

/* Hero */

#hero{
    width: 100%;
    height: 80vh;
    display: flex;
    box-sizing: border-box;
    padding: 0 0 0 4%;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

#hero .left{
    width: 40%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#hero .left p{
    font-size: 200%;
    margin: 0;
}

#hero .left button{
    background: var(--light-gray);
    color: var(--dark-blue);
    padding: 3%;
    border: none;
    font-size: 175%;
    cursor: pointer;
    width: fit-content;
    font-weight: bolder;
}

#hero .right{
    width: 30%;
    position: relative;
}

#hero .right img, #hero .right svg{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%) translateX(-85%);
}

#hero .right svg:nth-of-type(4){
    transform: translateY(-50%) translateX(-67.5%);
}

#hero .right svg:nth-of-type(3){
    transform: translateY(-50%) translateX(-50%);
}

#hero .right svg:nth-of-type(2){
    transform: translateY(-50%) translateX(-32.5%);
}

#hero .right svg:first-of-type{
    transform: translateY(-50%) translateX(-15%);
}

/* Dots */

.dots{
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dot{
    width: 2vw;
    max-width: 20px;
    min-width: 10px;
    aspect-ratio: 1 / 1;
    background: var(--light-gray);
    border-radius: 50%;
    margin: 0 1%;
    cursor: pointer;

}

/* Expériences */

#experiences{
    width: 96%;
    box-sizing: border-box;
    padding: .5% 0;
    margin: 10vh auto;
    border: var(--light-gray) 4px solid;
    border-radius: 15px;
}

#experiences h2{
    margin: 2% 0;
    font-size: 250%;
    font-weight: bold;
    color: var(--off-white);
    text-align: center;
}

#experiences .experiences-list{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: auto;
}

#experiences .experiences-list .exp{
    clear: both;
    position: relative;
    box-sizing: border-box;
    width: 30%;
    padding: 1% 2% 4% 2%;
    margin: 1% 1%;
    background-color: var(--light-gray);
    box-shadow: 2rem 0 2.5rem -0.75rem rgba(0, 0, 0, 0.5);
    transition: transform .1s ease-in-out;
    border: 1px solid transparent;
    aspect-ratio: 4/5;
}

#experiences .experiences-list .exp:hover{
    border: 1px solid ;
    animation: borderPulse 2.5s ease-in-out infinite;
}   

@keyframes borderPulse {
    0% {
        border-color: var(--light-gray);
    }
    50% {
        border-color: var(--white);
    }
    100% {
        border-color: var(--light-gray);
    }
    
}

#experiences .experiences-list .exp .heading, #experiences .experiences-list .exp .infos{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#experiences .experiences-list .exp .heading{
    min-height: 16%;
}

#experiences .experiences-list .exp .infos{
    position: absolute;
    inset: auto 0 0 0;
    padding: 1% 4%;
}

#experiences .experiences-list .exp .heading h3, #experiences .experiences-list .exp .heading a{
    margin: 2% 0;
    font-size: 125%;
    font-weight: bold;
}

#experiences .experiences-list .exp .heading h3{
    width: 60%;
}

#experiences .experiences-list .exp .heading a{
    color: var(--secondary-gray);
    text-align: right;
    width: 30%;
}

#experiences .experiences-list .exp .infos p{
    color: var(--secondary-gray);
    margin: 0 0 3% 0;
}


#experiences .experiences-list .exp .description{
    margin: 0;
}

/* Formations */

#formations{
    width: 100%;
    box-sizing: border-box;
    padding: 0 4%;
    margin: 0 0 8% 0;
}

#formations h2{
    margin: 2% 0;
    font-size: 250%;
    font-weight: bold;
    color: var(--off-white);
    text-align: center;
}

#formations .formations-list{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#formations .formations-list .formation{
    clear: both;
    position: relative;
    box-sizing: border-box;
    width: 30%;
    aspect-ratio: 1/1;
    padding: 1% 2%;
    margin: 1% 1%;
    background-color: var(--light-gray);
    box-shadow: 0 0 2.5rem 0rem rgba(0, 0, 0, 0.5);
    transition: transform .5s ease-in-out;
    font-size: 125%;
}

#formations .formations-list .formation:nth-of-type(1){
    transform: translate(90%, 10%) rotate(-13deg);
}
#formations .formations-list .formation:nth-of-type(3){
    transform: translate(-90%, 10%) rotate(13deg);
}
#formations:hover .formations-list .formation{
    transform: none !important;
}

#formations .formations-list .formation h3{
    margin: 0;
    width: 80%;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#formations .formations-list .formation .ecole{
    color: var(--white);
}
#formations .formations-list .formation .date{
    float: right;
    color: var(--secondary-gray);
    margin: 0;
}

/* Projets */

#projets{
    width: 100%;
    box-sizing: border-box;
    padding: 0 4%;
    margin: 0 0 8% 0;
}

#projets h2{
    margin: 2% 0;
    font-size: 250%;
    font-weight: bold;
    color: var(--off-white);
    text-align: center;
}

#projets .projets-list{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content:baseline;
    flex-wrap: wrap;
}

#projets .projets-list .projet{
    clear: both;
    position: relative;
    box-sizing: border-box;
    width: 45%;
    padding: 1% 2%;
    margin: 1% 1%;
}

#projets .projets-list .projet *{
    margin: 0;
}

#projets .projets-list .projet h3{
    font-size: 120%;
    padding: 0 0 3% 0;
    margin: 0 0 4% 0;
    font-weight: bold;
    color: var(--white);
    border-bottom: 1px solid var(--white);
}

#projets .projets-list .projet .date{
    color: var(--secondary-gray);
    margin: 1% 0;
    padding: 0 0 0 2%;
}

#projets .projets-list .projet .client{
    float: right;
    padding: 0 2% 0 0;
}
#projets .projets-list .projet .descr{
    margin: 0;
    padding: 2% 2% 4% 2%;
    border-bottom: 1px solid var(--white);
}

#projets .projets-list .projet .descr a{
    display: block;
    width: fit-content;
    font-weight: bolder;
    padding: 2%;
    margin: 2% 0 0 0;
    background-color: var(--light-gray);
    color: var(--dark-blue);
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
    animation: jello-horizontal 4.8s ease-in 2s infinite both;
}

#projets .projets-list .projet:first-of-type .descr a{
    animation-delay: 0.6s;
}

#projets .projets-list .projet .descr a:hover{
    background-color: var(--dark-blue);
    color: var(--light-gray);
}

#projets .projets-list .projet .descr a span.plus{
    font-size: 140%;
}


@keyframes jello-horizontal {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    7.5% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    10% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    12.5% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    16.25% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    18.75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    25% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
/* Hard Skills */

#hard-skills{
    width: 100%;
    box-sizing: border-box;
    padding: 0 4%;
    margin: 0 0 8% 0;
}

#hard-skills h2{
    margin: 2% 0;
    font-size: 250%;
    font-weight: bold;
    color: var(--off-white);
    text-align: center;
}

#hard-skills .hard-skills-list{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#hard-skills .hard-skills-list .hard-skill-cat{
    width: 20%;
}

#hard-skills .hard-skills-list .hard-skill-cat h3{
    font-size: 175%;
    font-weight: bold;
    color: var(--off-white);
    margin: 0 0 0 2%;
}

#hard-skills .hard-skills-list .hard-skill-cat ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: baseline;
    flex-wrap: wrap;
}
#hard-skills .hard-skills-list .hard-skill-cat ul li{
    margin: 2%;
    width: 30%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}
#hard-skills .hard-skills-list .hard-skill-cat ul li img{
    width: 100%;
    background-color: var(--white);
    border-radius: 1vw;
    padding: .5vw;
    box-sizing: border-box;
}

/* Langues */

#lang{
    width: 100%;
    box-sizing: border-box;
    padding: 0 4%;
    margin: 0 0 8% 0;
}

#lang h2{
    margin: 2% 0;
    font-size: 250%;
    font-weight: bold;
    color: var(--off-white);
    text-align: center;
}

#lang .lang-list{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
}

#lang .lang-list .lang{
    width: 20%;
}

#lang .lang-list .lang h3{
    font-size: 175%;
    font-weight: bold;
    color: var(--off-white);
    margin: 0 0 0 2%;
}

#lang .lang-list .lang .progress{
    width: 100%;
    height: 1vw;
    background-color: var(--light-gray);
    border-radius: 1vw;
    margin: 3% 0 1% 0;
    overflow: hidden;
}

#lang .lang-list .lang .progress .bar{
    width: 50%;
    height: 100%;
    background-color: var(--red-accent);
}

#lang .lang-list .lang p{
    font-size: 125%;
}

/* Contact */

#contact{
    width: 100%;
    box-sizing: border-box;
    padding: 0 4%;
    margin-bottom: 2%;
}

#contact h2{
    margin: 0;
    font-size: 250%;
    font-weight: bold;
    color: var(--off-white);
    text-align: center;
}

#contact .links{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#contact .links a{
    box-sizing: border-box;
    width: 10%;
    padding: 2%;
    aspect-ratio: 1/1;
    background-color: var(--light-gray);
    font-size: 150%;
    text-align: center;
    margin: 2% 4%;
    border-radius: 1vw;
    transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: center;
    align-items: center;
}

#contact .links a:hover{
    transform: scale(1.1);
}

#contact .links a svg, #contact .links a #Icon-Set-Filled{
    fill: var(--secondary-gray);
}

/* Footer */

footer{
    width: 100%;
    box-sizing: border-box;
    padding: 2%;
    background-color: var(--red-accent);
    color: var(--off-white);
    text-align: center;
    line-height: 200%;
}

footer a{
    color: var(--off-white);
    text-decoration: underline;
}

/* Tooltip */

#tooltip {
    position: absolute;
    background-color: var(--white);
    color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
    z-index: 100000;
    opacity: 1 !important;
    animation: none !important;
    pointer-events: none;
    transform: translate(-50%, -100%);
    padding: .25%;
}

#tooltip.hidden {
    display: none;
}


/* Responsive */

@media screen and (max-aspect-ratio: 9/14) {     

    body{
        padding: 10vh 0 0 0;
        overflow-x: hidden;
        font-size: 50%;
    }
    body::after{
        display: none;
    }

    /* Header */

    header {
        width: 100%;
        font-size: 170%;
    }

    header .left{
        width: 80%;
    }

    header .left::before, header .left::after{
        display: none;
    }

    /* Nav */

    nav{
        padding: 10vh;
    }

    nav a{
        width: 100%;
    }

    /* Dots */

    .dots{
        width: 100%;
    }

    /* Main */

    /* Hero */

    #hero{
        position: relative;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: start;
        height: 40vh;
        margin: 0;
    }

    #hero .left{
        width: 100%;
        height: 60%;
        padding: 0 4%;
        box-sizing: border-box;
        font-size: 150%;
        justify-content: start;
    }

    #hero .right {
        width: 20%;
        margin: 5vh 20%;
    }

    /* Expériences */

    #experiences h2{
        font-size: 350%;
    }

    #experiences .experiences-list .exp{
        width: 90%;
        font-size: 200%;
        padding: 2vh 5vw;
        margin-bottom: 3vh;
        box-shadow: 0 0 2.5rem 0rem rgba(0, 0, 0, 0.5);
        aspect-ratio: auto;
    }
    
    #experiences .experiences-list .exp .infos{
        position: static;
        padding: 4% 0 0 0;
    }

    /* Formations */

    #formations h2{
        font-size: 350%;
    }

    #formations .formations-list{
        flex-direction: column-reverse;
        align-items: center;
    }
    #formations .formations-list .formation{
        aspect-ratio: 14/9;
        width: 90%;
        font-size: 200%;
        padding: 2vh 5vw;
        margin-bottom: 3vh;
        transform: none !important;
    }

    /* Projets */

    #projets h2{
        font-size: 350%;
    }

    #projets .projets-list{
        flex-direction: column;
        align-items: center;
    }

    #projets .projets-list .projet{
        width: 95%;
        font-size: 230%;
        padding: 2vh 5vw;
        margin-bottom: 3vh;
    }

    /* Hard Skills */

    #hard-skills h2{
        font-size: 350%;
    }

    #hard-skills .hard-skills-list{
        flex-direction: column;
        font-size: 175%;
    }

    #hard-skills .hard-skills-list .hard-skill-cat{
        width: 100%;
    }

    #hard-skills .hard-skills-list .hard-skill-cat ul{
        margin-top: 1%;
    }

    #hard-skills .hard-skills-list .hard-skill-cat ul li{
        width: 20%;
    }

    #hard-skills .hard-skills-list .hard-skill-cat ul li img{
        padding: 1vh;
        border-radius: 1.5vh;
    }
    
    /* Langues */

    #lang h2{
        font-size: 350%;
        margin-bottom: 2vh;
    }

    #lang .lang-list{
        flex-direction: column;
        font-size: 175%;
    }

    #lang .lang-list .lang{
        width: 100%;
    }

    #lang .lang-list .lang .progress{
        height: 2vh;
        border-radius: 2vh;
    }

    /* Contact */

    #contact h2{
        font-size: 350%;
    }

    
    #contact .links a{
        width: 25%;
        padding: 4%;
        border-radius: 2vh;
    }

    /* Footer */

    footer{
        font-size: 150%;
    }

    /* Tooltip */

    #tooltip {
        font-size: 300%;
    }

}