@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz&display=swap');
:root { /* for color scheme changes */
	--bg-color: #EFD9CE;
	--title-color: #5E4C5A;
	--textt-color: #6BAB90;
	--navbar-color: #CEA2AC;
	--navbar-hover: #e0cdc3; 
}

body {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	background-color: var(--bg-color);
	margin-top: -2px;
}

h1 {
	color: var(--title-color);
	font-size: 2.7em;
	padding: 40px 0 0 0;
}

h2 { 
	color: var(--textt-color);
	font-size: 2em;
}

.nav-area li a {
        color: var(--navbar-color);
        text-decoration: none;
        padding: 5px 20px;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 23px;
        text-transform: uppercase;
}

.nav-area li a:hover{
        background: var(--navbar-hover);
}

.skill-list li {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
        margin: 15px 0px;
        font-size: 1.5em;
        text-align: left;
        list-style-type: none;
        color: #254441; 

}

.content {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
 	display: -webkit-flex;
  	display: -moz-flex;
  	display: -ms-flex;
  	display: -o-flex;
	display: flex;
	flex-direction: column;
	flex: 1;
}


.nav-area {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  	display: -webkit-flex;
  	display: -moz-flex;
  	display: -ms-flex;
  	display: -o-flex;
	display: flex;
	justify-content: flex-end;
}

.nav-area li{
    display: inline-block;
}

.skill-list {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  	display: -webkit-flex;
  	display: -moz-flex;
  	display: -ms-flex;
  	display: -o-flex;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0em;
	margin: 0em 2em;
	flex-wrap: wrap;
}

.home-article {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  	display: -webkit-flex;
  	display: -moz-flex;
  	display: -ms-flex;
  	display: -o-flex;
  	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 5em;
	font-size: 2em;
}

.subpage-article {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  	display: -webkit-flex;
  	display: -moz-flex;
  	display: -ms-flex;
  	display: -o-flex;
  	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/*width: 100%;*/
	height: 5em;
	font-size: 2em;
}

.article-box {
	margin-left:100px;
	margin-right:100px;
}

.about-pic {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  	display: -webkit-flex;
  	display: -moz-flex;
  	display: -ms-flex;
  	display: -o-flex;
	display: block;
	margin: 10em;
	align-items: center;
	justify-content: center;
}
.blob {
  position: absolute;
  top: 0;
  left: 0;
  fill: #023F92;
  width: 50vmax;
  z-index: -1;
  animation: move 10s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes move {
  0%   { transform: scale(1)   translate(10px, -30px); }
  38%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
  40%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
  78%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
  80%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
  100% { transform: scale(1)   translate(10px, -30px); }
}

section{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  	display: -webkit-flex;
  	display: -moz-flex;
  	display: -ms-flex;
 	display: -o-flex;
  	display: flex;
	justify-content: center;
}

iframe{
	border: 0em;
	display: inherit;
	height: 67em;
	margin: 2em auto;
	overflow: hidden;
	width: 50em;
}
strong {
	font-weight: 900;
	color: var(--title-color);
}

footer {
  position: fixed;
  left: 0;
  color: var(--navbar-color);
  bottom: 0;
  width: 100%;
  text-align: center;
}

.footer-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	list-style-type: none;
	background-color: var(--bg-color);
	height: 50px;
	margin: 0px;
	padding:0px;
	align-items: center;
}
.footer-list li {
	width: 350px;	
}

.footer-list ul {
}
a:link {
	  color: var(--navbar-color);
	  text-decoration: none;
  }

a:visited {
	  color: var(--navbar-color);
    }

a:hover {
	  color: var(--navbar-color);
      }

a:active {
	  color: var(--navbar-color);
  }	  
canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 100px;
}