.mobile {
  height: 100%;
  position: relative;
  overflow: hidden;  
}

.contents {
  display: block;
  padding: 16px;
}







.menu {/**HABURGER**/
  display: block;
  position: absolute;
  bottom: 16px;
  right: 16px;
  background-color: #222; 
  width: 50px !important;  
  height: 50px !important;  
  border-radius: 50% !important;
  z-index: 20;
  cursor: pointer;    
	box-shadow: rgba(255,255,255, 0.25) 0px 0.0625em 0.0625em, rgba(255,255,255, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
	}

.menu:hover {
  	box-shadow: 0px 3px 8px #bbb;
	}

.menu__line {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #fff;  
  border-radius: 13px;
  transition-duration: 0.4s;  
}
.menu__line:nth-child(1) {
  top: 14px;
}
.menu__line:nth-child(2) {
  top: 23px;
}
.menu__line:nth-child(3) {
  bottom: 14px;
}
.menu.active {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;   
}
.menu.active .menu__line:nth-child(1) {
  transform: translate(-12px, 9px) rotate(-45deg);
  	width: 30px;
  	height: 4px; 
	border: 2px solid #FF0000;  
}
.menu.active .menu__line:nth-child(2) {
  transition-duration: 0s;
  opacity: 0;  
}
.menu.active .menu__line:nth-child(3) {
  transform: translate(-12px, -9px) rotate(45deg);
  	width: 30px;
  	height: 4px; 
	border: 2px solid #FF0000;  
}

.nav {
  display: block;
  position: absolute;
  bottom: 16px;  
  right: 16px; 
  background-color: #222; 
  height: 50px;
  width: 50px;
  border-radius: 50%;
  z-index: 10;
  transition-duration: 0.4s;  
}
.nav.open {
	overflow-y: auto; 
	padding-top: 3px; 
	padding-right: 3px;
	font-family: Consolas, monaco, monospace;
  	background: linear-gradient(to top, rgba(207, 255, 254, 0.3), rgba(249, 247, 217, 0.3), rgba(252, 226, 206, 0.3), rgba(255, 193, 243, 0.3)); 
  	max-width: 230px;  
	width: auto;
  	height: auto; 
	max-height: 360px; 
  	position: absolute;
  	right: 8%;
  	bottom: 10%; 
  	border-radius: 0; 
  	justify-content: center;
  	align-items: center; 
	box-sizing: border-box; 
	clear: both;  
	box-shadow: rgb(192,192,192) 0px 0px 0px 3px, rgb(169,169,169) 0px 0px 0px 6px, rgb(128,128,128) 0px 0px 0px 9px, rgb(105,105,105) 0px 0px 0px 12px, rgb(216,191,216) 0px 0px 0px 15px;  
	}

#list { 
	font-size: 14px;
	width: 100% !important; 
	height: 100% !important;
	}



/***********************************************************/
::-webkit-scrollbar {
    	width: 5px;
	}
 
::-webkit-scrollbar-track {
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    	border-radius: 10px;
	}
 
::-webkit-scrollbar-thumb {
    	border-radius: 10px; 
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  	background: #3cb0fd;
  	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	}

::-webkit-scrollbar-thumb:hover {
    	background: #7D7E94;
	}
 
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
    	background-color: #D9E8F0;
    	border: 1px solid #267DA8; 
	}
 
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
    	background-color: #D9E8F0;
    	border: 1px solid #267DA8;
	}
 
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
    	border: 1px solid #FFFFCC;
	background-color: #FFFFBF;
	}
 
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
    	border: 1px solid #FFFFCC;
	background-color: #FFFFBF; 
	}
/***************************************************/






.nav__list {
  display: none;    
}
.nav__list.show { 
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
	box-sizing: border-box;
	clear: both;   
}
.nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 100%;
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1s;
  animation-fill-mode: forwards;  
}
.nav__item:nth-child(1) {
  animation-delay: 0.2s;
}
.nav__item:nth-child(2) {
  animation-delay: 0.3s;
}
.nav__item:nth-child(3) {
  animation-delay: 0.4s;
}
.nav__item:nth-child(4) {
  animation-delay: 0.5s;
}
.nav__item:not(:last-child) {
  margin-bottom: 32px;
}
.nav__link {
  font-size: 24px; 
  letter-spacing: 0.1em;
  text-decoration: none;
  color: #fff;   
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
  }
}




/**********BEGINNING OF DYNAMIC BORDER*****************************************/
#boxing {
  --border-size111: 3px;   --border-size: 5px;
  --border-angle: 0turn;
  border-radius: 50%;
  background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
  background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
#boxing:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}
/**********END OF DYNAMIC BORDER*****************************************/