/* Minimalistic style by Jacolien van Rij, 2019 */

/*! Generated by Fontspring (https://www.fontspring.com) on August, 2019 
* 
* Fully installable fonts can be purchased at http://www.fontspring.com
*
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Fontspring. The fonts are protected under domestic and international trademark and 
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
* distributing this font software.
*
* (c) 2010-2019 Fontspring
*
*
*/

/*pixels/16=em*/
:root {
  --main-width: 700px;
  --main-col-one: #000000;
  --main-col-two: #ef0000; 
  --main-col-three: #ccc; 
  --main-col-four: #ff6600; 
  --main-col-five: #eee; 
}

@font-face {
    font-family: 'kg_summer_storm_roughregular';
    src: url('./Fonts/kgsummerstormrough-webfont.woff2') format('woff2'),
         url('./Fonts/kgsummerstormrough-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
  box-sizing: border-box;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  color: #333;
}

a {
  text-decoration: none;
  color: var(--main-col-two);
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  color: var(--main-col-four);
  font-weight: bold;
  /*font-style: oblique;*/
}

ul {
  list-style-type: square;
}

red {
  color: var(--main-col-two);
  font-family: "kg_summer_storm_roughregular", "Open Sans", Arial, Helvetica, sans-serif;
}

bold {
  font-weight: bold;
  color: #000;
}

myname {
  text-decoration: underline; 
}


/* Style enter page */
#start{
  margin: auto;    
  padding: 50px 10px 5px 10px;
  text-align: left;
  width: var(--main-width);
  margin: 10px auto 5px auto;
}

/* Create two columns that floats next to each other */
.column {
  float: left;
  padding: 15px;
}
.column.left{
  width: 33.33%;
}
.column.right {
  width: 66.67%;
  padding-top: 25px;
}

/* Clear floats after the columns */
/*.row:after {
  content: "";
  display: table;
  clear: both;
}
*/

/*Image start page*/
#imgstart {
  float:right;
  margin: 10px; 
  transform: rotate(5deg); 
}

/* Style the header */
.header {
  padding: 5px 10px;
  text-align: left;
  width: var(--main-width);
  margin: 10px auto 5px auto;
}

h1 {
  font-family: "kg_summer_storm_roughregular", "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 2em;
}
h1 a{
  font-family: "kg_summer_storm_roughregular", "Open Sans", Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: var(--main-col-two);
}
h1 a:hover{
  font-family: "kg_summer_storm_roughregular", "Open Sans", Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: var(--main-col-four);
}


/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: var(--main-col-two);
  width: var(--main-width);
  margin: auto;
  border-radius: 1px 1px 1px 1px;
  border-style: double;
  border-color: white;
  border-width: 0 10px 0 10px;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 3px 20px;
  text-decoration: none;
  font-style: normal;
  line-height: 25px;
  vertical-align: middle;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* to avoid image beging to heigh */
.clearfix {
  overflow: auto;
}


/* Style the content */
.content {
  border-radius: 20px;
  width: var(--main-width);
  margin: 20px auto 20px auto;
  padding: 10px;
}

/*indented text block*/
p.indent {
  padding: 0 50px;
}

.code{
  margin: 10px 50px;
  padding: 10px;
  background-color: var(--main-col-five);
  font-family: monospace;
  font-size: 1.1em;
  line-height: 1.5;

}

/* Style the footer */
.footer {
  background-color: var(--main-col-three);
  width: var(--main-width);
  margin: 20px auto 50px auto;
  border-radius: 1px 15px 15px 1px;
  border-style: double;
  border-color: white;
  border-width: 0 0 0 10px;
}
p.footer {
  padding: 3px 20px;
  border-style: none;
}

/*Style the collapsible divs
Code from: https://alligator.io/css/collapsible/*/
.wrap-collabsible {
  /*margin-bottom: 1.2rem 0;*/
  margin: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;
  cursor: pointer;
  transition: all 0.25s ease-out;
  color: var(--main-col-two);
  font-weight: bold;
}

.lbl-toggle:hover {
  text-decoration: none;
  color: var(--main-col-four);
  font-weight: bold;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 1000px;
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  padding: 5px 50px;
}