@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

p{
  color:rgb(192, 89, 5);
  padding:5px;

}
li{
    color:rgb(192, 89, 5);

}
body{
  background-color:black;
}
h1{
  color:rgb(192, 89, 5);
  font-family:'black ops one';
}

footer{
    color:rgb(192, 89, 5);
    clear: both;

}
img video{
  max-width:100%;
  height:auto;
}

h2{
  flex-basis:100%;
  max-width:100%;
  text-align:center;
  color:rgb(192, 89, 5);

}

h4{
text-align:center;
color:rgb(192, 89, 5);
}

.blogposts{
  text-align:center;
  transition:all 1s;
}

.blogposts:hover{
    transform:rotate(30deg);

  transition:transform 1s (-30deg);
}
.dropdown {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
        
.dropdown>li {
  position: relative;
  padding: 10px;
  border: 1px solid black;
  display: inline-block;
}
        
.dropdown>li>ul {
  list-style-type: none;
  visibility: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  background-color:rgb(192, 89, 5);
  margin: 0;
  padding: 25px;
  border: 1px solid black;
  z-index: 1;
  opacity:0;
  top:20px;
}
        
.dropdown>li:hover>ul {
  visibility: visible;
  opacity:1;
  top:40px;
}

header{
  text-align:center;
}

footer{
  text-align:center;
  font-size:80%;
}
nav{
  text-align:center;
  background-color:rgb(192, 89, 5);
  padding: 5px;
  }


.myleft{
text-align:center;
color:rgb(192, 89, 5);
border: thin solid rgb(192, 89, 5)

}

.myright{
text-align:center;
color:rgb(192, 89, 5);
border: thin solid rgb(192, 89, 5)

}

td, th {
border: 1px solid white;
padding:10px;                text-align:right;
vertical-align:bottom;
}

tr:nth-child(even){
  background-color:rgb(192, 89, 5);
}

td:hover{
  background-color:rgb(18, 132, 185);
}

th, tfoot{
  background-color:rgb(192, 89, 5);
  color:white;

}

.resp{
overflow-x:auto;
}

table {
margin-left: 20px; 
margin-right: 20px; 
border: thin solid black;
border-collapse:collapse; 
caption-side: bottom;
color:white;
}

fieldset{
color:rgb(192, 89, 5);
}

@media (min-width:768px){
  .myparent{
display: flex;
flex-direction:row;
flex-wrap:wrap;
}

.mymain{
flex-basis:80%;
max-width:80%;
box-sizing:border-box;

}

.myleft{
color:rgb(192, 89, 5);
flex-basis:20%;
max-width:20%;
box-sizing:border-box;
border: thin solid rgb(192, 89, 5)

}

.myright{
color:rgb(192, 89, 5);
flex-basis:100%;
max-width:100%;
box-sizing:border-box;
border: thin solid rgb(192, 89, 5)
}
}

@media (min-width:992px){
  .myparent{
display: flex;
flex-direction:row;
flex-wrap:wrap;
}

.mymain{
flex-basis:60%;
max-width:60%;
box-sizing:border-box;

}

.myleft{
color:rgb(192, 89, 5);
flex-basis:20%;
max-width:20%;
box-sizing:border-box;
border: thin solid rgb(192, 89, 5)

}

.myright{
color:rgb(192, 89, 5);
flex-basis:20%;
max-width:20%;
box-sizing:border-box;
border: thin solid rgb(192, 89, 5)
}
}

@media (min-width:1200px){
  .myparent{
display: flex;
flex-direction:row;
flex-wrap:wrap;
}

.mymain{
flex-basis:60%;
max-width:60%;
box-sizing:border-box;

}

.myleft{
color:rgb(192, 89, 5);
flex-basis:20%;
max-width:20%;
box-sizing:border-box;
border: thin solid rgb(192, 89, 5)
}

.myright{
color:rgb(192, 89, 5);
flex-basis:20%;
max-width:20%;
box-sizing:border-box;
border: thin solid rgb(192, 89, 5)
}


}

form{
  padding: 5px;
  
}