/* -- Skarvsyn -- 
       V. 0.4
   --------------*/

body {
  font-family: Arial, sans-serif;
}

#top {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 45px;
}

/* Top Bar */
#topBar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 54px;
  background-color: #ffffff;
  box-shadow: 0px -25px 40px #5b5b5b;
  z-index: 10;
}

.topBarLink {
  top: -12px;
  position: relative;
  text-decoration: none;
  margin-left: 20px;
  color: black;
}

#logo {
  position: relative;
  top: 4px;
  left: 5px;
}
  
/* Webkamera */
#ImgArgiv {
    width: 50%;
    display: grid;
    gap: 10px;
    grid-template-columns: 0fr 2fr 0fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:  
    "a b c"
    "e e e";  
}

.a1 { grid-area : a; }
.a2 { grid-area : b; }
.a3 { grid-area : c; }
.b1 { grid-area : e; }

#ImgRange {
    width: 100%;
}

#webkamera {
    width: 50%;
}

/* Telefon */
@media only screen and (max-width: 768px) {
    #ImgArgiv {
        width: 100%;
        display: grid;
        gap: 10px;
        grid-template-columns: 0fr 2fr 0fr 0fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:  
        "a b c d"
        "e e e e";  
    }

    #webkamera {
        width: 100%;
    }
    
    .a3 {
      display: none;
    }
}

/* Range */
.range-wrap{
  width: 100%;
  position: relative;
}

.range-value{
  position: absolute;
  top: -132%;
  visibility: hidden;
}

.range-value span{
  width: 48px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: #0075ff;
  color: #fff;
  font-size: 12px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 6px;
}

.range-value span:before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #0075ff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}

/* Kalender */
#kalender {
  display: grid;
  box-shadow: 0px 0px 20px 0px #5b5b5b33;
  border-radius: 5px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 180px;
  height: 150px;
  grid-template-areas: 
    "m m m m m m m" 
    "ma ti on to fr lo so"
    "ma1 ti1 on1 to1 fr1 lo1 so1"
    "ma2 ti2 on2 to2 fr2 lo2 so2"
    "ma3 ti3 on3 to3 fr3 lo3 so3"
    "ma4 ti4 on4 to4 fr4 lo4 so4"
    "ma5 ti5 on5 to5 fr5 lo5 so5"
    "ma6 ti6 on6 to6 fr6 lo6 so6";
}

#kalender > div {
  text-align: center;
}

.maande  { 
  grid-area : m; 
  color: #ffffff;
  border-radius: 5px 5px 0px 0px;
}
.mandag  { grid-area : ma; }
.tirsdag { grid-area : ti; }
.onsdag  { grid-area : on; }
.torsdag { grid-area : to; }
.fredag  { grid-area : fr; }
.lordag  { grid-area : lo; }
.sondag  { grid-area : so; }

.ma1 { grid-area : ma1; }
.ti1 { grid-area : ti1; }
.on1 { grid-area : on1; }
.to1 { grid-area : to1; }
.fr1 { grid-area : fr1; }
.lo1 { grid-area : lo1; }
.so1 { grid-area : so1; }

.ma2 { grid-area : ma2; }
.ti2 { grid-area : ti2; }
.on2 { grid-area : on2; }
.to2 { grid-area : to2; }
.fr2 { grid-area : fr2; }
.lo2 { grid-area : lo2; }
.so2 { grid-area : so2; }

.ma3 { grid-area : ma3; }
.ti3 { grid-area : ti3; }
.on3 { grid-area : on3; }
.to3 { grid-area : to3; }
.fr3 { grid-area : fr3; }
.lo3 { grid-area : lo3; }
.so3 { grid-area : so3; }

.ma4 { grid-area : ma4; }
.ti4 { grid-area : ti4; }
.on4 { grid-area : on4; }
.to4 { grid-area : to4; }
.fr4 { grid-area : fr4; }
.lo4 { grid-area : lo4; }
.so4 { grid-area : so4; }

.ma5 { grid-area : ma5; }
.ti5 { grid-area : ti5; }
.on5 { grid-area : on5; }
.to5 { grid-area : to5; }
.fr5 { grid-area : fr5; }
.lo5 { grid-area : lo5; }
.so5 { grid-area : so5; }

.ma6 { grid-area : ma6; }
.ti6 { grid-area : ti6; }
.on6 { grid-area : on6; }
.to6 { grid-area : to6; }
.fr6 { grid-area : fr6; }
.lo6 { grid-area : lo6; }
.so6 { grid-area : so6; }

/* Dark - modus */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #202023;
    color: #ffffff;
  }

  #topBar {
    background-color: #202023;
    box-shadow: 0px -25px 40px #747474;
  }

  .topBarLink {
    color: #ffffff;
  }

  select {
    background-color: #202023;
    color: #ffffff;
  }

  #kalender {
    box-shadow: 0px 0px 20px 0px #7474742e;
  }
}

#sideTittel {
  text-align: center;
}

/* Index grid */
body {
    font-family: Arial, Helvetica, sans-serif;
}

.bilde {
    grid-area : b;
}

.vaer { 
    grid-area : v; 
    background-color: white;
    box-shadow: 0px 0px 25px #e4e4e4;
    border-radius: 10px;
    font-size: 1.1em;
}

.temp {
    grid-area : t; 
    margin-bottom: 5px;
    background-color: white;
    box-shadow: 0px 0px 25px #e4e4e4;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hoved {
    text-align: center;
    width: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 6fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    ". b v ."
    ". b t .";
}

#GIF {
    width: 100%;
    box-shadow: 0px 0px 25px #e4e4e4;
    border-radius: 10px;
}

#vIcon {
    width: 7.5vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    display: block;
}

#vTemp {
    margin: 0;
    font-size: 3.5em;
    color: #c60000; /*#006edb*/
    font-weight: bold;
}

/* Endrer utifra skjerm bredde*/
@media only screen and (max-width: 975px) {
    .temp {
        grid-area : t; 
        background-color: white;
        box-shadow: 0px 0px 25px #e4e4e4;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
    }

    #hoved {
        text-align: center;
        width: 100%;
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 2fr 2fr 1fr;
        grid-template-rows: 1fr 0.55fr;
        grid-template-areas:
        ". b b ."
        ". v t .";
    }
}

@media only screen and (max-width: 768px) {
    .temp {
        grid-area : t; 
        background-color: white;
        box-shadow: 0px 0px 25px #e4e4e4;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
    }

    #hoved {
        text-align: center;
        width: 100%;
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.55fr 0.55fr;
        grid-template-areas:
        "b"
        "v"
        "t";
    }

    #vIcon {
        width: 15vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        display: block;
    }
}