@charset "utf-8";
/* CSS Document */
:root {
    --my-color:#1893d1;
    --my-bg-color:#FFF;
    --my-highlight-color:#F80;
    --my-shadow-color:#444;
}

@media (prefers-color-scheme: dark) {
    :root {
        --my-color:#A00;
        --my-bg-color:#000;
        --my-highlight-color:#AAA;
        --my-shadow-color:#888;
    }
}

/* General style */
* {
    font-family:"Roboto", "Courier New", "Comic Sans MS", cursive, Courier, monospace, sans-serif;
    color:#666;
    box-sizing: border-box;  /* Width include padding and boder */
}

body {
    background-color: var(--my-bg-color);
}

div {
    padding:5px;
}

h1 {
    text-align:center;
}

h2 {
    font-style: italic;
    font-weight: bold;
}

h3 {
    color: #999;
}

img {
  width: 100%;
  height: auto;
  background-color: var(--my-color);
}

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

a:hover {
    text-shadow:-3px -3px 10px #666;
}

section {
    margin: auto;
}

.center {
    text-align:center;
    margin:20px auto;
    max-width:520px;
    width: 100%;
}

.border {
    border:1px solid var(--my-color);
    min-height: 75px;
}

/* Video */
iframe {
    height:240px;
    width:426px;
    border:2px solid #666;
}

/* Table */
table {
    width: 100%;
}

td {
    max-width:120px;
    overflow-wrap: break-word;  /* email adress is nicely displayed */
}

/* Aside */
aside {
    display: block;
    width: 100%;
    padding:15px 10px;
    z-index:3;
    text-align:center;
    background-color: var(--my-bg-color);
    box-shadow:0px 0px 10px var(--my-shadow-color);
}

aside:hover {
    box-shadow:0px 0px 20px var(--my-shadow-color);
}

aside td {
    min-width: 80px;
}

aside tr td:first-child {
    text-align:left;
}

#profilePic {
    width: 230px;
    height: 284px;
    padding: 0px;
    margin: auto;
}

/* Header */
header {
    position:fixed;
    top:0px;
    right:0px;
    width:100%;
    height:70px;
    text-align:center;

    /* Box effect */
    box-shadow:0px 5px 10px var(--my-shadow-color);
    z-index:5;
    background-color: var(--my-bg-color);
    opacity:0.8;
}

header:hover {
    box-shadow:0px 10px 20px var(--my-shadow-color);
    background-color: var(--my-bg-color);
}

.bufferDiv {
    height: 80px;
}

/* Footer */
footer {
    position:fixed;
    bottom:0px;
    right:0px;
    width:100%;
    height:70px;
    text-align:center;

    /* Box effect */
    box-shadow:0px -5px 10px var(--my-shadow-color);
    z-index:4;
    background-color: var(--my-bg-color);
    opacity:0.8;
}

footer:hover {
    box-shadow:0px -10px 20px var(--my-shadow-color);
    background-color: var(--my-bg-color);
}

/* Space Invader */
.bg-pixel {
    fill: var(--my-bg-color);
}
.fg-pixel {
    fill: var(--my-color);
}
.bg-pixel:hover {
    fill: var(--my-highlight-color);
}
.fg-pixel:hover {
    fill: var(--my-highlight-color);
}

/* Responsive part */

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  aside {
    position: fixed;
    top: 90px;
    max-width: 250px;
  }
}