/**********************************************
  GLOBAL VARIABLES & BASE STYLES
  - These apply to all themes
**********************************************/

/* Core layout reset */
* { 
  box-sizing: border-box;
}

/* Base body styles */
body {
  padding: 10px;
  font-family: 'MS PGothic', sans-serif;
  /* Color will be set by themes */
}

/* Structural container styles */
.container {
  max-width: 55rem;
  margin: 5vw auto 12px auto;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  gap: 5px;
  /* background -> themes */
}


.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }


header {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 120px;
  border-radius: 5px;
  position: relative;
}

header span {
  font-size: 2.8rem;
  position: absolute;
  bottom: 0;
  right: 10px;
  margin: 10px;
  font-weight: bold;
}

/* Navigation structure */
nav {
  border-radius: 5px;
  padding: 5px;
}

nav div {
  text-align: center;
  font-size: 1.35rem;
  margin: 5px 5px 10px 5px;
}

nav a {
  display: block;
  margin: 5px;
  border-radius: 5px;
  padding: 2px 7px;
  text-decoration: none;
}


section {
  border-radius: 5px;
  padding: 5px;
}


footer {
  text-align: center;
  margin-bottom: 5vw;fon
  font-size: 1rem;
}

footer a { 
  text-decoration: none;
}

/* Typography structure */
h1, h2, h3, h4, h5, h6, p {
  margin: 5px;
  line-height: 1.2;
}

h1 {
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-weight: normal;
  text-align: center;
  padding-bottom: 5px;
}

h2 { 
  font-size: 1.25rem;
  font-weight: normal;
  text-align: center;
}

h3 { 
  font-size: 1.1rem;
}

h4 { 
  font-size: 1rem;
  padding-left: 12px;
}


img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
  font-style: italic;
}

/**********************************************
  DEFAULT THEME
  - Uses .default on body
**********************************************/

.default {
  --text: rgba(58, 23, 114, 0.8);
  --border: rgb(19, 44, 124);
  --accent: rgba(63, 120, 76, 0.8);
  --bg: rgba(252, 223, 166, 0.8);
  --gradientTop: rgba(220, 236, 250, 0.8);
  --gradientBottom: rgba(240, 248, 255, 0.8);

  /* Body  */
  color: var(--text);
  background-color: var(--gradientTop);
  background-image: url('/image/webpagefruitiger.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

/* Container */
.default .container {
  border: 6px ridge var(--border);
  outline: 3px solid var(--gradientTop);
  outline-offset: 4px;
  background-color: var(--gradientBottom);
  background-image: url('/image/fruitigeraeropagecontainer.png');
  background-repeat: no-repeat;
  background-size: cover;
                    
                    
}

/* Header  */
.default header {
  border: 2px ridge var(--border);
  background: url('***light mode banner image***');
}

.default header span {
  color: var(--gradientTop);
  text-shadow: 1px 1px var(--text),
              -1px 1px var(--text),
              1px -1px var(--accent),
              -1px -1px var(--accent);
}

/* Navigation  */
.default nav {
  border: 2px ridge var(--border);
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

.default nav a {
  background: linear-gradient(to right, var(--bg), var(--gradientBottom));
  color: var(--text);
}

.default nav a:hover {
  background: linear-gradient(to right, var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* Section  */
.default section {
  border: 2px ridge var(--border);
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

/* Heading  */
.default h1 {
  border-bottom: 2px ridge var(--border);
}

.default h4 {
  color: var(--accent);
}

/* Link states */
.default a:visited {
  color: rgba(198, 46, 101, 0.8);
}

/* Image borders */
.default div.small > img {
  border: 2px ridge var(--border);
}

/*link color */
 /* unvisited link */
.default a:link {
  color: rgba(63, 120, 76, 0.8);
  }



/**********************************************
  BOOKs THEME (pages books
  - Uses .bobook on body
**********************************************/

.bobook {
  --text: rgba(243, 66, 19, 0.8);
  --border: rgb(19, 44, 124);
  --accent: rgba(63, 120, 76, 0.8);
  --bg: rgba(252, 223, 166, 0.8);
  --gradientTop: rgba(220, 236, 250, 0.8);
  --gradientBottom: rgba(240, 248, 255, 0.8);

  /* Body  */
  color: var(--text);
  background-color: var(--gradientTop);
  background-image: url('/image/webpagefruitiger.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

/* Container */
.bobook .container {
  border: 6px ridge var(--border);
  outline: 3px solid var(--gradientTop);
  outline-offset: 4px;
  background-color: var(--gradientBottom);
  background-image: url('/image/bookafter.png');
  background-repeat: no-repeat;
  background-size: cover;
                    
                    
}

/* Header  */
.bobook header {
  border: 2px ridge var(--border);
  background: url('***light mode banner image***');
}

.bobook header span {
  color: var(--gradientTop);
  text-shadow: 1px 1px var(--text),
              -1px 1px var(--text),
              1px -1px var(--accent),
              -1px -1px var(--accent);
}

/* Navigation  */
.bobook nav {
  border: 2px ridge var(--border);
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

.bobook nav a {
  background: linear-gradient(to right, var(--bg), var(--gradientBottom));
  color: var(--text);
}

.bobook nav a:hover {
  background: linear-gradient(to right, var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* Section  */
.bobook section {
  border: 2px ridge var(--border);
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

/* Heading  */
.bobook h1 {
  border-bottom: 2px ridge var(--border);
}

.bobook h4 {
  color: var(--accent);
}

/* Link states */
.bobook a:visited {
  color: rgba(198, 46, 101, 0.8);
}

/* Image borders */
.bobook div.small > img {
  border: 2px ridge var(--border);
}

/*link color */
 /* unvisited link */
.bobook a:link {
  color: rgba(63, 120, 76, 0.8);
  }



/**********************************************
  Lets's play THEME (bubulles et manettes)
  - Uses .spelen on body
**********************************************/

.spelen {
  --text: rgba(243, 66, 19, 0.8);
  --border: rgb(19, 44, 124);
  --accent: rgba(63, 120, 76, 0.8);
  --bg: rgba(252, 223, 166, 0.8);
  --gradientTop: rgba(220, 236, 250, 0.8);
  --gradientBottom: rgba(240, 248, 255, 0.8);

  /* Body  */
  color: var(--text);
  background-color: var(--gradientTop);
  background-image: url('/image/backgroud.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

/* Container */
.spelen .container {
  border: 6px ridge var(--border);
  outline: 3px solid var(--gradientTop);
  outline-offset: 4px;
  background-color: var(--gradientBottom);
  background-image: url('/image/bookafter.png');
  background-repeat: no-repeat;
  background-size: cover;
                    
                    
}

/* Header  */
.spelen header {
  border: 2px ridge var(--border);
  background: url('***light mode banner image***');
}

.spelen header span {
  color: var(--gradientTop);
  text-shadow: 1px 1px var(--text),
              -1px 1px var(--text),
              1px -1px var(--accent),
              -1px -1px var(--accent);
}

/* Navigation  */
.spelen nav {
  border: 2px ridge var(--border);
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

.spelen nav a {
  background: linear-gradient(to right, var(--bg), var(--gradientBottom));
  color: var(--text);
}

.spelen nav a:hover {
  background: linear-gradient(to right, var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* Section  */
.spelen section {
  border: 2px ridge var(--border);
  background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

/* Heading  */
.spelen h1 {
  border-bottom: 2px ridge var(--border);
}

.spelen h4 {
  color: var(--accent);
}

/* Link states */
.spelen a:visited {
  color: rgba(198, 46, 101, 0.8);
}

/* Image borders */
.spelen div.small > img {
  border: 2px ridge var(--border);
}

/*link color */
 /* unvisited link */
.spelen a:link {
  color: rgba(63, 120, 76, 0.8);
  }
  
  
/**********************************************
  FUTURE THEMES TEMPLATE
  - Copy for new themes
  - Change class name
  
ex :
.dark-theme {
  --text: #ffffff;
  --border: #444444;
  --accent: #4db8b8;
  --bg: #2a2a2a;
  --gradientTop: #1a1a1a;
  --gradientBottom: rgba(30, 30, 30, 0.8);
  
  (Then copy all same element from .default)
}
**********************************************/