about_mazstyle.css

/* navigation bar */
html{
  background-color: #FF69B4;
}
ul {
    list-style-type: none;
    margin-left: 2%;
    margin-top: 5%;
    padding: 0;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
}
li {
  float:left;
  margin-right: 2%;
}

@charset "utf8";

*,
*:after,
*:before,
html {
    box-sizing: border-box;
  }
a:hover,
a:link,
a:visited {
  color: #0c5461;
}

}
h1 {
  text-align: center;
  color: black;
  font-size: 100%;
}
h2 {
  text-align: center;
}


p.solid {
  border-style: solid;
}
a {
  display:block;
  text-decoration:none;
}


body,
button
	{
    font-family:Tahoma,Geneva,sans-serif;
    font-style:normal;
    font-weight:400;}

body,
html
	{height:100%}

button{
	margin:0;
	border:none;
	outline:none;
	cursor:pointer;
	}

//*button:focus
	{background:#00FFFF;color:white  }*/

button,
p,
.home
	{font-size:14px}

button,
.home{
  background: transparent;
	padding:14px;
  	color:white;
	vertical-align:middle;
	}

button:hover,
{
  background: #00FFFF;
}


[class*="container"]
	{
    display:block;
    position:relative;
    float:left;
    white-space: nowrap;
  }

[class*="content"]
	{
    display:none;
    position:absolute;
    z-index:10
  }

.home,
#btnMenu
	{position:relative;
    float:left;
  }

#btnMenu,
.fa-close,
.acc
	{display:none}

.content_list:before
	{
    content:"";
    display:block;
    position:absolute;
  }

.btnList
	{width:140px}

.content_list
	{
    background:#23c4c6;
    opacity: 1;
    width:250px;
    top:45px;
  }

.content_list.left,
.content_list.left:before
	{left:0}

.content_list.center
	{left:-65px}

.content_list.center:before
	{left:50%;
    transform:translate(-50%,0);
  }

.content_list.right,
.content_list.right:before
	{right:0}

.content_list:before{
  width:8px;
	top:-8px;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:8px solid #ff5a42

	}

.container_right
	{float:right}

.container_left{

}
.content_search
	{background:#000;top:0;right:40px}

input[type=text]{
	background:#fff;
	width:100%;
	font-size:22px;
	border-radius:5px
	}

input[type=text]:focus
	{outline:none}

@media (max-width:683px){
	#btnMenu
		{display:block}

	.container_menu
		{display:none}

	.container_list
		{width:100%}

	.btnList
		{width:100%;box-shadow:0 2px 2px -2px #333}

	.drop
		{
      display:inline-block;
    }
	.acc
		{display:inline-block}

	.content_list{
		width:100%;
		top:0;
		position:relative;
		float:left
		}

	.content_list.left,
	.content_list.center,
	.content_list.right
		{left:0;right:0}

	.content_list.left:before,
	.content_list.center:before,
	.content_list.right:before
		{left:50%;transform:translate(-50%,0)}

	/* In small screen, when the "Button Nav" clicked, the "container_menu" will be replaced with the "show_menu" */

	.show_menu{
		background:#1a1a1a;
		width:100%;
		top:45px;
		display:block;
		position:absolute
		}
	}

p{
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.visible
	{display:inline-block}

.show_list
	{padding:20px 0;animation:height 1s ease}

@keyframes height{
	from{padding:0;opacity:0}
	to{padding:20px 0;opacity:1}
	}

.show_search form
	{width:150px;padding:6px;animation:width 1s ease}

@keyframes width{
	from{width:0;opacity:0}
	to{width:150px;opacity:1}
	}
[class*="show"]
  	{
      display:block;
    }

  .show_list
  	{padding:20px 0;animation:height 1s ease}


.links{
  width: 100%;
  length: 100%;

}





/* start of our code */

header{
	width: 100%;
	padding:16px;
	display:block;
	position:relative;
	z-index: 5;
	box-shadow:0 8px 6px -6px #000
	}

header h1,
header p
	{letter-spacing:3px;text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}

    .test{
      width:100%;
      min-height:200%;
      display:block;
      position:relative;
      float:left
    }


    .title{
      width:100%;
      min-height:100%;
      display:block;
      position:relative;
      float:left
    }

  body{
    font-family: "Arial", sans-serif;
    color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 50px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align:center;

  }

  .me{
  	background:url("maz1.gif")no-repeat center / contain;
  	width:60px;
  	height:60px;
  	bottom:16px;
  	right:16px;
  	position:fixed;
  	border-radius:50%;
  	z-index:999;
  	animation:me 2s linear infinite alternate
  	}

  @keyframes me{
  	from{transform:translateY(-4px)}
  	to{transform:translateY(4px)}
  	}

  .me:hover span#left
  	{right:20px;opacity:1;visibility:visible;}
  .me:hover span#right
    {right:70px;opacity:1;visibility: visible;}
  .me:hover span#center
    {right:120px;opacity:1;visibility: visible;}



  .me span{
  	width:150px;
  	top:10px;
  	right:0;
  	display:block;
  	position:absolute;
  	color:#008080;
  	font-size:16px;
  	z-index:-1;
  	opacity:0;
  	visibility:hidden;
  	transition:all .5s ease
  	}
  .me img{
    width:25%;
    height:25%;
  }

h1 {
  font-size: 300%;
}

h2#name {
  font-size: 200%;
}
p#first {
  font-size: 125%;
}

  h1 {
    text-align: center;
    color: black;
    font-size: 800;
  }
.info {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 100px;
}

img#portrait{
  padding-top: 50px;
}