@import url('https://fonts.googleapis.com/css?family=Oswald');

        html{
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', sans-serif;
            color: #222222;
            background-color: #FDFDFD;
            overflow: hidden;
            position: relative;
            height: 100vh;
        }

        .container {
            margin: 0 auto;
            padding: 0 20px;
        }

        header {
            user-select: none;
            background-color: #FDFDFD;
            color: #222222;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding-left: 50px;
            padding-right: 50px;
            background-image: linear-gradient(white 25%, transparent), url(Snoflinga_menubg.jpg);
            background-size: 100% 100%, cover;
            background-repeat: no-repeat;
        }

        nav {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline-block;
            margin-left: 10px;
            margin-right: 10px;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 1.2em;
        }

        nav ul li a:hover {
            text-decoration: underline;
        }

        h1 {
            font-size: 4em;
            margin-top: 0;
            margin-bottom: 20px;
            text-align: center;
        }

        p {
            font-size: 1.5em;
            margin: 0;
            text-align: center;
        }

        section {
            margin: 0px 10;
            min-height: 100vh;
        }

        section h2 {
            text-align: center;
            margin-bottom: 60px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 40px;
        }

        .grid-item {
            text-align: center;
        }

        .grid-item i {
            font-size: 3em;
            margin-bottom: 20px;
            color: #0080ff;
        }

        .grid-item h3 {
            font-size: 2em;
            margin-bottom: 20px;
        }

        .grid-item p {
            font-size: 1.2em;
            line-height: 1.6em;
            margin-left: auto;
            margin-right: auto;
        }

        #rounded_corners {
          border-radius: 15px 50px;
          border: 2px solid #2F5597;
          padding: 10px;
          width: 120px;
          height: 100px;
          margin-bottom: 20px;
        }

        .back-to-top{
          color:#2F5597;
          padding-top:1.8em;
          display:inline-block;
          position:relative;
          border-color:white;
          text-decoration:none;
          transition:all .3s ease-out;
        }

        .back-to-top:before{
          content:'▲';
          font-size:.9em;
          position:absolute;
          top:0;
          left:50%;
          margin-left:-.7em;
          border:solid .13em white;
          border-radius:10em;
          width:1.4em;
          height:1.4em;
          line-height:1.3em;
          border-color:inherit;
          transition:transform .5s ease-in;
        }

        .back-to-top:hover{
          color:#A6A6A6;
          border-color:#A6A6A6;
        }

        .back-to-top:hover:before{
          transform: rotate(360deg);
        }

        .burger-wrapper {
          cursor: pointer;
        }

        #meny {
            background: #333;
            width: 100%;
            height: 100vh;
            position: fixed;
            right: 0;
            transition-timing-function: cubic-bezier(10,2,3,1);
            transform: translateX(100%);
            top: 0;
            z-index: 1;
            transition: 0.5s;
            color: #FDFDFD;
            background-image: linear-gradient(transparent, white 85%), url(Snoflinga_menubg.jpg);
            background-size: 100% 100%, cover;
            background-repeat: no-repeat;
//          padding-bottom: 18%;
        }

        #menyAvPaa {
            display: none;
        }

        #menyAvPaa:checked ~ #meny {
            transform: translateX(0rem);
        }

        #menylogo {
            position: absolute;
            user-select: none;
            width: 2rem;
            height: 2rem;
            left: 1rem;
            top: 1rem;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            -webkit-filter: invert(100%);
            filter: invert(100%);
        }

        #burger {
            position: absolute;
            cursor: pointer;
            width: 2rem;
            height: 2rem;
            right: 1rem;
            top: 1rem;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }

        #burger > div {
            height: 2px;
            background-color: #000;
            transition: 0.5s;
            z-index: 999;
        }

        #menyAvPaa:checked ~ #burger > div {
          background-color: #fff;
        }

        #menyAvPaa:checked ~ #burger > div:nth-child(1) {
            transform: translateY(15px) rotate(45deg);
        }

        #menyAvPaa:checked ~ #burger > div:nth-child(2) {
            opacity: 0;
        }

        #menyAvPaa:checked ~ #burger > div:nth-child(3) {
            transform: translateY(-15px) rotate(-45deg);
        }


        footer {
            background-color: red;
            color: #fff;
            text-align: center;
            padding: 20px;
        }

        footer p {
            margin: 0;
            font-size: 1.2em;
        }

//body{
//  background:#FFF;
//}





.underline-animation {
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.underline-animation svg {
  position: absolute;
  top: 80%;
  left: 0;
  width: 100%;
  height: auto;
}
.underline-animation .stroke {
  stroke: tomato;
  stroke-width: 0.15em;
  stroke-dasharray: 822;
  stroke-dashoffset: 822;
  -webkit-animation: underlineAnimation 1.8s 1s linear forwards;
          animation: underlineAnimation 1.8s 1s linear forwards;
}

@-webkit-keyframes underlineAnimation {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes underlineAnimation {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}








/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
  opacity: 0.2;
}
.snowflake img {
  width:10px; 
  heigh:10px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

@-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}

.tick_container {
  background-color: tomato;
  opacity: 0.9;
  color: white;
  margin: 0;
  width: 100%;
  height: auto;
  border-radius: 5px;
  text-align: center;
}

.header {
  font-size: 32px;
}

.stock {
  display: flex;
  padding-bottom: 5px;
}

.name, .price, .change {
  flex: 1;
}

.lastUpdated {
  font-size: 16px;
}

.closeTime {
  font-size: 18px;
}

.searchbar {
  width: 85%;
  height: 30px;
  margin: 5% 5% 5% 5%;
  font-size: 16px;
  text-align: center;
}

.cookie {
  margin: 5% 5% 5% 5%;
  color: #000;
  color: rgba(0, 0, 0, 0.3);
}

.hidden {
  display: none;
}

#stockChart {
  width: 100%;
  padding-bottom: 5%;
  text-align:center;
}