@import url('https://fonts.googleapis.com/css2?family=Mallanna&family=Ramabhadra&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');


/* set root */
 :root {
  background-color: #2e6417;
	font-size: 16px;
}
 @media screen and (max-width: 1100px) {
  :root {
	  font-size: 14px;
  }
}
 @media screen and (max-width: 950px) {
  :root {
	  font-size: 16px;
  }
}
 @media screen and (max-width: 600px) {
  :root {
	  font-size: 11px;
  }
}
 @media screen and (min-width: 1300px) {
  :root {
	  font-size: 18px;
	}
}
 @media screen and (min-width: 1600px) {
	:root {
		font-size: 20px;
	}
}

body {
  color: white;
  font-family: Roboto Mono;
  font-size: 1.3rem;
  padding-top:2rem;

}

a {
  text-decoration:none;
  color: white;
}

p {
  font-size: 1rem;
  padding: 0rem 2rem 0rem 2rem;
}

/* landing page */

.language{
  font-size: 1.5rem;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%); 
}

.button{
  font-size:1.25rem;
  background-color: #2e6417;
  color: white;
  font-family: Roboto Mono;
  border:0.3vw solid white;
  padding: 0.5rem 1rem 0.5rem 1rem;
  align-items:center;  
}

.button:hover, .switch:hover{
  background-color: white;
  color: #2e6417;
}

.telugu-button{
  float: left;
}

.english-button{
  float: right;
}

/* standard page */

.main{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 36rem;
  border: 0.25vw solid white;
}

.nav{
  display: flex;
  justify-content: space-between;
  padding-left: 2rem;
  padding-right: 2rem;
}

.nav a{
  padding:0.1rem 0.2rem;
}

.nav a:hover {
  background-color:white;
  color: #2e6417;
  padding:0.1rem 0.2rem;
}

.active {
  background-color:white;
  color: #2e6417;
  padding:0.1rem 0.2rem;
}

.contents{
  padding-top:1rem;
}

.contents a:hover{
  text-decoration:underline;
}

.switch{
  position:relative;
  font-size:1rem;
  color: white;
  font-family: Roboto Mono;
  /*border:0.2vw solid white;*/
  padding: 0.5rem 1rem 0.5rem 1rem;
  align-items:center;
  float: right;
  z-index:2;
}

/* submit page */

.title{
  font-size:1.4rem;
  padding: 0rem 2rem 0rem 2rem;
} 

.subtitle{
  font-size:1.2rem;
  padding: 0rem 2rem 0rem 2rem;
} 

.important{
  background-color:white;
  color: #2e6417;
  padding:0.1rem 0.2rem;
} 

.box{
  position:relative;
}

.box:before{
  content:"";
  left:-0.5rem;
  top:-0.1rem;
  border:0.2vw solid white;
  border-style:solid;
  border-color:white;
  position:absolute;
  border-right-color:transparent;
  width:45%;
  height:2rem;
  transform:rotate(2deg);
  border-radius:50%;
  padding:0.1rem 0.25rem;
}

.box:after{
  content:"";
  left:-0.5rem;
  top:0.3rem;
  padding:0.1rem 0.25rem;
  border-width:0.2vw;
  border-style:solid;
  border-color:white;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:45%;
  height:2rem;
  transform:rotate(-1deg);
  border-radius:50%;
}

/* read page */
.read{
  background:white;
  width:90%;
  margin-left:5%;
  color:#2e6417;
  margin-bottom:5%;
}

.read p{
  padding-top:1rem;
}

.read a{
  color: #2e6417;
}

.subscribe{
  font-size:1rem;
  width:30rem;
}