@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
:root{
  --bg-color:#f8f9fa;
  --accent-color: #004063;
  --highestvalue:10;
  --font-color-1: #a6e0ff;
  --font-color-2: #a6e0ff;
}
Body{
  background-image: image("./Pictures/color.jpg");
  background-color: var(--bg-color);
  width: 100%;
  overflow-x: hidden;
  color: var(--font-color-1);
}

.LoadingAnimation {
  width: 100%;
  height: 100vh;
  z-index: calc(--highestvalue + 1);
  display: block;
  color: var(--accent-color);
  font-family: 'Concert One', cursive;
}

.welcomeMessage1, .welcomeMessage2, .welcomeMessage3, .welcomeMessage4 {
  display: none;
  text-align: center;
}

.middle {
  height: 60vh;
  padding-top: 40vh;
  align-items: center;
}

/*Scroll Bar*/
::-webkit-scrollbar{
  width: 0px;
}

#ProgressBar{
    --scroll: 0%;
      background: linear-gradient(to bottom,var(--accent-color) var(--scroll),transparent 0);
      position: fixed;
      height: 100%;
      width: 5px;
      right:0px;
      z-index: 100;
}

/*Navigation Bar*/

#Navbar{
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--accent-color); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition-duration: 0.5s;
}

.Logo{
  text-align: center;
  opacity: 0;
  margin-top: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--font-color-1);
}

.MenuItems{
  opacity: 0;
  margin-top:20px;
}

.SubMenuItems > li ,.MenuItems > li{
  list-style: none;
  text-align: left;
  font-size: 20px;
  padding: 5px;
  padding-top: 10px;
}

.SubMenuItems > li > a ,.MenuItems > li > a{
  text-decoration: none;
  color: var(--font-color-2);
}

.SubMenuItems > li > a:hover ,.MenuItems > li > a:hover{
  font-weight: bold;
  color: var(--font-color-2);
  transition-duration: 0.3s;
}

.SubMenuItems > li > a:focus ,.MenuItems > li > a:focus{
  font-weight: bold;
  color: var(--font-color-2);
  transition-duration: 0.3s;
}

/*Background*/

.Background {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 0;
  color: #fff;
  text-align: center;
}

.Background > span {
  font-size: 466px;
  text-shadow: 2px 2px 8px #000;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
}

.SmallView {
  display: none;
}

/*Main contents*/

.accentBackground {
  background-color: var(--accent-color);
  opacity: 0.8;
  border-radius: 10px;
  color: var(--font-color-1);
}

/*Top Navbar Layout*/
.navbarbtn_layout{
  width: 100%;
  height: 5vh;
  display: block;
  position: relative;
  overflow: hidden;
}

/*Open Close Navbar*/
#NavbarButton{
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  /*top: 3px;
  left: 3px;*/
  z-index: var(--highestvalue);
  position: fixed;
  cursor: pointer;
  display: inline-block;
}

#NavbarButton > div{
  transition-duration: 1s;
  border-top: 2.5px solid var(--accent-color);
  margin: 7px;    
}

.line1{
  transition-duration: 1s;
  transform: rotate(-45deg) translate(-6px ,8px);
}
.line2{
  transition-duration: 1s;
  opacity: 0;
}
.line3{
  transition-duration: 1s;
  transform: rotate(45deg) translate(-6px, -7px);
}

/*Main Content*/
#content{
  width: 100%;
  height: 100%;
  position: relative;
  transition-duration: 0.5s;
  background: var(--bg-color);
  display: none;
}

.Main_content{
  height: 2000px;
  padding: 25px;
}

.footer{
  height: 5vh;
  background: var(--bg-color);
  position: fixed;
  bottom: 0px;
}

.second_image{
  float: right;
}

.alignCenter {
  text-align: center;
}

a {
  color: var(--accent-color);
}

a:hover {
  color: var(--accent-color);
}

a:visited {
  color: var(--accent-color);
}

.lowestPosition {
  position: absolute;
  bottom: 250px;
}

@media only screen and (max-width: 900px) {
  .SmallView {
    display: contents;
  }

  .BigView {
    display: none;
  }
}