/* Font Declarations */
@font-face{font-family:bold  ;src:url("/assets/fonts/bold.woff2");}
@font-face{font-family:medium;src:url("/assets/fonts/medium.woff2");}
@font-face{font-family:light ;src:url("/assets/fonts/light.woff2");}
@font-face{font-family:thin  ;src:url("/assets/fonts/thin.woff2");}

/* General settings */
:root {
    --black: #0d0a0bff;
    --gray: #454955ff;
    --gray-127a: #4549557f;
    --gray-200a: #454955c8;
    --white: #f3eff5ff;
    --green: #72b01dff;
    --darker-green: #3f7d20ff;
    background-color: var(--white);
    color: var(--green);
    font-family:medium;
    padding:0 0;
}

h1, h2, h3 {font-family:bold}
button {font-family:light;}

/* Header */
#header {
    position:fixed;
    top:0;left:0;
    width:100%;
    height:10%;
    background-color:var(--black);
    color:var(--white);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:1s;
}

#header-img {
    border-radius:50%;
    position:absolute;
    top:10%;
    left:1%;
    height:80%;
    transition:.1s;
}

#header-img:hover {
    border-radius:25%;
    transition:.3s;
}

.header-button {
    background-color: rgba(0,0,0,0);
    color:var(--white);
    transition:.3s;
    width:10%;
    height:100%;
    border:none;
}

.header-button:hover {
    background-color: var(--gray);
}

.header-button-ipop {
    background-color: rgba(0,0,0,0);
    color:var(--white);
    transition:.3s;
    width:100%;
    height:100%;
    border:none;
}

.header-button-ipop:hover {
    background-color: var(--gray);
}

.header-button-popper {width:10%;height:100%;}
.header-button-pop {position:relative;background-color:var(--gray-200a);opacity:0;height:0;width:auto;transition:.3s;padding:0;display:flex;flex-direction:column;}
.header-button-popper:hover .header-button-pop {opacity:1;height:180%;padding:1vw;}

.hyperlink-underline {
    text-decoration:none;
    color: var(--white);
    transition:.3s;
    margin-right:1vh;
    text-decoration:none;
    background-image: linear-gradient(var(--white), var(--white));
    background-size: 0% 30%;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.hyperlink-underline:hover {background-size:100% 10%;}

.header-button-popper .hyperlink-underline {width:0;height:0;opacity:0;transition:.0s;}
.header-button-popper:hover .hyperlink-underline {width:auto;height:auto;opacity:1;transition:.3s;}

/* Containers */
.section {
    position:absolute;
    width:100%;height:100%;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.clickable-image{
    border-radius:3px;
    box-shadow: 0px 0px 0px transparent;
    transition: all ease 1s;
    margin-top:10px;
    margin-bottom:0px;
}

.clickable-image:hover {
    box-shadow: 3px 10px 3px #b0b0b0;
    margin-top:0px;
    margin-bottom:10px;
}

.stylish-button {
    color:var(--white);
    background-color:var(--green);
    border: 0;
    border-radius: 0;
    transition:1s;
    padding:5%;
}

.stylish-button:hover{
    background-color:var(--darker-green);
}