:root {

  /** Background colors */
  --bg-white: hsla(0, 0%, 100%, 1);
  --bg-grey: hsla(197, 10%, 87%, 1);

  /** Text colors */
  --text-white: hsla(0, 0%, 100%, 1);
  --text-red: red;
  --text-green: green;
  --text-blue: blue;
  --text-black: black;

  /** Gradient colors */
  --gradient-1: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%);
  --gradient-2: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea);
  --gradient-3: linear-gradient(0deg, #000d1a, transparent);

  /** Border colors */
  --border-prussian-blue: hsla(216, 33%, 20%, 1);
  --border-white: hsl(0, 0%, 100%);
  --border-white-alpha-15: hsla(0, 0%, 100%, 0.15);

  /** Default colors */
  --white: hsl(0, 0%, 100%, 1);
  --black: hsl(0, 0%, 0%, 1);

  /** Font family */
  --fontFamily-noto_sans: 'Noto Sans', sans-serif;
  --fontFamily-varela_round: 'Varela Round', sans-serif;
  --fontFamily-dancing_script: 'Dancing Script', sans-serif;
  --fontFamily-cambria_serif: 'Cambria', 'Georgia', serif;

  /** Font size */
  --fontSize-1: 2.9rem;
  --fontSize-2: 2.0rem;
  --fontSize-3: 1.8rem;
  --fontSize-4: 1.6rem;
  --fontSize-5: 1.5rem;
  --fontSize-6: 1.4rem;
  --fontSize-7: 1.3rem;
  --fontSize-8: 1.2rem;

  /** Font weight */
  --weight-medium: 500;
  --weight-semiBold: 600;
  --weight-bold: 700;
  --weight-extraBold: 800;

  /** Line height */
  --lineHeight-1: 1.3;
  --lineHeight-2: 1.5;
  
  --shadow-1: 0 8px 20px 0 hsla(0, 0%, 0%, 0.05);
  --shadow-2: 0px 3px 20px hsla(180, 90%, 43%, 0.2);

  --radius-6: 6px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-48: 48px;
  --radius-circle: 50%;
  --radius-pill: 200px;

  --section-padding: 70px;

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
/*  font-size: 10px;*/
  scroll-behavior: smooth;
}

body
{
	font-family: var(--fontFamily-varela_round);
	background:#f4f4f4;
	margin:0;
	padding:0;
	overflow-y: overlay;
	user-select: none;
}

.clear
{
	clear:both;
}

#main-footer p
{
	background:#fff;
	color:#222;
	font-family: 'Varela Round', sans-serif;
	font-size:12px;
	text-align:center;
	padding:20px;
	margin-top:20px;
/*	border: 2px dashed orange;*/
}

/* ====================== ====================== ====================== ====================== */
/* ====================== responsive for screen < 360px ====================== */
@media (width < 320px) or (min-width: 320px)
{
  :root
  {
    /* font size */
    --fontSize-1: 4.4rem;
    --fontSize-2: 3.5rem;

    --section-padding: 100px;
  }

  .container
  {
    margin-inline: auto;
  }
  
  .nav-a1
  {
	height:38px;
	width:90px;
/*	border:2px solid red;*/
  }

  #navbar
  {
	min-height:95px;
  }

  .container3 ul li a
  {
	font-size:13px;
  }
  
  .container3 ul li ul li a
  {
	font-size:11px;
  }
  
  .top-full
  {
	min-height: 30px;
	font-size: 16px;
/*	border: 2px solid blue;*/
  }

  .top-full_span1
  {
	font-size: 16px;
	letter-spacing: 1px;
/*	animation: span1_animation 5s infinite;*/
  }

  @keyframes span1_animation
  {
	50%
	{
		font-size: 18px;
		letter-spacing: 4px;
	}
  }

  .middle
  {
	grid-column: 2/20;
  }
  
  .works_middle
  {
	grid-column: 2/20;
  }

  article
  {
	padding: 5px;  
  }
  
  article h1
  {
	font-size:20px;
  }
  
  .works_article_content
  {
	grid-column: 2/20;
  }

  .works_article_content_sub
  {
	grid-column: 3/48;
  }

  .article_content p
  {
	font-size:14px;
  }

  .middle-post_info p
  {
	font-size: 12px;
  }
  
  .article_ps p
  {
	text-indent:0px;
  }

  .tag p,
  .tag a,
  .pagination p,
  .pagination a,
  .article_tag p,
  .article_tag a
  {
	font-size: 10px;
  }

  .right-aside
  {
	grid-column: 2/20;
  }
  
  .right-aside-post_img
  {
	height: 50%;
	margin-left: 3px;
	border-radius: 3px;
  }

  .right-aside-post h3
  {
	font-size: 12px;
	margin-top: 3px;
	margin-left: 5px;
  }

  .right-aside
  {
	font-size: 14px;
  }

  .works_middle-post_img
  {
	grid-column: 2/20;
	margin-top: 5%;
/*	border: 1px dashed red;*/
  }

  .works_middle-post_img img
  {
	width: 90%;
	padding-left: 10%;
/*	border: 1px dashed red;*/
  }

  .works_middle_post_img_sub
  {
	grid-column: 3/48;
/*	margin-top: 5%;*/
/*	border: 1px dashed red;*/
  }

  .works_middle_post_img_sub img
  {
	width: 50%;
	margin-left: 25%;
/*	border: 1px dashed red;*/
  }

  .works_middle_imsges_left
  {
	grid-column: 2/20;
  }
  
  .works_middle_imsges_right
  {
	grid-column: 2/20;
  }

  .works_middle_imsges_left img
  {
	width: 86%;
	margin-left: 7%;
  }

  .works_middle_imsges_right img
  {
	width: 86%;
	margin-left: 7%;
  }

}

/* ====================== responsive for screen >= 360px ====================== */
@media (min-width: 360px)
{
  :root
  {
    /* font size */
    --fontSize-1: 4.4rem;
    --fontSize-2: 3.5rem;

    --section-padding: 100px;
  }

  .container
  {
    margin-inline: auto;
  }

  .nav-a1
  {
	height:42px;
	width:100px;
/*	border:2px solid red;*/
  }

  #navbar
  {
	min-height:100px;
  }

  .container3 ul li a
  {
	font-size:14px;
  }

  .container3 ul li ul li a
  {
	font-size:12px;
  }

  .top-full
  {
	min-height: 35px;
	font-size: 17px;
/*	border: 2px solid blue;*/
  }

  .top-full_span1
  {
	font-size: 17px;
	letter-spacing: 1px;
/*	animation: span1_animation 5s infinite;*/
  }

  @keyframes span1_animation
  {
	50%
	{
		font-size: 19px;
		letter-spacing: 5px;
	}
  }

  .right-aside-post_img
  {
	height: 50%;
	margin-left: 5px;
	border-radius: 3px;
  }

  .right-aside-post h3
  {
	font-size: 13px;
	margin-top: 5px;
	margin-left: 5px;
  }
  
  .works_middle-post_img img
  {
	width: 80%;
	padding-left: 20%;
  }

}

/* ====================== responsive for screen >= 575px ====================== */
@media (min-width: 575px)
{
  :root
  {
    /* font size */
    --fontSize-1: 6.4rem;
    --fontSize-2: 4.5rem;
  }

  .nav-a1
  {
	height:46px;
	width:110px;
/*	border:2px solid red;*/
  }
  
  #navbar
  {
	min-height:80px;
  }

  .container3 ul li a
  {
	font-size:15px;
  }

  .container3 ul li ul li a
  {
	font-size:13px;
  }

  .top-full
  {
	min-height: 50px;
	font-size: 20px;
/*	border: 2px solid blue;*/
  }

  .top-full_span1
  {
	font-size: 20px;
	letter-spacing: 1px;
/*	animation: span1_animation 5s infinite;*/
  }

  @keyframes span1_animation
  {
	50%
	{
		font-size: 22px;
		letter-spacing: 7px;
	}
  }

  .middle
  {
	grid-column: 6/16;
  }

  .works_middle
  {
	grid-column: 2/20;
  }

  article
  {
	padding: 15px;  
  }

  article h1
  {
	font-size:20px;
  }

  .article_content p
  {
	font-size:14px;
  }

  .middle-post_info p
  {
	font-size: 12px;
  }

  .article_ps p
  {
	text-indent:15px;
  }

  .tag p,
  .tag a,
  .pagination p,
  .pagination a,
  .article_tag p,
  .article_tag a
  {
	font-size: 13px;
  }

  .right-aside
  {
	grid-column: 16/21;
  }
  
  .right-aside
  {
	font-size: 16px;
  }

  .right-aside-post_img
  {
	height: 50%;
	margin-left: 3px;
	border-radius: 3px;
  }

  .right-aside-post h3
  {
	font-size: 12px;
	margin-top: 3px;
	margin-left: 3px;
/*	border: 1px dashed blue;*/
  }
}

/* ====================== responsive for screen >= 768px ====================== */
@media (min-width: 768px)
{
  .works_article_content
  {
	grid-column: 2/12;
  }
  
  .works_article_content_sub
  {
	grid-column: 10/48;
  }
  
  .works_middle-post_img
  {
	grid-column: 13/20;
	margin-top: 7%;
	padding-top: 65px;
/*	border: 1px dashed red;*/
  }

  .works_middle-post_img img
  {
	width: 100%;
	padding: 0%;
  }

  .works_middle_post_img_sub
  {
	grid-column: 2/8;
/*	margin-top: 7%;*/
/*	padding-top: 65px;*/
/*	border: 1px dashed red;*/
  }

  .works_middle_post_img_sub img
  {
	width: 100%;
	padding: 0%;
	margin: auto;
  }

  .works_middle_imsges_left
  {
	grid-column: 1/11;
/*	border: 1px dashed red;*/
  }
  
  .works_middle_imsges_right
  {
	grid-column: 11/21;
/*	border: 1px solid blue;*/
  }
  
  .works_middle_imsges_left img
  {
	width: 86%;
	margin-left: 9%;
  }

  .works_middle_imsges_right img
  {
	width: 86%;
	margin-left: 5%;
  }

  .works_article_content_sub_bottom_full
  {
	grid-column: 2/50;
  }
  
}

/* ====================== responsive for screen >= 992px ====================== */
@media (min-width: 992px)
{
  .nav-a1
  {
	height:55px;
	width:130px;
/*	border:2px solid red;*/
  }
  
  #navbar
  {
	min-height:90px;
  }

  .container3 ul li a
  {
	font-size:15px;
  }

  .top-full
  {
	min-height: 55px;
	font-size: 22px;
/*	border: 2px solid blue;*/
  }

  .top-full_span1
  {
	font-size: 22px;
	letter-spacing: 1px;
/*	animation: span1_animation 5s infinite;*/
  }

  @keyframes span1_animation
  {
	50%
	{
		font-size: 24px;
		letter-spacing: 8px;
	}
  }

  .works_middle
  {
	grid-column: 4/18;
  }

  article h1
  {
	font-size:22px;
  }

  .article_content p
  {
	font-size:15px;
  }

  .middle-post_info
  {
	display: flex;
  }

  .tag p,
  .tag a,
  .pagination p,
  .pagination a,
  .article_tag p,
  .article_tag a
  {
	font-size: 14px;
  }

  .right-aside-post_img
  {
	width: 50%;
	margin-left: 20px;
	border-radius: 5px;
  }

  .right-aside-post h3
  {
	font-size: 13px;
	margin-top: 5px;
	margin-left: 7px;
/*	border: 1px dashed blue;*/
  }
}

/* ====================== responsive for screen >= 1440px ====================== */
@media (min-width: 1440px)
{
  .nav-a1
  {
	height:63px;
	width:150px;
/*	border:2px solid red;*/
  }
  
  #navbar
  {
	min-height:100px;
  }
  
  .container3 ul li a
  {
	font-size:17px;
  }

  .container3 ul li ul li a
  {
	font-size:15px;
  }
  
  .top-full
  {
	min-height: 65px;
	font-size: 26px;
  }

  .top-full_span1
  {
	font-size: 26px;
	letter-spacing: 1px;
  }

  @keyframes span1_animation
  {
	50%
	{
		font-size: 28px;
		letter-spacing: 10px;
	}
  }

  article h1
  {
	font-size:24px;
  }

  .article_content p
  {
	font-size:18px;
  }

  .tag p,
  .tag a,
  .pagination p,
  .pagination a,
  .article_tag p,
  .article_tag a
  {
	font-size: 16px;
  }

  .right-aside
  {
	font-size: 20px;
  }
}

/* ====================== responsive for screen >= 1920px ====================== */
@media (min-width: 1920px)
{
  .container3 ul li a
  {
	font-size:18px;
  }

  .container3 ul li ul li a
  {
	font-size:16px;
  }
  
  .top-full
  {
	min-height: 70px;
	font-size: 28px;
  }

  .top-full_span1
  {
	font-size: 28px;
	letter-spacing: 1px;
  }

  @keyframes span1_animation
  {
	50%
	{
		font-size: 30px;
		letter-spacing: 12px;
	}
  }

  article h1
  {
	font-size:26px;
  }

  .article_content p
  {
	font-size:19px;
  }

  .middle-post_info p
  {
	font-size: 16px;
  }
  
  .right-aside
  {
	font-size: 22px;
  }
}