/*the following removes a blue box
 * that appears when a link is clicked
 * on some mobile browsers
 * such as chrome (as of v.87.0.4280.101)*/
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: var(--textsize);
}

/* For references table in articles */
td {
  vertical-align:top;
}

ul {
  padding: 5px;
}

p, ol, ul {
    font-family: 'newspaper', serif;
    font-weight: 400;
    line-height: 1.6;
}

body {
  background-color: var(--background-color);
  transition: background-color 1s ease, color 1s ease;
  color: var(--content-color);
  margin: 10px 15%;
  z-index: 1;
  padding-bottom: 30px;
}

h1 {
  font-size: calc(20px + 1.5vw);
}

h1,h2,h3,h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

a {
  color: var(--accent-color);
}

a:hover {
  text-decoration: none;
}

a span {
    width:0px;
    overflow:hidden;
    transition: all 0.25s, color 0s ease-in;
}

a[rel~="external"]:after {
	content: " " url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNqEkIEJwCAMBGPpEs7hHK6hY+gauoZr6Bo6RtqEWkxb6EMQnuM/USEirIoxSmOKwDkhBEwp4VPkb4801Xun9xW4e+9FldYarLUvkBPPOp4JGWOgtSaSt6VWQKUU9nPOEiSIgAmNMdadFTjn7utqrXwh6fLvH9nXhamW5ksMnpfDnw4BBgBfunO056MmqAAAAABJRU5ErkJggg==");
}


select {
  background-color:var(--background-color);
  color: var(--content-color);
  border-radius: 5px;
}

.wiki-quote {
  font-style: italic;
  border: 1px solid var(--content-color);
  border-left: 10px solid var(--content-color);
  border-radius: 10px;
  padding: 10px;
}

code.inline {
  border-radius: 5px;
  padding: 1px;
  background-color: var(--content-color);
  color: var(--background-color);
  font-size: calc(var(--textsize) - 2px);
  word-break: break-word;
  overflow-wrap: break-word;
}

#logo, #logo_fn, #logo_ln {
    font-family: 'Poppins', sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: transparent;
  padding-bottom: 10px;
  border-bottom-color: var(--content-color);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

svg {
  fill:var(--content-color);
}

.topnav a {
  font-family: 'Poppins', sans-serif;
  display: flex;
  float: left;
  color: var(--content-color);
  margin: 0px 5px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 20px;
}

.topnav a .icon {
  color: var(--content-color);
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 20px;
}

.topnav .icon:hover {
  background-color: transparent;
  color: var(--content-color);
}

.topnav a span {
  text-align: initial;
}

.topnav a.active {
  background-color: var(--content-color);
  color: var(--background-color);
  font-weight: 600;
}


.topnav-right {
  float: right;
  height: 100%;
}

#okur, #okur > * {
  font-family: 'Poppins', sans-serif;
  font-size: calc(50px + 2vw);
  /*
  z-index: -1;
  margin: 0px;
  position:absolute;
  left: 0px;
  top: 0px;
  */
}

#homemsg, #homemsg > *:not(#profile) {
    font-family: 'Cormorant Garamond', serif;
    font-size: calc(50px + 2vw);
    font-weight: 300;
    padding-top: 20px;
}

#introname {
  position:relative;
  color: var(--content-color);
  transition: color 1s ease;
  -webkit-text-stroke: 0px var(--accent-color);
  z-index: 1;
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
}

#introname:hover {
  color: var(--background-color);
  -webkit-text-stroke: 1px var(--content-color);
  cursor:none;
  animation: fadeName 1.2s forwards;
  font-family: 'Cormorant Garamond', serif;
}

@keyframes fadeName {
  0%   { color: var(--content-color);
          text-shadow: 0 0 20px var(--content-color);
          opacity: 0.5;
        }
  40%   { color: var(--content-color);
          text-shadow: 0 0 20px var(--content-color);
          opacity: 1;
        }
  100%  {
          color: transparent;
          opacity: 0;
        }
}

#profile {
  display: none;
  position: absolute;
  border-style: solid;
  border-color: var(--content-color);
  border-width: 1px;
}


/* HAMBURGER MENU */
.container {
  display: none;
  cursor: pointer;
  z-index: 3;
  position: relative;
  height: 100%;
}

.container.open {
	overflow: hidden;
}


/*The height and margin properties are used in a js file.
 * Make sure to change them there too */

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 2px;
  background-color: var(--content-color);
  margin: 10px 0;
  transition: 0.2s;
  border-radius: 5px;
}

/* In the following, the order of transformations is
 * important. First the bars are translated to the one in the middle.
 * Then they make an angle of 90deg
 * When moving them, it is by 12px i.e. the sum of the margin and
 * the width of a bar*/

.open .bar1 {
  -webkit-transform: translateY(12px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}

/* Custom scrollbar */

*::-webkit-scrollbar {
	width: 10px;
}

*::-webkit-scrollbar-track {
	/*-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,1);*/
	border-radius: 10px;
	background-color: var(--background-color);
}

*::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: var(--content-color);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #606060;
}


.testbtn {
  background: none !important;
  border: none;
  padding: 14px 5px 14px 0;
  cursor: pointer;
}

.testbtn:focus {
  outline: none;
}


.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 2;
  height: 250px;
  top: 0;
  right: 0;
  background-color: var(--background-color);
  /*overflow-x: hidden;*/
  padding-top: 60px;
}


.sidepanel a {
  padding: 8px 0px;
  text-decoration: none;
  margin-left: 25%;
  font-size: 25px;
  color: var(--content-color);
  display: block;
  font-family: newsreader;
}

.sidepanel button {
  margin-left: 25%;
}

@media (hover: hover) and (pointer: fine) {
  .sidepanel a:hover {
    color: var(--accent-color)
  }

  .container:hover > * {
    background-color: var(--accent-color)
  }
}

.sidepanel a:active {
  color: var(--accent-color)
}

.container:active > * {
  background-color: var(--accent-color)
}

@media screen and (max-width:700px) {
  body {
    margin:10px;
  }

  .topnav-right a {
    display: none;
  }
  .container {
    display: inline-block;
  }

  #logo:not(.active):hover {
    color: var(--accent-color);
  }

  article figure {
    width: 100%;
    margin-left: 0px;
    text-align:center;
  }
  article img {
    width: 100% ;
  }
}

@keyframes fadePfp {
  0% { opacity: 0.8; filter: blur(20px) brightness(var(--brightness-level))}
  40% { opacity: 0.5; filter: blur(20px) brightness(var(--brightness-level))}
  100% { opacity: 1; filter: none;}
}

@media screen and (min-width:700px) {
  #introname:hover ~ #profile {
    display: block;
    animation: fadePfp 1.2s forwards;
  }
  #mySidepanel {
      display: none;
  }
  .topnav a:not(.active):hover {
    /*background-color: var(--content-color);*/
    color: var(--accent-color);
  }
  a:hover #logo_fn {
    width: 67px;
  }

  a:hover #logo_ln {
    width: 57px;
  }

  article img:hover {
    cursor:zoom-in;
    /*filter: blur(1rem);*/
    /*-webkit-filter: blur(1rem);*/
    /*transform: scale(0.9);*/
  }

  article figure {
    text-align:center;
  }
}

/*======= General =====*/
#langlink:active, #langlink:focus-visible {
	color: var(--accent-color);
}
 /*-Earth*/
 #langicon {
 	background-image: light-dark(var(--earth_light_theme),var(--earth_dark_theme));
 }

 a:focus-visible #langicon, a:active #langicon {
 	background-image: light-dark(var(--earthfilled_light_theme),var(--earthfilled_dark_theme));
 }


/*=============== Handling mobile devices hover ==============*/
@media (hover: hover) and (pointer: fine) {
	#langlink:hover {
		color: var(--accent-color);
	}
	
	a:hover #langicon {
  	background-image: light-dark(var(--earthfilled_light_theme),var(--earthfilled_dark_theme));
  }


	/*Cookies -> idk why I had written cookies*/ 
	:root.light #langlink:hover #langicon {
		background-image: light-dark(var(--earthfilled_light_theme),var(--earthfilled_dark_theme));
	}
}