body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background-color: #231F20;
    position: relative;
    font-family: Lucida Console;
}

.container{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
}

.circle {
    width: 100px;
    height: 100px;
    margin: 0px auto;
    background: linear-gradient(135deg, #5DAAC6 , #2E2E33);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    border-radius: 50%;
    border: 4px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 0 2pt white;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(1000px);
}

.earth {
    margin: 0px auto;
}

.circle img {
    position: absolute;
    width: auto;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translateZ(20px) translateX(-50%) translateY(-50%) scale(var(--s));
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.circle .round{
    border-radius: 50%;
}

.plx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateZ(20px) translateX(-50%) translateY(-50%);
}

.plx-text {
    color: white;
    font-size: 24px;
    margin: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateZ(20px) translate(-50%, -50%);
}

.plx-box {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translateZ(20px) translateX(-50%) translateY(-50%);
    background-color: black;
}

.plx-box-text {
    color: white;
    font-size: 24px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform:  translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.js-tilt-glare{
    border-radius: 50%;
}

.planet-container {
    z-index: 10;
    position: absolute;
    top: 16%;
    left: 16%;
    --d: 5.2em; /* image size */
    --rel: 1.5; /* how much extra space we want between images, 1 = one image size */
    --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
    --s: calc(2*var(--r) + var(--d)); /* container size */
    position: relative;
    width: var(--s); height: var(--s);
}
  
.planet-container a {
    max-width: 100%;
    position: absolute;
    top: 50%; left: 50%;
    margin: calc(-.5*var(--d));
    width: var(--d); height: var(--d);
    --az: calc(var(--i)*1turn/var(--m));
    transform: 
      rotate(var(--az)) 
      translate(var(--r))
      rotate(calc(-1*var(--az)))
}

.planet-container .middle {
    --mid: 22em;
    position: absolute;
    top: 52%; left: 52.5%;
    margin: calc(-.5*var(--mid));
    width: var(--mid); height: var(--mid);
}

.right-side{
    z-index: 1;
    position: absolute;
    padding: 10px;
    top: 36%;
    left: 58%;
    width: auto;
    height: auto;
    text-align: center;
    background-color: #141414c0;
    border-radius: 10px;
}

.day {
    text-align: center;
    font-size: 40px;
    color: white;
}
.clock {
    text-align: center;
    font-size: 100px;
    color: white;
}
.weather {
    text-align: center;
    font-size: 40px;
    color: white;
}
.temp-unit{
    font-size: 20px;
    color: gray
}

img { max-width: 100% }

.noselect{
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


.settings-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    transition: opacity 400ms;
    opacity: .25;
}

.settings-button:hover {
    opacity:0.75;
} 

/* w3 code: */
/* The sidepanel menu */
.sidepanel {
    height: 0; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 100; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    padding-bottom: 25px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow: hidden;
}
.sidepanel::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

/* The sidepanel links */
.sidepanel .panel-link {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.sorthandle{
    text-decoration: none !important;
    color: gray;
}
.sorthandle:hover{
    color: white;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidepanel .settings-button-close {
    position: absolute;
    top: 0;
    left: 0px;
    font-size: 36px;
    margin-left: 0px;
}

.panel {
    white-space:nowrap;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;  
}

.mobile {
    width: 100%;
    height: 100%;
    font-size: xx-large;
    text-align: center;
    color: white;
}

.sortable-drag {
    opacity: 0;
}

.link-item{
    border-radius: 5px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    padding: 2px 2px 4px 2px;
    margin: 4px 4px 4px 4px;
    vertical-align: middle;
}

.link-item-delete{
    opacity: 0;
    position: absolute;
    left: 10px;
    color: red;
    transition: opacity 100ms;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
.link-item-delete:hover{
    opacity: 1;
    cursor: pointer;
}

.sortable-ghost .link-item-delete{
    left: -28px;
}
.sortable-drag .link-item-delete{
    left: -28px;
}
.sortable-chosen .link-item-delete{
    left: -28px;
}

form{
    display: inline-block;
    font-size: 18px;
}

.textbox{
    position: relative;
    top: -2px;
    width: 250px;
    height: 25px;
    background: 0 0;
    font-size: 15px;
    color: rgb(175, 175, 175);
    font-family: Lucida Console;
    line-height: 1.2;
    padding: 0 2px;
    outline: none;
    border-radius: 3px;
    border: 1px solid rgba(128, 128, 128, 0.05);
    background-color: #151515;
    border-bottom: 1px solid white;
}

.settings-panel-button{
    vertical-align: middle;
    font-family: Lucida Console;
    width: auto;
    height: 25px;
    background-color: #31aa52;
    border: 2px solid #31aa52;
    border-radius: 3px;
    transition: all 100ms;
}
.settings-panel-button:hover{
    background-color: hsl(136, 90%, 43%);
    border: 2px solid hsl(136, 90%, 43%);
}
.settings-panel-button:active{
    background-color: hsl(136, 90%, 43%);
    border: 2px solid hsl(136, 90%, 43%);
    transform: translate(0px, 3px);
}