/* CSS "Final Project 1" File*/

body {
  height:100%;
  margin:0;
  background-image:url(Images/bs2.jpeg);
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
}
.flexdiv1 {
  display:flex;
  flex-direction:row;
  height:auto;
  z-index:2;
}
.side1 {
  flex:1;
  height:auto;
  margin-right:5px;
  background-color:transparent;
  text-align:center;
  font-size:30px;
}
.side2 {
  flex:5;
  background-color:#2D2926;
  padding:2.5px;
  height:auto;
  font-size:16px;
  border-right:3px solid transparent;
  border-left:3px solid transparent;
  color:white;
  text-align:center;
}
.side3 {
  flex:1;
  height:auto;
  margin-left:5px;
  background-color:transparent;
}
.flexdiv2 {
  display:flex;
  flex-direction:row;
  height:auto;
}
.head {
  flex-direction:row;
  flex:6.09;
  background-color:#E94B3C;
  margin:0;
  font-size:50px;
  color:#2D2926;
  text-align:center;
  height:auto;
  border-bottom:3px solid #2D2926;
}
.linkt {
  flex-direction:row;
  flex:1;
  background-color:lightgreen;
  font-size:30px;
  color:white;
  text-align:center;
  height:auto;
  position:relative;
  display:inline-block;
  border-bottom:3px solid #2D2926;
  border-left:3px solid #2D2926;
}
.linkm {
  display:none;
  position:absolute;
  width:175px;
  z-index:1;
  padding:10px 15px;
  background-color:rgb(104,177,104);
  border-bottom:3px solid #2D2926;
  justify-content:center;
  align-items:center;
}
.linkt:hover .linkm {
  display:block;
  color:#68b168;
}
@media (max-width:900px) {
  .side3 {display:none}               /*CHECK*/
  .side1 {display:none}
  p {font-size:16px}
  iframe {display:none}
  #link {display:inline}
  .img1 {float:none;display:block;margin-left:auto;margin-right:auto;}
  .hidden {visibility:visible;}
  ol {font-size:16px}
}
.img1 {
  width:30%;
  height:auto;
}
.ad1 {
  background-color:orange;
  position:relative;
  top:45%;
}
@media (min-width:1599px) {
  p {font-size:25px}
  #link {display:none}
}
.bold {
  text-align:center;
  font-weight:bold;
  font-size:30px;
}
@media print {
  .side3 {display:none}
  .side1 {display:none}
  p {font-size:16px}
  .side2 {background-color:transparent;border-right:none;border-left:none;}
  .flexdiv2 {background-color:transparent}
  #hide {display:none}
  iframe {display:none}
  ol {font-size:16px}
  img {display:none;}
  .linkt {display:none;}
  .linkm {display:none;}
}
#link {
  font-weight:bold;
  position:relative;
  left:100%;
  top:1%;
}
@keyframes animation {
  from {opacity:0;}
  to {opacity:1;}
}
.animation1 {
  animation-name:animation;
  animation-duration:10s;
  font-size:50px;
}
@media (min-width:901px) {
  .img1 {float:left;margin:10px;}
}
img {
  width:30%;
  height:auto;
}
ol {
  font-size:36px;
}
.hlink:link {
  color:yellow;
}
.hlink:visited {
  color:green;
}
.hlink:hover {
  color:blue;
}
.hlink:active {
  color:red;
}
.hlink {
  text-align:right;
}