wrapperr/web/assets/css/wrapped.css

:root {
    --red: #F94144;
    --orangered: #F3722C;
    --orangeyellow: #F8961E;
    --mango: #F9844A;
    --yellow: #F9C74F;
    --pistach: #90BE6D;
    --green: #43AA8B;
    --cadetblue: #4D908E;
    --queenblue: #577590;
    --blue: #277DA1;
    --white: #f1f1f1;
    --black: #181818;
    --charcoal: #414141;
    --charcoal-accent-red: 65;
    --charcoal-accent-green: 65;
    --charcoal-accent-blue: 65;
} 


html {
    height: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: 'Roboto', serif;
  font-weight: normal;
  background-color: var(--black);
  box-sizing: border-box;
}

#background_image {
  box-sizing: border-box;
  background-image: none;
  background-color: var(--mango);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  position: fixed;
  height: inherit;
  width: inherit;
  transition: 2s;
}

h1{
    font-size: 2.5em;
    color: var(--white);
    text-shadow: 1px 1px 2px #555;
    line-height: 110%;
    text-align: center;
    padding: 0.25em 0;
    margin: 0;
}

h2{
    text-shadow: 1px 1px 2px #555;
    font-size: 2em;
    color: var(--white);
    line-height: 110%;
    text-align: center;
    margin: 0;
    font-weight: normal;
    padding: 0.25em 0;
}

h3{
    text-shadow: 1px 1px 2px #555;
    color: var(--white);
    text-shadow: 1px 1px 2px #555;
    line-height: 110%;
    text-align: center;
    font-family: 'Roboto', serif;
    font-size: 1.5em;
    text-overflow: clip;
    margin: 0.5em;
}

h4{
    font-size: 1.5em;
    margin: auto;
    text-align: center;
    font-weight: normal;
    color: var(--white);
}

p{
    text-shadow: 1px 1px 2px #555;
    font-size: 1.25em;
    color: var(--white);
    text-align: center;
    margin: 0;
}

p2{
  font-size: 1em;
  color: var(--black);
  text-align: center;
  margin: 0;
}

a {
    color: inherit;
    text-decoration: underline;
}

img {
    max-width: 100%;
}

.tittel {
  padding-top: 10em;
  width: 100%;
  margin: auto;
  display: inline-block;
  text-overflow: clip;
}

.content {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content_landing {
    width: 100%;
    margin: 0;
    height: auto;
    box-sizing: border-box;
}

.boks {
    margin: auto;
    width: 100%;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.boks2 {
    width: 30em;
    max-width: 100%;
    margin: 0;
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    padding: 2em;
    display: inline-block;
}

.boks3 {
    box-sizing: border-box;
    width: 100%;
    margin: auto;
    position: relative;
    display: flex;
    vertical-align: top;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
}

.load_top_10 {
    width: 30em;
    display: inline-block;
    margin: auto;
    max-width: 90%;
    margin-bottom: 2.5em;
    margin-top: 2.5em;
}

.tekst {
  padding: 1em;
  height: 14em;
  float: left;
  display: inline-block;
  top: 0;
}

.status_tekst {
  padding: 1em;
  height: 12em;
  float: left;
  display: inline-block;
  top: 0;
}

.stats_tekst {
  padding: 1em;
  height: 10em;
  float: left;
  display: inline-block;
  top: 0;
}

.warning {
    padding: 0.5em;
    margin: 0.5em;
    background-color: var(--yellow);
    border-radius: 0.5em;
    color: var(--black);
	  font-size: 0.75em;
}

.boks-knapp {
  height: 5em;
  width: 100% !important;
  display: inline-block;
  float: left;
}

.server:hover {
  background-color: var(--white);
  border-radius: 0.5em;
}

.status {
  display: inline-block;
  margin: auto;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
  background-color: rgba(var(--charcoal-accent-red), var(--charcoal-accent-green), var(--charcoal-accent-blue), 0.75);
  border-radius: 0.5em;
  padding: 0.5em;
  width: 100%;
  top: 0;
  color: var(--white);
  font-size: 1.25em;
  box-sizing: border-box;
  max-width: 100%;
  border: var(--yellow) 0.12em solid;
}

.stats-list {
    max-height: 75em;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.status-title {
    font-size: 1.25em;
    padding: 0.5em;
}

.button {
  padding: 0.5em;
  margin: 0.5em;
  font-family: 'Roboto', serif;
  font-size: 1.25em;
  background-color: var(--yellow);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  align-self: center;
  color: var(--white);
  padding: 1em;
}

.form {
  font-family: 'Roboto', serif;
  font-size: 1em;
  margin: 0;
}

.form_button {
  font-family: 'Roboto', serif;
  text-align: center;
  background-color: var(--yellow);
  color: var(--white);
  border: 0;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  padding: 0.5em;
  font-size: 1em;
  margin: 0.5em;
}

.form_input {
  font-family: 'Roboto', serif;
  font-size: 1em;
  width: 90%;
  margin: 0.5em;
  text-align: center;
  border-radius: 0.5em;
  border: none;
  height: 2em;
}

.item:hover {
  background-color: var(--black) !important;
  border-radius: 0.5em;
  margin: 0.5em 0;
  max-height: none;
}

.item {
  padding: 0.5em;
  display: flex;
  justify-content: space-between;
  transition: 1s;
}

.item-expandable {
  max-height: 1.25em;
  overflow-y: hidden;
}

.gold {
    background-color: #d4af37;
    border-radius: 0.5em;
}

.silver {
    background-color: #C0C0C0	;
    border-radius: 0.5em;
}

.bronze {
    background-color: #cd7f32;
    border-radius: 0.5em;
}

.list {
  display: inline-block;
  margin: 1em;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
  background-color: var(--white);
  border-radius: 0.5em;
  padding: 0.5em;
  text-align: left;
  width: 10em;
  text-overflow: ellipsis;
  overflow: hidden;
  top: 0;
  margin-top: 0;
}

.number {
  text-align: right;
  margin: 0.1em;
  display: inline-block;
  vertical-align: top;
}

.info {
  text-align: left;
  margin: 0.1em;
  display: inline-block;
  width: 6em;
  vertical-align: top;
}

.name {
  text-align: right;
  margin: 0.1em;
  display: inline-block;
  text-overflow: ellipsis;
  vertical-align: top;
}

.you {
    text-decoration: underline;
}

.movie_name {
  text-align: right;
  display: inline-block;
  margin: 0.1em;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: top;
}

.info_name {
  text-align: right;
  display: inline-block;
  margin: 0.1em;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: top;
}

.server {
  width: 10em !important;
  display: inline-block;
  margin: auto;
  text-align: left;
  padding: 0.5em;
}

.form-control {
    font-size: 1em;
    padding: 0.5em;
    margin: auto;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    border-radius: 0.5em;
    border: none;
}

.form-group {
    display: inline-block;
    margin: auto;
    float: left;
    padding: 0.5em;
    width: 100%;
    box-sizing: border-box;
}

.btn {
    background-color: var(--yellow);
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: var(--black);
}

label {
	cursor: pointer;
}

input[type="checkbox" i] {
    transform: scale(1.5);
    cursor: pointer;
    width: auto;
    box-sizing: content-box;
    display: block;
    margin-top: 0.5em;
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 2em;
  color: var(--white);
  text-align: center;
  margin: 0 0 2em 0;
}

.footer-elements {
  width: fit-content;
  height: fit-content;
  margin: auto;
  color: var(--white);
  text-align: center;
  background-color: rgba(var(--charcoal-accent-red), var(--charcoal-accent-green), var(--charcoal-accent-blue), 0.75);
  padding: 0.5em;
  color: var(--white);
  border: var(--yellow) 0.12em solid;
  border-radius: 0.5em;
}

.sign_out {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--yellow);
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  font-family: 'Roboto', serif;
  padding: 0.25em 0.5em;
  margin: auto;
}

.btn_logo {
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0 0.5em 0 0;
}

/*Snowflakes*/
#snowflakes, #snowflakes2 {
  display: none;
}

.snowflake {
  color: var(--white);
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

.snowflake-2 {
  color: var(--white);
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
  color: transparent;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  z-index: auto !important;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
@-webkit-keyframes snowflakes-fall{0%{top:-40%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(30px);transform:translateX(50px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-15%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(90px)}100%{transform:translateX(0px)}}.snowflake-2{position:fixed;top:-45%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:12s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:12s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake-2:nth-of-type(0){left:5%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake-2:nth-of-type(1){left:55%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake-2:nth-of-type(2){left:55%;-webkit-animation-delay:8s,.5s;animation-delay:8s,.5s}.snowflake-2:nth-of-type(3){left:60%;-webkit-animation-delay:6s,2s;animation-delay:4s,2s}.snowflake-2:nth-of-type(4){left:80%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake-2:nth-of-type(5){left:20%;-webkit-animation-delay:6s,3s;animation-delay:8s,3s}.snowflake-2:nth-of-type(6){left:40%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake-2:nth-of-type(7){left:30%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake-2:nth-of-type(8){left:30%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake-2:nth-of-type(9){left:60%;-webkit-animation-delay:3s,1.5s;animation-delay:4s,1.5s}

.color-red {
  background-color: var(--red);
  transition-duration: 1s;
}

.color-orangered {
  background-color: var(--orangered);
  transition-duration: 1s;
}

.color-orangeyellow {
  background-color: var(--orangeyellow);
  transition-duration: 1s;
}

.color-mango {
  background-color: var(--mango);
  transition-duration: 1s;
}

.color-pistach {
  background-color: var(--pistach);
  transition-duration: 1s;
}

.color-charcoal {
  background-color: var(--charcoal);
  transition-duration: 1s;
}

hr {
  margin: 0.5em 0;
}

.share_wrapped_url {
  padding: 0.25em;
  background: none;
  color: var(--black);
  border-radius: 0.5em;
  overflow: auto;
  font-size: 0.8em;
  width: 80%;
  box-sizing: border-box;
  white-space:nowrap;
  height: 2.5em;
  background-color: var(--white);
  display: inline-flex;
  align-items: center;
  cursor: text;
}

#share_wrapped_delete {
  padding: 0 0 0 0.25em;
  background: none;
  border-radius: 0.5em;
  overflow: auto;
  font-size: 0.8em;
  width: 10%;
  box-sizing: border-box;
  height: 1.5em;
  cursor: pointer;
}

#share_wrapped_copy {
  padding: 0 0 0 0.5em;
  background: none;
  border-radius: 0.5em;
  overflow: auto;
  font-size: 0.8em;
  width: 10%;
  box-sizing: border-box;
  height: 1.5em;
  cursor: pointer;
}

/* Loading section */
#loading {
  position: fixed;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  opacity: 1;
  background-color: var(--charcoal);
  z-index: 99;
  transition: 2s;
  overflow: hidden;
}

#loading-image {
  margin: auto;
}