:root {
  --blue: #11457e;
  --red: #d7141a;
  --lightred: #FFD5D7;
  --lightblue: #CBE4FF;
  --darkblue: #0C3664;
  --reallydark: #032345;
  --darkred: #A80F14;
  --white: #FFFFFF;
  --yellow: #e9cc04;
  --gray: #ccc;
  --black: #000000;
}

body {
 background: linear-gradient(var(--lightblue),var(--white) );
}

@media only screen and (max-width: 1960px) {
    .sidebar {
        position: initial;
        margin-left: 10%;
        width:initial;
    margin-right: 10%;
        margin-top: initial;
    }
}
.containa {
  display: grid;
  grid-template-columns: auto auto;
  margin-top:10px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--lightblue); 
}
 
::-webkit-scrollbar-thumb {
  background: var(--white); 
  opacity:0.5;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray);
  opacity:0.5;
}

.containa > div {
  background-color: var(--blue);
  color:var(--white);
  padding:10px;
  margin:10px;
}

.containa > img {
  margin:300px;
}

::selection {
  color:var(--blue);
  background-color:var(--white);
}

.notice *::selection {
  color:var(--lightred);
  background-color:var(--darkred);
}

.headbox, .habox {
  background: var(--blue);
  border:5px solid var(--blue);
  margin-bottom:0;
  padding:10px;
  color:var(--white);
}

.habox {
  background: var(--reallydark);
  border:5px solid var(--reallydark);
  margin-top:0;
}

.notice, .page {
  border: 2px solid var(--red);
  color:var(--red);
  background-color:var(--lightred);
  padding:10px;
  margin-top:0;
}
.notice a {
  color: var(--darkred);
  text-decoration:none;
}

.notice a:hover {
  font-style: oblique;
  color: var(--darkred);
}

.page {
  border:2px solid var(--reallydark);
  color: var(--white);
  background-color: var(--blue);
  margin:0px;
  margin-bottom:10px;
  padding-bottom:5px;
  padding-top:5px;
  margin-top:-20px;
  text-transform: uppercase;
}

.titleimg {
  width: 100px;
    float: right;
}

.box, .containa {
  background: var(--reallydark);
  border:5px solid var(--reallydark);
  margin-bottom:0;
  padding:10px;
  color:white;
}

.headbox {
  background: var(--blue);
  border:5px solid var(--reallydark);
  margin-bottom:0;
  padding:10px;
  color:white;
  margin-bottom:-1px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  
  padding:10px;
  justify-content: center;
}

.flex-container > div {
  background-color: var(--blue);
  width: fitcontent;
  color:white;
  padding:10px;
  margin: 10px;
}

  body {
   font-family: Arial, sans-serif; 
   font-size:1.3em;
}

:root {
  --blue: #11457E;
  --red: #d7141a;
  --lightred: #FFD5D7;
  --lightblue: #CBE4FF;
  --darkblue: #0C3664;
  --reallydark: #032345;
  --darkred: #A80F14;
  --white: #FFFFFF;
  --yellow: #e9cc04;
  --gray: #ccc;
  --black: #000000;
}

main, .top, .sidebar, .sidebar2 {
  margin:10px;
  margin-left:700px;
  margin-right:700px;
}

/* @media only screen and (max-width: 1930px) {
  main, .top, .sidebar {
    margin-left: 10%;
    margin-right: 10%;
    position:static !important;
    width:initial !important;
  }
}
*/

@media only screen and (max-width: 1930px) {
    main, .top, .sidebar {
    margin-left: 1%;
        margin-right: 50%;
        position: static !important;
        width: initial !important;
    }
    footer {
    margin-left: 20px !important;
    }
}

@media only screen and (max-width: 880px) {
  main, .top, .sidebar {
    margin-left:0px;
    margin-right:0px;
    position:static !important;
  }
  
  .titleimg {
    display:none;
  }
  .containa {
  grid-template-columns: auto;
  }
  .beh {
    width:100%;
  }
  .beh2 {
    width:70%;
  }
  footer {
    margin-left: auto !important;
    }
}
  .beh, .beh2 {
    margin-left:auto;
    margin-right:auto;
    display:block;
  }
  .sidebar, .sidebar2 {
      background: linear-gradient(var(--reallydark), var(--blue));;
      color:var(--white);
    padding: 10px;
    margin-bottom: 30px;
    position: fixed;
    width: 600px;
    left: -680px;
    top:0px;
}

header, .topnav {
  background-color: var(--reallydark);
  color:white;
  padding:40px;
}
header {
  padding-bottom:0;
}
.topnav {
  padding-top:5px;
  margin-top:-1px;
}
.topnav a {
  margin:10px;
}

a {
  color:var(--white);
  text-decoration:none;
  margin:0px;
}
a:hover {
  color: var(--gray);
  font-style: oblique;
}

footer {
  text-align:center;
  font-size:0.7em;
  color:var(--white);
  background-color:var(--reallydark);
  width: fit-content;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;
  padding:10px;
}

.btn {
  padding:10px;
  background-color:var(--reallydark);
  margin:10px;
}

.sidebar2 {
    margin-left: 100%;
}

@media only screen and (max-width: 1390px) {
  .sidebar2 {
        margin-top: -20px;
        margin-left: 1%;
        margin-right: 0%;
        position: static !important;
        width: 47% !important;
         margin-top:20px;
  }
}

@media only screen and (max-width: 880px) {
    .sidebar2 {
    width: 95.7% !important;
        margin-left: -0.1%;
  }
}