@font-face {
  font-family: RobotoMono;
  src: url('../fonts/RobotoMono-Light.ttf');
}

@font-face {
  font-family: RobotoMono-Regular;
  src: url('../fonts/RobotoMono-Regular.ttf');
}

html {
	margin: 0;
	overscroll-behavior-y: none;
	font-family: RobotoMono;
	background:white;
	color:black;
	font-size:15px;
}

/* # GENERAL CSS */

.theme-wrapper{
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  right:0px;
  overflow:scroll;
  height:100%;
}
.width-wrapper {
	width:600px;
	margin-left:auto;
	margin-right:auto;
	margin-top:80px;
	margin-bottom:100px;
}
#toggleMode {
  	visibility: hidden;
}
.toggleDark, .toggleLight {
  	cursor: pointer;
  	position: absolute;
  	z-index: 2;
  	top: 20px;
  	right: 20px;
  	font-size:13px;
}
.toggleDark{
  	display: block;
  	color: black;
}
.toggleDark:hover{
  	text-decoration: underline;
}
.button{
  	display: block;
  	color: black;
}
.button:hover{
  	text-decoration: underline;
}
.toggleLight{
  	display: none;
  	color: white;
}
.toggleLight:hover{
  	text-decoration: underline;
}

.hlinks:link {
	color: #4169E1;
	text-decoration: none;
}
.hlinks:visited {
	color:#4169E1;
	text-decoration: none;
}
.hlinks:hover {
	color: #4682B4;
	text-decoration: underline;
}
.headings2 {
	font-family:RobotoMono-Regular;
	font-size:20px;
}
#bar {
  	border: 0;
  	height:0;
  	border-top:1px solid rgba(0,0,0,0.3);
  	border-bottom:1px solid rgba(255,255,255,0.3);
  	clear:left;
}
#bar1 {
  	border: 0;
  	height:0;
  	border-top:1px solid rgba(0,0,0,0.3);
  	border-bottom:1px solid rgba(255,255,255,0.3);
  	clear:left;
}
#img-calabi {
	width: 180px;
	border-radius: 100px;
	float: right;
	margin-right: 0px;
}
#img-s3q {
	width: 190px;
	border-radius: 100px;
	float: left;
	margin-left: 0px;
}

/* ## IF DARK MODE ON*/

#toggleMode:checked ~ .toggleDark{
  	display: none;
}
#toggleMode:checked ~ .toggleLight{
  	display: block;
}
#toggleMode:checked ~ .theme-wrapper{
  	background:#181818;
  	color:white;
}
#toggleMode:checked ~ .theme-wrapper .hlinks:link{
	color: #DEB887;
	text-decoration: none;
}
#toggleMode:checked ~ .theme-wrapper .hlinks:visited{
	color: #DEB887;
	text-decoration: none;
}
#toggleMode:checked ~ .theme-wrapper .hlinks:hover{
	color: #F5F5DC;
	text-decoration: underline;
}

#toggleRetrieve {
  	visibility: hidden;
}

/* # BUTTON TO RETRIEVE */

.button {
	font-family:RobotoMono-Regular;
	font-size:18px;
}
#toggleMode:checked ~ .theme-wrapper .button{
	color: #FFFFFF;
	text-decoration: none;
}
#toggleMode:checked ~ .theme-wrapper .button:hover{
	color: #FFFFFF;
	text-decoration: underline;
}

.saving {
	visibility:hidden;
}

.done-saving {
	display:none;
}

#toggleRetrieve:checked ~ .button {
  	pointer-events:none;
}

#toggleRetrieve:checked ~ .saving {
  	visibility: visible;
}

#toggleRetrieve:checked ~ .button {
  	pointer-events:none;
}

/* ## TEXT ANIMATIONS */

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

#toggleRetrieve:checked ~ .saving span {
    /**
     * Use the blink animation, which is defined above
     */
	font-size:20px;
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 0.8s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

#toggleRetrieve:checked ~ .saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

#toggleRetrieve:checked ~ .saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: 0.4s;
}

#toggleRetrieve:checked ~ .saving{
	font-size:16px;
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	border-right: .15em hidden black; /* The typwriter cursor */
	white-space: nowrap; /* Keeps the content on a single line */
	animation: 
		typing 1.6s steps(26, end),
		blink-caret .75s step-end infinite;
}

#toggleRetrieve:checked ~ .done-saving span {
    /**
     * Use the blink animation, which is defined above
     */
	font-size:20px;
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 0.8s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

#toggleRetrieve:checked ~ .done-saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

#toggleRetrieve:checked ~ .done-saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: 0.4s;
}

@keyframes typing {
  from { width: 0% }
  to { width: 80.2% }
}

/* BUTTON TO COPY */

.list-text {
	text-align: left;
	font-size:20px;
}

.button-copy {
	text-align: right;
	position:relative;
	font-size:20px;
}

.button-copy a {
	font-size: 15px;
	visibility: hidden;
}

.button-copy button{
	padding:7px;
	background:transparent;
	border-radius: 5px;
	outline:none;
	cursor:pointer;
	border-width: 1px;
}

.button-copy button:active {
	background:#2f2f2f;
	color:white;
}

#toggleMode:checked ~ .theme-wrapper .button-copy button{
	color: white;
	border-color: white;
}

#toggleMode:checked ~ .theme-wrapper .button-copy button:active{
	background: white;
	color:#2f2f2f;
}

/* EMAILS LIST */

.disable-scrollbars {
	display:none;
}

.button-copy {
	display:none;
}

.bar1 {
	display:none;
}

#toggleRetrieve:checked ~ .button-copy {
  	display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 28%;
  padding: 5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*SCROLLBAR OF THE LIST OF EMAILS*/

.disable-scrollbars::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}
    
.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

/* IF DESKTOP OR MOBILE VIEW */

@media only screen and (min-width: 701px) {
	.name {
		width:400px;
		height:50px;
		line-height:70px;
		font-size:25px;
		text-align:left;
	}
}
@media only screen and (max-width: 700px) {
	.width-wrapper {
		width:auto;
		margin-left:7%;
		margin-right:7%;
		margin-top:12%;
		}
	.toggleDark, .toggleLight{
		font-size:12px;
		top: 10px;
		right: 10px;
	}
	.name{
		font-size:25px;
		line-height:40px;
		text-align:center;
	}
	.headings2{
		font-size:20px;
	}
  .row {
    font-size:10px;
  }
}