* {
   margin: 0;
   padding: 0;
   min-width: 0;
   box-sizing: border-box;
   font-family: 'Open Sans', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
   height: 100vh;
   background-color: #112731;
   background-image: url('images/bg_img5.jpg');
   background-size: cover;
   background-position: center;
}
body.light {
   background-color: #EEEEEE;
}

ul {
   padding-top:5pt;
   padding-bottom:2pt;
   padding-left:10pt;
}

li {
   line-height:150%;
}

.navbar ul {
   padding-top:0pt;
   padding-left:0pt;
}

.navbar li {
   list-style: none;
}

.topLink {
   text-decoration: none;
   color: #FFFFFF;
   padding: 0.2rem 0.5rem;
}
.topLink.light {
   color: #000000;
}

.topLink:hover {
   color: orange;

   background-color: rgba(0,0,0,0.1);
   border: none;
   outline: none;
   border-radius: 10pt;
}

.topLinkSelected {
   text-decoration: none;
   padding: 0.2rem 0.7rem;
   color: orange;
   background-color: rgba(0,0,0,0.2);
   border: none;
   outline: none;
   border-radius: 10pt;
   text-decoration: none;
   font-weight: bold;
}
.topLinkSelected.light {
   color: #000000;
}

.topLinkSelected:hover {
   color: orange;
}

header {
   position: relative;
   padding: 0rem 0.5rem;
}


.navbar {
   width: 100%;
   height: 36pt;
   max-width: 1000pt;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.navbar .logo .logoImg {
   height: 2rem;
   vertical-align: middle;
   padding-right:5pt;
}

.navbar .logoFPV {
   display:inline;
   color:orange;
}

.navbar .logoFPV.light {
   color:rgba(200,120,40,1);
}

.navbar .topLinks {
   display: flex;
   gap: 4pt;
}

.topLightDark {
   color: #FFFFFF;
   font-size: 0.7rem;
   cursor: pointer;
}

.topLightDark.light {
   color: #000000;
}

.topLightDark .topLightDarkIcon {
   font-size: 1.1rem;
   cursor: pointer;
   padding: 4pt;
   vertical-align:middle;
}

.navbar .topButton {
   color: #FFFFFF;
   font-size: 2rem;
   cursor: pointer;
   display: none;
}
.navbar .topButton.light {
   color: #000000;
}

.contactLink {
   background-color: rgba(200,120,40,1);
   color: #FFFFFF;
   padding: 0.16rem 0.7rem;
   border: none;
   outline: none;
   border-radius: 10pt;
   text-decoration: none;
   font-size: 0.8rem;
   font-weight: bold;
   cursor: pointer;
   justify-content: center;
   text-align: center;
   transition: scale 0.2 ease;
}

.contactLink.light {
   color: #000000;
}

.contactLink:hover {
   scale: 1.05;
   background-color: rgba(250,140,40,1);
   color: #FFFFFF;
}

.contactLink:active {
   scale: 0.95;
}

.topDropdown {
   position: absolute;
   z-index:1000;
   right: 2rem;
   top: 40pt;
   width: 200pt;
   background: rgba(30,30,30, 0.9);
   background-filter: blur(15px);
   border-radius: 0.5rem;
   overflow: hidden;
   display: none;
}

.topDropdown.light {
   background: rgba(230,230,230, 0.9);   
}

.topDropdown.open {
   display:block;
}

.topDropdown li {
   padding: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.topDropdown .contactLink {
   width: 100%;
   display: flex;
   justify-content: center;
}


.videoPlayerRuby {
   margin:0;
   border:1pt solid #222222;
   border-radius: 0.5rem;
   border-color: rgba(44,44,44,0.2);
}

.counters {
   font-weight:bold;
   float:right;
   padding:2pt;
   position:absolute;
   bottom:0;
   right:0;
   font-size:6pt;
   color:#555555;
}

.counters.light {
   color:#000000;
}

@media(max-width:1200px) {
   .navbar .logo {
      scale: 0.99;
   }
}

@media(max-width:1050px) {
   .navbar {
      justify-content: space-between;
   }
   .navbar .topLeft, .navbar .topRight {
      display:none;
   }
}

@media(max-width:850px) {
   .navbar {
      justify-content: space-between;
   }
   .navbar .topLinks,
   .navbar .contactLink,
   .counters {
      display: none
   }

   .navbar .topButton,
   .navbar .topDropdown .contactLink {
      display: block;
   }


   .topDropdown {
      left: 2rem;
      width: unset;
   }
   .topLeft, .topRight {
      display:none;
   }
}