body {
    margin: 0;
    background-color: var(--maincolor1);
    color: white;
    font-family: 'nunito';
    font-size: 1.2rem;
    text-shadow: 0 3px 10px black;
}

* {
    box-sizing: border-box;
}


:root {
    --header-footer: rgb(26, 46, 68);
    --maincolor1: rgb(42, 67, 95);
    --maincolor2: rgb(43, 76, 109);
}

@font-face {
    font-family:'nunito';
    src: url(../fonts/Nunito/Nunito-VariableFont_wght.ttf);
}



/* body {
    margin: 0;
    background: repeating-linear-gradient(
     45deg,
     var(--stripebgcol1),
     var(--stripebgcol1) 1vw,
     var(--stripebgcol2) 1vw,
     var(--stripebgcol2) 2vw);
    position: relative;
} */


img {
    width: 10rem;
}

ul {
    display: flex;
    flex-direction: row;
    background-color: var(--header-footer);
    list-style: none;
    justify-content: space-evenly;
    padding: 1.5rem;
    align-items: center;
    margin: 0;
}

a {
    text-decoration: none;
    color: white;
}

ul a {
    font-size: 1.5rem;
}


li {
    transition: 0.2s;
    position: relative;
}

li:hover {
    transform: scale(1.2);
}

#homeLeaderboardList li:hover,
#leaderboardList li:hover {
  transform: scale(1.05);
}

#homeLeaderboardList li:nth-child(1),
#leaderboardList li:nth-child(1) {
  background-color: rgba(254, 195, 0, 0.66);
  border: 1px solid rgba(255, 200, 0, 0.5);
}

#homeLeaderboardList li:nth-child(2),
#leaderboardList li:nth-child(2) {
  background-color: rgba(180, 180, 180, 0.51);
  border: 1px solid rgba(180, 180, 180, 0.5);
}

#homeLeaderboardList li:nth-child(3),
#leaderboardList li:nth-child(3) {
  background-color: rgba(180, 100, 30, 0.492);
  border: 1px solid rgba(180, 100, 30, 0.5);
}

.hoverline::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0%;
    transform: translateX(-50%);
    height: 1px;
    background-color: white;
    transition: width 0.6s ease;
}

.hoverline:hover::after {
    width: 100%;
}


.hero {
    height: 15rem;
    width: 100%;
    background-color: var(--maincolor1);
    text-align: center;
    justify-content: center;
    padding: 10px 100px;
}

#herobuttons {
    justify-content: center;
    display: flex;
    gap: 50px;
}

#mainheader {
    font-family: 'alphabetsoup';
}



.info {
    width: 100%;
    height: 20rem;
    background-color: var(--maincolor2);
    backdrop-filter: blur(2px);
    padding: 10px;
    display: flex;
}

#infoRight img {
    width: 75%;
} 

#infoRight2 img {
    width: 40%;
}


#info2 {
    background-color: var(--maincolor1);
}

#infoLeft h1 {
    margin: 0rem 0rem 1rem 5rem;
}

#infoLeft p {
    margin-top: 0;
    margin-left: 5rem;
}

#infoLeft {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#infoLeft button {
    width: 10rem;
    height: 2rem;
    margin-top: auto;
    margin-right: 2.5rem;
    margin-bottom: 2rem;
    align-self: flex-end;
}

#infoRight, #infoRight2 {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
}

#homeleaderboard {
    display: flex;
    flex-direction: column;
}

#homeleaderboard h1 {
    margin: 0rem;
}



footer {
    display: flex;
    background-color: var(--header-footer);
    margin-top: auto;
    height: 10rem;
    text-align: center;
    align-items: center;
    padding: 10px;
}


#footerLeft img {
    width: 15rem;
}

#footerLeft,
#footerMiddle,
#footerRight {
    height: 100%;
    width:calc(100%/3);
    display: flex;
    align-items: center;
    justify-content: center;
}


button a {
    color: rgb(255, 255, 255);
}

button {
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    background-color: #ed1c23c7;
    border: 1.5px solid rgba(255, 255, 255, 0.553);
    backdrop-filter: blur(10px);
    color: white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.537);
}

button:hover {
    cursor: pointer;
    transform: scale(1.1);
}


#homeleaderboard {
  width: 100%;
  padding: 1rem 2rem;
  text-align: center;
}

#homeleaderboard h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

#homeLeaderboardList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#homeLeaderboardList li {
  font-size: 1.2rem;
  background-color: rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 0.4rem 1.5rem;
  display: flex;
  justify-content: space-between;
}

/*//////////////////////////////////////////////////////////////////////////////////////*/



.quizhero {
    width: 100%;
    height: fit-content;
    min-height: 55rem;
    background-color: var(--maincolor1);
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 2rem;
}

.quizhero p, h1 {
    margin: 1rem;
}

.quizhero p {font-size: 2rem;}
.quizhero h1 {font-size: 4rem; margin: 10px;}

#quiz {
    display: flex;
    justify-content: center;
    width: 100%;
}

#quizbuttons {
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    width: fit-content;
    max-width: 60rem;
    min-width: 40rem;
    justify-content: center;
}

#quizbuttons button {
  border-radius: 1rem;
  font-size: 1.8rem;
  width: 20rem;
  max-width: 20rem;
  height: fit-content;
  padding: 1rem;
}

#next {
    display: flex;
    justify-content: flex-end;
    padding-right: 5rem;
}

#next button {
    width: 10rem;
    font-size: 2rem;
}

.correct {
    background-color: rgba(52, 143, 217, 0.75);
}

.wrong {
    background-color: rgb(146, 146, 146);
}

/* leaderboard */


#nameentry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

#nameInput {
  font-size: 1.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  border: 1.5px solid rgba(255,255,255,0.4);
  background-color: rgba(255,255,255,0.1);
  color: white;
  text-align: center;
  outline: none;
  font-family: 'nunito';
}

#nameInput::placeholder {
  color: rgba(255,255,255,0.5);
}

#leaderboard {
  margin-top: 2rem;
}

#leaderboardList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

#leaderboardList li {
  font-size: 1.5rem;
  background-color: rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 0.5rem 2rem;
  width: 20rem;
  display: flex;
  justify-content: space-between;
}

#leaderboardList li:first-child {
  background-color: rgba(222, 167, 16, 0.66);
  font-weight: bold;
}


/*//////////////////////////////////////////////*/


.grafiskHero {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logografisk {
    display: flex;
}

.grafiskHero img {
    margin: 2rem;
    width: 30rem;
}

#colorpallete {
    width: 100%;
    display: flex;
    gap: 2rem;
    background-color: var(--maincolor2);
    backdrop-filter: blur(5px);
    justify-content: center;
    padding: 2rem 0;
}

#colorpallete div {
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 2rem;
    height: fit-content;
    width: 15rem;
    transition: 0.3s;
}

#colorpallete div:hover {
    transform: scale(1.1);
}

#color1 {background-color: #ed1c24;}

#color2 {background-color: #1c75bc;}

#color3 {background-color: #000000;}

#color4 {
    background-color: #ffffff;
    color: black;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.403);
}


@font-face {
  font-family: 'alphabetsoup';
  src: url('../fonts/t.h.alphabetsoupregular.ttf');
}

.fontgrafisk {
    justify-content: center;
    display: flex;
    gap: 5rem;
}

#alphabetsoup {
    font-family: 'alphabetsoup';
}

#nunito {
    font-family: 'nunito';
}

/*//////////////////////////////////////////////////////////*/

.videohero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.videohero iframe {
    width: calc(426px * 2);
    height: calc(240px * 2);
}


/* ///////////////////////////////////////////////////////// */

.somehero, .videohero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 5rem;
    text-align: center;
}

.somehero p, .videohero p {
    width: 50rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}