html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;

    background-color: #111111;
    /* Made by Steve Schoger (https://www.heropatterns.com), licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%237e7e7e' fill-opacity='0.38'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	color: white;
    font-family: 'PT Sans Narrow', sans-serif;
    transition: all 0.5s;

    display: flex;
    justify-content: space-between;
    position: relative;
}

.big1 {
	font-size: 5rem;
	margin: 0px;
}

.big0 {
	font-size: 3.75rem;
	margin: 0px;
}

.small0 {
	font-size: 2.19rem;
	margin: 0px;
}

.tiny1 {
	font-size: 1.84rem;
	margin: 0px;
}

.tiny0 {
	font-size: 1.46rem;
	margin: 0px;
}

.verytiny1 {
    font-size: 1.34rem;
    margin: 0px;
}

.verytiny0 {
    font-size: 1.2rem;
    margin: 0px;
}

.extremelytiny1 {
    font-size: 0.96rem;
    margin: 0px;
}

.glow-big {
	text-shadow: 0 0 30px #099BE1;
}

.invisible {
    opacity: 0;
}

.glow-small {
	text-shadow:
	-1px -1px 0 #099BE1,
    1px -1px 0 #099BE1,
    -1px 1px 0 #099BE1,
    1px 1px 0 #099BE1; 
}

.bluebox {
	border-color: #099BE1;
}

.dynamicbox {
    display: inline-block;
}

.darkshade {
    background-color: rgba(0, 0, 0, 0.75);
}

/* This gives the indent a higher priority, and the margin will be applied. */
#content .indent {
    margin-left: 4em;
}

#content .indent-small {
    margin-left: 3rem;
}

p.noindent {
    padding-left: 0;
}

.flex {
    display: flex;
    align-content: center;
    justify-content: space-between;
}

.flex-left {
    flex: 1;
    text-align: left;
    margin-left: 0;
}

.flex-right {
    flex: 1;
    text-align: right;
    margin-right: 0;
}

.flex-max-small {
    max-width: 30%;
}

.pointer {
	cursor: pointer;
}

.spacer-1 {
    margin: 0.5em 0;
}

.spacer-2 {
    margin: 1em 0;
}

.button {
	transition: all 0.5s;
	cursor: pointer;
	text-shadow: 0 0 5px #099BE1;
    padding-left: 0.1em;
    padding-right: 0.1em;
}

.button:before {
  content: ">_";
  opacity: 0;
  transition: 0.5s;
}

.button:hover {
  padding-left: 0.6em;
  padding-right: 0;
  text-shadow:
	-1px -1px 0 #099BE1,
    1px -1px 0 #099BE1,
    -1px 1px 0 #099BE1,
    1px 1px 0 #099BE1; 
}

.button:hover:before {
  opacity: 1;
  left: 0;
}

.button-back {
	transition: all 0.5s;
	cursor: pointer;
	text-shadow: 0 0 5px #099BE1;
    margin-left: 0;
    font-size: 3rem;
    max-width: -moz-fit-content;
    max-width: max-content;
}

.button-back:before {
  content: "<< ";
  opacity: 0;
  transition: 0.5s;
}

.button-back:hover {
  margin-left: 3rem;
  text-shadow:
	-1px -1px 0 #099BE1,
    1px -1px 0 #099BE1,
    -1px 1px 0 #099BE1,
    1px 1px 0 #099BE1; 
}

.button-back:hover:before {
  opacity: 1;
  left: 0;
}

.url, .url:link, .url:visited {
	text-decoration: none;
	color: inherit;
	transition: all 0.5s;
	cursor: pointer;
}

.url:link:active, .url:visited:active {
	text-decoration: underline;
}

.url:before {
	content: "http://www.";
	opacity: 0;
	transition: 0.5s;
	margin-left: -6vw;
}

.url:hover {
	text-decoration: underline;
	margin-left: 6vw;
	text-shadow:
	-1px -1px 0 #099BE1,
    1px -1px 0 #099BE1,
    -1px 1px 0 #099BE1,
    1px 1px 0 #099BE1; 
}

.url:hover:before {
	text-decoration: underline;
	opacity: 1;
	left: 0;
}

.urlasis, .urlasis:link, .urlasis:visited {
	text-decoration: underline;
	color: inherit;
	transition: all 0.5s;
	cursor: pointer;
}

.urlasis:link:active, .urlasis:visited:active {
	text-decoration: underline;
}

.urlasis:hover {
	text-decoration: underline;
	text-shadow:
	-1px -1px 0 #099BE1,
    1px -1px 0 #099BE1,
    -1px 1px 0 #099BE1,
    1px 1px 0 #099BE1; 
}

.icon {
    width: auto;
    height: auto;

	max-width: 16px;
    max-height: 16px;

    vertical-align: middle;

    margin-right: 10px;
    user-select: none;
}

fieldset > p {
    padding-left: 1em;
    margin: 0;
}

#center {
    flex: 2;
    order: 0;
}

#side {
    flex: 1;
    order: 1;
    margin-top: 10rem;
}

#side-wrapper {
    max-width: 500px;
    max-height: 500px;
    position: sticky;
    /*transform: translateY(-50%);*/
    top: 1px;
}

#side-anim {
	width: 100%;
	height: auto;
}

header {
	width: 35rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo-image {
    width: auto;
    height: auto;
    max-width: 8em;
    /*max-height: 10em;*/
    flex: 3;
    user-select: none;
}

#title {
    flex: 7;
    max-width: max-content;
}

#title-text {

}

#content {
    max-width: max-content;
    display: block;
    margin: 50px 0 0 0;
    transition: all 0.5s;
}

#copyright {
    font-size: 1.46rem;
	margin: 0px;
    max-width: -moz-fit-content;
    max-width: max-content;
}

#menu {
    min-width: 350px;
}

#fieldset-contact {
    font-size: 2.19rem;
	margin: 0px;
}

@media only screen and (max-width: 1024px) {
    #side {
        display: none;
        flex:0;
    }

    header {
        margin: auto;
    }

    #menu {
        min-width: 0;
        max-width: none;
    }

    #content {
        min-width: 65%;
        margin: 5% auto auto auto;
        display: block;
    }

    .big1 {
        font-size: 5rem;
        margin: 0px;
    }

    .big0 {
        font-size: 4rem;
        margin: 0px;
    }

    .small0 {
        font-size: 2.19rem;
        margin: 0px;
    }

    .tiny1 {
        font-size: 2.2rem;
        margin: 0px;
    }

    .tiny0 {
        font-size: 1.82rem;
        margin: 0px;
    }
    
    .verytiny1 {
        font-size: 1.34rem;
        margin: 0px;
    }
    
    .verytiny0 {
        font-size: 1.2rem;
        margin: 0px;
    }
    
    .extremelytiny1 {
        font-size: 0.96rem;
        margin: 0px;
    }

    .flex-max-small {
        max-width: 50%;
    }

    .button {
        padding-left: 0.1em;
        padding-right: 0.1em;
    }
    
    .button:hover {
        padding-left: 0.6em;
    }

    .button-back {
        font-size: 2.5rem;
    }

    #content .indent {
        margin-left: 0;
    }

    #content .indent-small {
        margin-left: 0;
    }

    #fieldset-contact {
        font-size: 1.82rem;
        margin: 0px;
    }
}

@media only screen and (max-width: 600px) {
    #center {
        width: 100%;
    }

	#side {
        display: none;
        flex:0;
    }

    #content {
        width: 80%;
        margin: 5% auto auto auto;
        display: block;
    }

    #logo-image {
        max-width: 6em;
        /*max-height: 8em;*/
    }

    #title-text {
        font-size: 3.5em;
    }

    #footer {
        height: 6vw;
    }

    #fieldset-contact {
        font-size: 2.19rem;
        margin: 0px;
    }

    header {
        width: 100%;
    }

    fieldset {
        padding: 5px;
    }

    .big1 {
        font-size: 5rem;
        margin: 0px;
    }
    .big0 {
        font-size: 3rem;
        margin: 0px;
    }
    .small0 {
        font-size: 1.75rem;
        margin: 0px;
    }

    .tiny1 {
        font-size: 1.6rem;
        margin: 0px;
    }

    .tiny0 {
        font-size: 1.5rem;
        margin: 0px;
    }
    
    .verytiny1 {
        font-size: 1.4rem;
        margin: 0px;
    }
    
    .verytiny0 {
        font-size: 1.2rem;
        margin: 0px;
    }
    
    .extremelytiny1 {
        font-size: 1.7rem;
        margin: 0px;
    }

    .flex-max-small {
        max-width: 50%;
    }
    
    .button {
        padding-left: 0;
        padding-right: 0;
    }
    
    .button:hover {
        padding-left: 0.3em;
    }

    .button-back {
        font-size: 3rem;
        margin-left: -3rem;
    }

    .button-back:hover  {
        margin-left: 0;
    }
    
    .url, .url:link, .url:visited {
        text-decoration: underline;
        color: inherit;
        transition: all 0.5s;
        cursor: pointer;
    }

    .url:link:active, .url:visited:active {
        text-decoration: underline;
    }

    .url:before {
        content: "";
        opacity: 0;
        transition: 0s;
        margin-left: 0vw;
    }

    .url:hover {
        text-decoration: underline;
        margin-left: 0vw;
        text-shadow: 0 0 20px #00699D;
    }

    .url:hover:before {
        text-decoration: underline;
        opacity: 1;
        left: 0;
    }
    
    .urlasis, .urlasis:link, .urlasis:visited {
        text-decoration: underline;
        color: inherit;
        transition: all 0.5s;
        cursor: pointer;
    }

    .urlasis:link:active, .urlasis:visited:active {
        text-decoration: underline;
    }

    .urlasis:hover {
        text-decoration: underline;
        text-shadow: 0 0 20px #00699D;
    }
}