/*COMMENTING WORKS!!*/
/*
menu{
    lalalala: lalalala;
}
*/

@keyframes fadeinOut {
  0% {opacity:0.5}
  100% {opacity:1}
}

@keyframes colorChange {
  from {background-color:white}
  to {background-color: #04AA6D}
}

.zoom{
  padding:50px; 
  transition: transform 1s;
  width:200px;
  height:200px;
}

.header-img:hover{
  transform:scale(1.5);
}

.zoom:hover {
  transform: scale(1.5);
}

/* i didnt freaking make this though :( */

/* MADE BY : Ahmad Habib ON STACK OVERFLOW. */
.news-container {
  display: block;
  width: 100%;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header-container {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.image-right-container {
  display:block;
  float:right;
  width: 30%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header-news-title, .left-body {
  display: block;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.left-body  {
  margin-top:20px;
  font-weight: 600;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header-img {
  transition:transform 1s;
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  height: 50%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.footer-date {
  margin-top:30px;
  font-family:cursive;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.title {
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.top-img {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* made by geeks for geeks </3 */
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: center;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
  animation-name: fadeinOut;
  animation-duration: 0.5s;
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

input[type=text] {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 8px;
}
input[type=button] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    box-sizing: border-box;
    border: 2px solid red;
    border-radius: 10px;
}
/* Change the color of links on hover */
.topnav a:hover {
  animation-name: fadeinOut;
  animation-duration: 0.5s;
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a:active {
  background-color: #04AA6D;
  color: white;
}
button {
  background-color: lightblue;
  color: rgb(29, 42, 42);
  padding: 14px 40px;
  font-size:18px;
  border-radius:8px;
  box-shadow: 0 9px #999;
}
button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
/* back to stuff im making */
body {
    background-image:url(crunched\ paper.jpeg);
    background-size:1920px 1080px;
    background-repeat:repeat;
    padding-bottom:30px;
}
marquee {
    font-size:xx-large;
    font-style:normal;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1 {
    font-family:'Courier New', Courier, monospace;
    font-size:xx-large;
    text-align: center;
    border-style:ridge;
    border-color:black;
    font-style:normal;
}
h2 {
    font-style:normal;
    font-family:'Courier New', Courier, monospace;
    text-align:center;

}
p1{
    font-size:medium;
    font-weight: 200;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style:italic;
}
p2{
    font-size:large;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h3{
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size:large;
}
h2{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}
img:hover{
    animation-name: fadeChange;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
body{
    font-style: italic;
}
img{
    image-rendering:optimizeQuality;
    max-width: 200px;
    max-height: 200px;
    object-fit: scale-down;
    float:inline-end;
}
footer{
  position: fixed;
  bottom:0;
  border-top: -2px solid #f2f2f2;
  background-color: #f2f2f2;
  overflow: hidden;
  width: 100%;
}
h4{
  font-family:'papyrus', fantasy;
  font-size:xx-large;
  text-decoration: none;
  font-style:normal;
}
a{
  color: #000000;
  font-size:large;
  text-decoration:underline;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-decoration: none;
}
textarea{
  border: rgb(169, 22, 22) 2px solid;
  border-radius: 9px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  height: 50px;
  width: 500px;
}
form{
  text-align:center;
}