html,body {
    display: block;
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    background-color: #001b33;
    font-family: Thin;
    background: linear-gradient(71.93deg,#001b33 26.34%,#004887 56.72%,#273b49 94.79%);
}

.os_select .os_icon {
    display: inline-block;
    width: 45px;
    height: 45px;
}

.os_select[data-os="windows"] .os_icon {
    background-image: url('images/os_icons/windows-unselected.png');
}
.os_select[data-os="windows"].selected .os_icon {
    background-image: url('images/os_icons/windows-selected.png');
}

.os_select[data-os="macos"] .os_icon {
    background-image: url('images/os_icons/macos-unselected.png');
}
.os_select[data-os="macos"].selected .os_icon {
    background-image: url('images/os_icons/macos-selected.png');
}

.os_select[data-os="linux"] .os_icon {
    background-image: url('images/os_icons/linux-unselected.png');
}
.os_select[data-os="linux"].selected .os_icon {
    background-image: url('images/os_icons/linux-selected.png');
}

.os_select[data-os="android"] .os_icon {
    background-image: url('images/os_icons/android-unselected.png');
}
.os_select[data-os="android"].selected .os_icon {
    background-image: url('images/os_icons/android-selected.png');
}

.os_select[data-os="web"] .os_icon {
    background-image: url('images/os_icons/web-unselected.png');
}
.os_select[data-os="web"].selected .os_icon {
    background-image: url('images/os_icons/web-selected.png');
}

#top_section {
    background: radial-gradient(91.65% 592.16% at 57.03% 50%,#ffcea4 0,#ffab87 100%);
    width: 100%;
    padding-bottom: 15px;
    color: black;
}
#bottom_section {
    /*background: linear-gradient(71.93deg,#001b33 26.34%,#004887 56.72%,#273b49 94.79%);*/
    width: 100%;
    color: white;
    min-height: 460px;
}
#content_section {
    height: 1280px;
    width: 100%;
}
#footer_section {
    background: linear-gradient(71.93deg,#001b33 26.34%,#004887 56.72%,#273b49 94.79%);
    height: 580px;
    width: 100%;
}

.navbaritem {
    color: #000000;
    font-size: 18px;
    display: inline-block;
    margin: 10px;
    top: 5px;
    position: relative;
    font-family: Normal;
}
.navbaritem.inner {
    font-family: Thin;
    top: 7px;
}
#bottom_section a {
    color: #b8cef7;
    font-family: Medium;
}
.title.navbaritem {
    font-size: 35px;
    font-family: Medium;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #000000;
    transition: top 0.5s;
}
.title-red {
    color: #aa0000;
}
.title-lightred {
    color: #fc6565 !important;
}
.title-dark {
    color: #350101;
}
.title-space {
    margin-left: 2px;
}
.code {
    background-color: #000000;
    border: 1px solid #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    /*width: 100%;*/
    font-family: 'Fira Code', monospace !important;
    margin-top: 10px;
    margin-bottom: 10px;
}
.titleicon {
    height: 45px;
    position: relative;
    top: 8px;
    left: -8px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
    /*filter: grayscale(1);*/
}
.hamburg {
    height: 45px;
    position: relative;
    top: -8px;
}
#navbar {
    width: 100%;
    display: block;
    top: 0;
    transition: top 0.5s;
}
#navbar {
    position: fixed;
    z-index: 2;
}
body.scrolled #navbar {
    background-color: #ffcea4;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    padding-bottom: 15px;
    top: -15px;
}
#nav-spacer {
    height: 60px;
}
body.scrolled .title.navbaritem {
    position: relative;
    top: 8px;
}
#navbar-inner {
    width: 95%;
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.navbaritem.right {
    margin-left: auto;
    position: absolute;
    right: 0;
    bottom: 0px;
    white-space: nowrap;
}
.navbaritem.launch {
    background: linear-gradient(101.63deg,#28a1c0 8.53%,#16489c 107.27%);
    color: #fff;
    padding: 8px 30px 8px 30px;
    border-radius: 20px;
    font-family: Medium;
}

.page-width {
    width: 1580px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-size: 30px;
    font-family: Normal;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
}

#bottom_section h1 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}

.title {
    font-family: Normal;
    font-size: 1.0em;
    color:#000000;
}

.white {
    color: #ffffff;
}

.os_title {
    color: #16489c;
}

.console_name {
    color: #b8cef7;
    font-family: Medium;
}

#console_txt {
    font-family: Normal;
}

#legaltext {
    font-size: 1.2em;
}

p {
    font-size: 20px;
    font-family: Normal;
    margin: 0;
    padding-bottom: 25px;
}
#android_line, #download_line {
    font-size: 20px;
    font-family: Normal;
    margin: 0;
}

#android_btn {
    height: 65px;
}

#android_btn {
    margin-bottom: 25px;
}

#download_line #download_btn, #download_line #cpu_select, #download_line #pkg_select {
    margin-bottom: 25px;
}
#download_line :not(:last-child) {
    margin-right: 15px;
}
p#top_screenshot_anchor, p#bottom_screenshot_anchor {
    padding-bottom: 0px;
    margin: 0;
}
#bottom_section p {
    padding-bottom: 15px;
}
.strong {
    font-family: Medium;
}

.small-top-pad {
    padding-top:14px;
}

#screenshot_display {
    position: relative;
}
#screenshot_container {
    position: relative;
    left:0;
    right:0;
    z-index: 1;
}
#screenshot {
    width: 100%;
    box-shadow: 6px 6px 6px rgba(0,0,0,0.9);
}

#screenshot_block {
    float: right;
}
#screenshot_display {
    margin-bottom: 20px;
}

.pad-spacer {
    margin-left: 15px;
}

.os_select {
    display: inline-block;
    text-align: center;
    border-radius: 16px;
    background-color: rgba(245, 245, 245, 0.6);
    border: 1px solid #ffffff;
    cursor: pointer;
}

.os_select:hover {
    background-color: rgba(245, 245, 245, 0.8);
}

.os_text {
    text-align: center;
    color: #888888;
}

.os_select.selected {
    background-color: rgb(171, 206, 243);
    border: 1px solid rgba(40, 140, 244, 0.55);
}

.os_select.selected:hover {
    background-color: rgb(154, 198, 245);
}

.os_select.selected .os_text {
    color: rgba(40, 140, 244, 1.0);
}

.os_icon {
    margin-left: auto;
    margin-right: auto;
}

#select_os {
    /*white-space: nowrap;*/
    font-size: 20px;
    font-family: Normal;
    margin: 0;
    padding-bottom: 10px;
}

.os_select {
    padding-top: 10px;
    padding-bottom: 10px;
    /*padding-left:23px;
    padding-right:23px;*/
    margin-bottom: 15px;
    width:92px;
}

.os_text {
    padding-top: 0px;
    padding-bottom: 8px;
    font-size: 14px;
    margin-top: -2px;
}

.os_select {
    margin-right: 10px;
}

#download_btn {
    background-color: #16489c !important;
    color: #FFF !important;
    border: none !important;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 23px;
    font-family: Normal;
    border-radius: 4px;
    border: 1px solid #06186c !important;
}

#download_btn:disabled {
    background-color: #626364 !important;
    cursor: not-allowed;
}

#download_btn.failed {
    background-color: #f53434 !important;
}

#download_btn:active:not(:disabled) {
    position:relative;
    top:1px;
}
#cpu_select, #pkg_select {
    background-color: #ffffff !important;
    color: #000;
    border: none !important;
    padding-left: 10px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 23px;
    font-family: Normal;
    border-radius: 4px;
    border: 1px solid #16489c !important;
}

@media (min-width: 1080px) {
    .half-when-large {
        width: 45%;
    }
    #screenshot_block {
        margin-left:auto;
        margin-right:0;
        width:50%;
        float: right;
    }
    #screenshot_display {
        margin-top: -250px;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    #screenshot {
        box-shadow: 8px 8px 16px rgba(0,0,0,0.9);
    }
}
@media (max-width: 1080px) {
    #bottom_section {
        width: 100%;
    }
    #top_section {
        width: 100%;
    }
    #screenshot_display {
        margin-top: 0px !important;
    }
}
@media (min-width: 1380px) {
    .showmobile {
        display: none !important;
    }
    #screenshot_display {
        margin-top: -300px;
        margin-left: 10px;
    }
    p {
        font-size: 26px;
    }

    #bottom_section h1 {
        font-size: 32px;
    }

    .pad-when-large {
        padding-top: 40px;
    }
}
@media (max-width: 1380px) {
    .hiddenmobile {
        display: none !important;
    }
    .navbaritem {
        font-size: 14px;
        margin: 5px;
        top: 8px;
        position: relative;
    }
    .navbaritem.inner {
        margin-bottom: 0px;
    }
    
    #navbar-inner {
        width: 95%;
    }

    .title.navbaritem {
       font-size: 26px;
        position: relative;
        left: 8px;
    }
    .titleicon {
        height: 39px;
        top: 8px;
        left: -8px;
    }
    .navbaritem.launch {
        top: 9px;
        vertical-align: top;
    }
    body.scrolled .title.navbaritem {
        top: 10px;
    }
    .hamburg {
        top: -3px;
    }
}
@media (max-width: 1600px) {
    .page-width {
        width: 85%;
    }
}
@media (min-width: 600px) {
   
}
@media (max-width:600px) {
    .navbaritem.launch {
        display: none;
    }
    .title.navbaritem {
       font-size: 22px;
        position: relative;
        left: 8px;
    }
    .titleicon {
        height: 35px;
        top: 8px;
        left: -8px;
    }
    .hamburg {
        top: -6px;
    }

    h1 {
        font-size: 25px;
    }

    p {
        font-size: 16px;
    }

#download_btn {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}

#android_btn {
    height: 50px;
}

#cpu_select, #pkg_select {
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}

#legaltext {
    font-size: 0.8em;
}

.pad-spacer {
    margin-left: 7px;
}

#download_line :not(:last-child) {
    margin-right: 7px;
}

.os_select {
    padding-top: 5px;
    padding-bottom: 5px;
    /*padding-left:10px;
    padding-right:10px;*/
    width:56px;
}

.os_text {
    padding-top: 0px;
    padding-bottom: 4px;
    font-size: 8px;
    margin-top: -4px;
}

.os_select{
    margin-right: 6px;
}

}

@font-face {
    font-family: Thin;
    src: url('/assets/fonts/Roboto-Light.ttf');
}

@font-face {
    font-family: Bold;
    src: url('/assets/fonts/Roboto-Bold.ttf');
}

@font-face {
    font-family: Normal;
    src: url('/assets/fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: Medium;
    src: url('/assets/fonts/Roboto-Medium.ttf');
}

.yes_os.unset {
    display: none;
}

select {
      appearance: none;
      background-color: transparent;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><polyline points='8,12,15,8,22,12' fill='none' style='stroke:white;stroke-width:2'/><polyline points='8,18,15,22,22,18' fill='none' style='stroke:white;stroke-width:2'/></svg>"),
        linear-gradient(to bottom, #a0d8ff 0%, #2591dd 100%);
      background-repeat: no-repeat;
      background-position: right;
      background-size: 30px;
      padding-right: 45px !important;
}

select:invalid {
  color: #999999; /* Placeholder color, e.g., a light gray */
}

/* Style the select element when a valid option is selected */
select:valid {
  color: #000000; /* Normal text color, e.g., black */
}

/* Ensure options have the normal text color when the dropdown is open */
option {
  color: #000000;
}