:root {
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    --font--medium: 22px;
    --font--large: 30px;
    --font--title: 35px;
    --box--radius: 5px;
    --shadow--color: #1d1d1d;
    --verytiny--shadow: 1px 1px 2px var(--shadow--color);
    --tiny--shadow: 2px 2px 2px var(--shadow--color);
    --small--shadow: 3px 3px 3px var(--shadow--color);
    --large--shadow: 5px 5px 5px var(--shadow--color);
    --box--light--border: rgb(185, 185, 185);
    --box--border: rgb(61, 61, 104);
    --box--background: rgb(255,255,255);
    --font--title--color: rgb(245, 170, 7);
    --activecmd--color: rgb(245, 170, 7);
    --article--box--color:  rgb(235, 179, 179);
    --article--box--color2:  rgba(235, 179, 179, 0.6);
    --font--color: rgb(61, 61, 104);
    --hover--selected: rgb(209, 209, 209);
    --hover--dark: rgb(17, 15, 122);
    --body--color:  rgb(206, 229, 255);
    --header--color: rgb(69, 112, 231);
    --calandar--color: var(--header--color);
    --calandar--cell--color: var(--font--title--color);
    --calandar--active: rgb(111, 109, 250);
    --font--activity--color: var(--font--title--color);

    color: var(--font--color);
}

body {
    margin: 0;
    background-color: var(--body--color);
}

body::-webkit-scrollbar {
    display: none;
}

#maskmenu {
    z-index: 1060;
}

#maskother {
    z-index: 1069;
    background-color: var(--body--color);
    opacity: 0.8;
}

#hidden {
    display: none;
}

.mask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    visibility: hidden;  
}

.content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    visibility: hidden; 
    z-index: 1070; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#animbox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2000;
    overflow: hidden; 
    pointer-events: none;
}

.fish {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background-size: 100% 100%;
    animation-name: fishtrack , fishrotate;
    animation-timing-function: linear , ease-in-out;
}

.fishtim1 {
    animation-iteration-count: 1 , 10;
    animation-duration: 5s, 0.5s;
}

.fishtim2 {
    animation-iteration-count: 1 , 10;
    animation-duration: 3s, 0.3s;
}

.fishtim3 {
    animation-iteration-count: 1 , 10;
    animation-duration: 2s, 0.2s;
}

.fishdir1 {
    animation-direction: normal , alternate;
}

.fishdir2 {
    animation-direction: reverse , alternate;
}

@keyframes fishtrack {
    from {
      left: -100px;
    }
  
    to {
      left: 100%;
    }
}

@keyframes fishrotate {
    from {
      transform: rotate(15deg);
    }
    to {
      transform: rotate(-15deg);
    }
}

#titre {
    font-size: var(--font--large);
    font-weight: 700;
    font-style: italic;
    text-shadow: var(--tiny--shadow);
    color: var(--font--title--color);
    cursor: url("../pictures/icons/cursor-share.png"), pointer;
}

#logo img {
    filter: drop-shadow(1px 1px 1px #1d1d1d);
    height: 70px;
    cursor: url("../pictures/icons/cursor-home.png"), pointer;
}

#header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--header--color);
    padding-bottom: 10px;
    z-index: 1060;
}

#smooth {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 15px;
    width: 100%;
    background-image: linear-gradient(to bottom, var(--header--color), var(--body--color));
}

#menu-box {
    position: relative;
    margin-right: 10px;
    z-index: 1061;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu {
    border: 2px solid rgba(0, 0, 0, 0);
    transition: border-color 1s , background-color 1s;
    border-radius: var(--box--radius);
    padding: 0px 5px;
    cursor: pointer;
}

#menu:hover {
    border-color: rgb(255, 255, 255);
    background-color: var(--hover--dark);
}

#menu img {
    width: 40px;
    filter: drop-shadow(var(--small--shadow));
}

nav {
    margin-top: 6px;
    position: absolute;
    right: -10px;
    border: 2px solid var(--box--border);
    border-radius: var(--box--radius);
    box-sizing: border-box;
    visibility: hidden;
    overflow: hidden;
    max-height: 0px;
	transition: 1s max-height;
    font-size: var(--font--medium);
    background-color: var(--box--background);
}

nav a {
    text-decoration: none;
    color: var(--font--color);
}

.menu-item {
    padding: 0px 10px;
    background: linear-gradient(var(--header--color), 1%, rgb(255,255,255), 95%, var(--header--color));
    margin: 2px 2px;
    padding: 2px 10px;
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    transition: background-color 1s;
    min-width: 165px;
    cursor: pointer;
    color: var(--font--title--color);
    text-shadow: var(--verytiny--shadow);

}

.menu-item:hover {
    background: none;
    background-color: var(--header--color);
    font-weight: 700;
    color: rgb(255,255,255);
}

.imbeddoc {
    width: 100%;
    height: 700px;
    display: none;
}

.text-link {
    text-decoration: underline;
    font-weight: 700;
    transition: background-color 1s;
    color: var(--font--color);
    cursor: pointer;
}

.text-link:hover {
    background-color: var(--hover--selected);
}

.people-title
{
    font-size: var(--font--medium);
}
    
.people-overlay-box
{
    display: flex;
    width: 350px;
    box-sizing: border-box;
    align-items: center;
}

.people-picture img
{
    max-height: 100%;
}

.people-picture
{
    margin: 5px;
    border: 1px solid var(--box--light--border);
    height: 100px;
}

.people-text
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
}

.people-role
{
    text-align: center;
    font-weight: 700;
    font-size: var(--font--medium);
}

.people-name
{
    font-weight: 700;
}

#overlayframe {
    border: 2px solid var(--box--border);
    border-radius: var(--box--radius);
    background-color: var(--box--background);
    padding: 5px;
    margin: 5px;
    box-shadow: var(--small--shadow);
    min-width: 300px;
    z-index: 1070;
}

#overlaytitle {
    text-align: center;
    font-size: var(--font--medium);
    font-weight: 700;
}

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

#overlaycommands {
    display: flex;
    justify-content: flex-end;
}

#overlayclose {
    width: 26px;
    height: 26px;
    border: 2px solid rgb(48, 48, 48);
    box-sizing: border-box;
    border-radius: 2px;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: background-color 0.5s;
    background-image: url("../pictures/icons/OK.png");
}

#overlayclose:hover {
    background-color: var(--hover--selected);
}

.nohelp {
    display: none;
}


@media screen and (min-width: 780px) {
    #titre {
        font-size: var(--font--title);
    }

    #logo img {
        height: 100px;
    }
    
    #header {
        background-image: url("../pictures/Saint-egreve.png");
        background-size: 100% 100%;
    }

    #smooth {
        background-image: linear-gradient(to bottom, rgba(206, 229, 255, 0), var(--body--color));
    }
   
}