/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'tewi';
  src: url('./fonts/tewi.eot');
  src: url('./fonts/tewi.eot%3F') format('embedded-opentype'),
       url('./fonts/tewi.svg') format('svg'),
       url('./fonts/tewi.ttf') format('truetype'),
       url('./fonts/tewi.woff') format('woff'),
       url('./fonts/tewi.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HeinzHeinrich-Regular';
  src: url('./fonts/HeinzHeinrich-Regular.eot');
  src: url('./fonts/HeinzHeinrich-Regular.eot%3F') format('embedded-opentype'),
       url('./fonts/HeinzHeinrich-Regular.svg') format('svg'),
       url('./fonts/HeinzHeinrich-Regular.ttf') format('truetype'),
       url('./fonts/HeinzHeinrich-Regular.woff') format('woff'),
       url('./fonts/HeinzHeinrich-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family:'NDS12';
		src:url('./fonts/NDS12.eot');
		src:url('./fonts/NDS12.eot%3F') format('embedded-opentype'),
				url('./fonts/NDS12.woff') format('woff'),
				url('./fonts/NDS12.ttf') format('truetype'),
				url('./fonts/NDS12.svg') format('svg');
	font-weight:normal;
	font-style:normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family:'NDS12';
		src: url('./fonts/NDS12.svg') format('svg');
		font-weight:normal;
		font-style:normal;
	}
}

@font-face {
	font-family:'ChronoType';
		src:url('./fonts/ChronoType.eot');
		src:url('./fonts/ChronoType.eot%3F') format('embedded-opentype'),
				url('./fonts/ChronoType.woff') format('woff'),
				url('./fonts/ChronoType.ttf') format('truetype'),
				url('./fonts/ChronoType.svg') format('svg');
	font-weight:normal;
	font-style:normal;
}

@font-face {
  font-family: 'amali';
  src: url("./fonts/amali.ttf") format('truetype');
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family:'ChronoType';
		src: url('./fonts/ChronoType.svg') format('svg');
		font-weight:normal;
		font-style:normal;
	}
}

html {
    overflow-y:scroll;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
  background-color: black;
  color: white;
  padding: 2vh 5vw 2vh 5vw;
  margin: 15px;
  font-family: NDS12;
  font-size: 10px;
}

h1 {
  font-family: HeinzHeinrich-Regular;
  font-size: 20px;
  font-weight: normal;
}

h3 {
  font-family: HeinzHeinrich-Regular;
  font-size: 8px;
  font-weight: normal;
}

p {
  font-family: 'ChronoType';
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 0px;
  position: relative;
  right: 20px;
}

div {
  display: flex;
  flex-direction: column;
  max-width: 150ch;
  align-items: flex-right;
}

img {
  position: relative;
  right: 20px;
  margin: 8px;
  border: 2px dotted white;
}

img:hover {
  border-color: lightgreen;
}


@media only screen and (max-width: 768px) {
  body {
    margin-left: 10%;
    font-size: 10px;
  }
  h1 {
    font-size: 20px;
    }
  h3 {
    font-size: 8px;
  }
}


a {
  color: grey;
}

a:hover {
  color: lightgreen;
}

ul {
  margin-top: 0px;
  margin-bottom: 0px;
  list-style:square;
  padding-left: 15px;
}

li {
  padding-bottom: 1px;
}

.date {
  color: crimson;
  font-size: 10px;
  font-family: tewi;
  text-align: center;
}

#background {
   width:100%;
   height:100%;
   position:fixed;
   left:0;
   top:0;
   z-index:-1;
}

.english {
  font-family: 'ChronoType';
  font-size: 15px;
}

.sinhala {
  font-family: amali;
  font-size: 17px;
}

.imgcont {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.imgcontimg {
  width: auto;
  height: 45ch;
}