/*MAIN CSS DOC */
	
	html,
	body {
	    height: 100%;
	}
	
	* {
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	}
	/* ANIMATION */
	
	body {
	    /*background: linear-gradient(90deg, white, gray);*/
	    /* background-color: #fbfcde;*/
	    animation: colorchange 50s;
	    /* animation-name followed by duration in seconds*/
	    /* you could also use milliseconds (ms) or something like 2.5s */
	    -webkit-animation: colorchange 50s;
	    /* Chrome and Safari */
	    -moz-animation: colorchange 50s;
	    /* Firefox */
	}
	
	@keyframes colorchange {
	    0% {
	        background: #ffffff;
	    }
	    25% {
	        background: #d6d8db;
	    }
	    50% {
	        background: #ffffff;
	    }
	    75% {
	        background: #d6d8db;
	    }
	    100% {
	        background: #ffffff;
	    }
	}
	
	@-webkit-keyframes colorchange
	/* Safari and Chrome - necessary duplicate */
	
	{
	    0% {
	        background: #ffffff;
	    }
	    25% {
	        background: #d6d8db;
	    }
	    50% {
	        background: #ffffff;
	    }
	    75% {
	        background: #d6d8db;
	    }
	    100% {
	        background: #ffffff;
	    }
	}
	/*FONT AND TEXT*/
	
	body {
	    font-family: 'Ubuntu', sans-serif;
	    font-weight: normal;
	}
	
	h1 {
	    font-family: 'Ubuntu', sans-serif;
	    font-size: 3rem;
	    font-weight: 800;
	    margin: .5em 0;
	    color: #0000ff;
	}
	
	h2 {
	    font-family: 'Ubuntu', sans-serif;
	    font-size: 3.5rem;
	    font-weight: 800;
	    margin: 1em 0;
	    color: #0000ff;
	}
	
	p {
	    margin: 1em 0;
	    font-size: 1.5rem;
	    color: #0000ff;
	    line-height: 1.7em;
	}
	
	a {
	    color: #0000ff;
	    text-decoration: none;
	}
	
	a:hover,
	a:focus {
	    color: #0000ff;
	    font-style: italic;
	}
	
	hr {
	    height: .4em;
	    color: #0000ff;
	    border-radius: 12px;
	    background-color: #0000ff;
	    border: none;
	    margin: 1em 0;
	}
	
	g {
	    color: green;
	}
	
	t {
	    color: teal;
	}
	/* WRAPPER */
	
	.pagewrapper {
	    max-width: 900px;
	    margin: 0 auto;
	    padding: 1em;
	    position: relative;
	}
	/* Menu */
	
	.menu {
	    position: sticky;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    z-index: 6;
	    width: 100%;
	    top: 20px;
	}
	
	.menu>* {
	    flex: 1 1 auto;
	}
	/* INPUT TEXT HEADER */
	
	input {
	    font-family: 'Ubuntu', sans-serif;
	    font-size: 3rem;
	    font-weight: 800;
	    margin: 0;
	    color: #0000ff;
	    border: 0;
	    background-color: rgba(51, 170, 51, 0);
	    outline: none;
	    max-width: 75%;
	}
	
	input::placeholder {
	    font-family: 'Ubuntu', sans-serif;
	    font-size: 3rem;
	    font-weight: 800;
	    margin: 0;
	    color: #0000ff;
	    opacity: 1;
	}
	
	input:focus {
	    outline: none;
	}
	
	:focus {
	    outline: dashed #0000ff;
	}
	/* BUTTON */
	
	.button {
	    display: inline-block;
	    padding: .3em .5em;
	    font-size: 1.25rem;
	    cursor: pointer;
	    text-align: center;
	    text-decoration: none;
	    color: #0000ff;
	    background-color: #f0f0f0;
	    border: 1.5px solid #0000ff;
	    border-radius: 20px;
	    margin: 0 1em;
	    max-width: 4em;
	}
	
	.button:hover {
	    background-color: #ffff66;
	}
	
	.button:active {
	    background-color: #ffff66;
	    box-shadow: 0 0px #003311;
	    transform: translateY(0px);
	}
	
	.right-wrapper {
	    text-align: right;
	    z-index: 2;
	    background-color: #f0f0f0;
	}
	/* main text/page */
	
	.row:before,
	.row:after {
	    display: table;
	    content: " ";
	}
	
	.fulltext {
	    position: relative;
	    height: auto;
	    border: 0px solid green;
	    padding: 0;
	    margin: 0;
	    color: blue;
	}
	
	.image {
	    position: relative;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	    align-items: flex-start;
	    padding-bottom: 1em;
	}
	
	.image img {
	    max-width: 100%;
	    box-shadow: none;
	    max-height: 60vh;
	    object-fit: contain;
	}
		.image>*:click {
		    flex: 0 0 100%;
		    
		}
	
	.image>* {
	    flex: 1 1 27%;
	    margin: 1em 1%;
	}
	
	.cap {
	    min-width: 100%;
	}
	
	img {
	    width: 100%;
	  margin-bottom: 1em;

	}
	
	.grid {
	    display: grid;
	    grid-template-columns: repeat(3, minmax(300px, 1fr));
	}
	/* Use a media query to add a breakpoint at 800px: */
	
	@media screen and (max-width: 900px) {
	    .menu {
	        right: 0px;
	        top: 0px;
	        padding: 0;
	        position: relative;
	        flex-wrap: wrap;
	    }
	    input {
	        max-width: 50%;
	        min-width: 140px;
	        font-size: 2rem;

	    }
	    input::placeholder {
	        font-size: 2rem;
	    }
	    .button {
	        margin: 0 .15em;
	    }
	}