@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

body, html {
	padding: 0;
	margin: 0;
	font-size: 13px;
	background: black;
	color: #ffffff;
	font-family: 'Source Code Pro', monospace;
	font-size: 12px;
}

img {
	max-width: 100%;
}

img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.shake {
  position: fixed;
  bottom: 25;
  right: 33;
}
.page {
	padding: 24px;
	background-color: black;
}

.page h1:first-child {
	margin-top: 0;
}

.header-image {
	height: 150px;
	margin: 40px auto;
	display: block;
}

.wrapper {
	margin: auto;
	margin-top: 24px;
	width: 753px;
}

.menu {
	text-align: center;
	margin-bottom: 24px;
	margin-top: 24px;
}
* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column {
  float: left;
  padding: 5px; /* Should be removed. Only for demonstration */
}

.left1 {
  width: 30%
}

.right1 {
  width: 70%;
}
.left2 {
  width: 50%
}

.right2 {
  width: 50%;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.menu a {
	color: #ffffff;
}
.center { text-align: center; }
.main {
	height: 464px;
	width: 728px;
	background-image: url('https://i.postimg.cc/d1n09w21/notepad.webp');
	position: relative;
}

.main iframe {
	position: absolute;
	top: 32px;
	left: 3px;
	width: 725px;
	height: 410px;
}


h1 {
	border-bottom: 1px solid #ffffff;
	font-size: 20px;
}

h2 {
	font-size: 15px;
	text-shadow: 2px;
}

.tooltip1 {
  margin-left: 3em;
  margin-right: center;
        justify-content: center;
    width: 74px; height: 70px;
    background-color: #140D13;  text-align: center; display: inline-block;
    position: relative;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    align-items: center;
}
    .tooltip2 {
    margin: auto;
        justify-content: center;
    width: 74px; height: 70px;
    background-color: #2C1F29;  text-align: center; display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
       position: relative;
        align-items: center;
}
    .tooltip3 {
    margin: auto;
    justify-content: center;
    width: 74px; height: 70px;
    background-color: #3F2B3A;  text-align: center; display: inline-block;
       position: relative;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
    .tooltip4 {
    margin: auto;
        justify-content: center;
    width: 74px; height: 70px;
    background-color: #FEEDFB;  text-align: center; display: inline-block;
       position: relative;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
    .tooltip5 {
    margin: auto;
        justify-content: center;
    width: 74px; height: 70px;
    background-color: #EAB5CC;  text-align: center; display: inline-block;
       position: relative;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
   .tooltip6 {
    margin: auto;
        justify-content: center;
    width: 74px; height: 70px;
    background-color: #DA7794;  text-align: center; display: inline-block;
       border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
 position: relative; }
   .tooltip7 {
    margin-right: 3em;
        justify-content: center;
    width: 74px; height: 70px;
    background-color: #A05577;  text-align: center; display: inline-block;
       border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
 position: relative;}
/* Tooltip text */
.tooltip1 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #080808;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip1 .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.notification.closed {
  display: none;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip1:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tooltip2 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #080808;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip2 .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tooltip3 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #080808;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip3 .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip3:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tooltip4 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #080808;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip4 .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip5 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #080808;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip5 .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip5:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip4:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tooltip6 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #080808;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip6 .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip6:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tooltip7 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #080808;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip7 .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip7:hover .tooltiptext {
  visibility: visible;
	opacity: 1; }
a {
	color: #ffffff;
}
/* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.container {
  width: 100%; /* Full width */
  background-image: url(https://i.postimg.cc/FFwKVwYj/5ad4ae36f2b1fe55322aa25f87675dac.jpg); /* Grey background */
}

.skills {
  text-align: center; /* Right-align text */
  padding-top: 5px; /* Add top padding */
  padding-bottom: 5px; /* Add bottom padding */
  color: black; /* White text color */
}

.strength {width: 40%; background-color: #ffffff;} /* Green */
.agility {width: 73%; background-color: #ffffff;} /* Blue */
.endurance {width: 95%; background-color: #ffffff;} /* Red */
.strategy {width: 88%; background-color: #ffffff;} /* Dark Grey */
table {
	border-collapse: collapse;
}

.button {
  justify-content: center;
  background-color: #ffffff; /* Green */
  border: none;
  color: #000000;
  padding: 9px 32px;
  font-family: monospace;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.button:hover {
  background-image: url(https://i.postimg.cc/tTkrgQHm/402107790-STATIC-NOISE-400.gif);
  color: white;
}

.warning {
  text-align: center;
  border-style: double;
  padding: 2em
}

td, th {
	vertical-align: top;
	border: 1px solid #ffffff;
	padding: 3px 6px;
}

th {
	background: #ffffff;
	color: black;
}

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

.border {
	padding: 3px;
	border: 1px solid #ff00b9;
}

table.border-0 th, table.border-0 td {
    border: 0;
}

.border-0 {
    border: none;
}