/* general CSS elements */

/* Roboto sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
/* Merriweather serif */
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');

:root {
    --codebar: #04aa6d;
    --headerfooterbg: #76bfec;
    --headerfootertxt: #031eb6;
    --tagbg: #69F0AE;
    --tagtxt: #1B5E20;
    --headerfooterhover: #726a95;
    --logofont: 'Merriweather', serif;
}


html{
    scroll-behavior: smooth;
}

body{
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

a{
    text-decoration: none;
}

.pr-30perc{
	padding-right: 30%;
}

.pl-30px{
	padding-left: 30px;
}

.pr-30px{
	padding-right: 30px;
}

.flex-column{
	display: flex;
	flex-direction: column;
}

/* 
 * a background:
 * using 2 background: none and linear-gradient(to right, var(), var())
 * when it's not hover, it displays the first one (none)
 * when it's hover, it displays the second one (linear-gradient)
 */
.linkunderline{
    background:
        none,
        linear-gradient(to right, var(--tagbg), var(--tagtxt)
    );
    background-size: 100% 2px, 0 2px; /* background: none */
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}
/*
 * background-size on hover:
 * first background (none) is hidden (0 width)
 * second (linear-gradient) is visible (100% width and 3px height to put it in the bottom)
 */
.linkunderline:hover{
    background-size: 0 2px, 100% 2px;
}