.row {  
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  line-height: 2;
  font-family: 'Poppins', sans-serif;
  padding-top: 80px;
  padding-left: 10px;
}
p {
  margin-left: 5px;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  margin-top:50px;
  vertical-align: top;
}  
.side .img {
vertical-align: middle;
margin: 10px 5%;
}
.side .img :focus {
  outline: solid 3px;
  max-width: 100%;
  height: auto;
}

.side .plan {
  border-style: solid;
  padding: 5px;
  width: 95%;
  margin-bottom: 10px;
}

.side .plan ul{
  padding-left: 20px;
}

/* Main column */
.main {
  flex: 70%;
 
}

/*Main på testfest siden */
.main .testfest{
margin-right: 25px;
}

/* Task under Main på testfest */
.main .task{
  background-color: #eeeeee;
  padding: 2em 3em;
  margin-top: 2em;
  color: black;
}
.main .task ul li,.main .task ol a {
  margin-left: 40px;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .header-right {   
    flex-direction: column;
  }
  .side{
    padding-top: 20px !important;
  }
}





 /* dark and light mode */
 #darkmode{
  position: absolute;
  right: 10px;
  top: 85px;
  font-size: medium;
 }
  [data-theme="light"] {
    background-color: white;
    }
    [data-theme="light"] .row .main .testfest .task a{
      color: #3E0BA2;
    }


    [data-theme="dark"] {
    background-color: black;
    color: white;
    }
    [data-theme="dark"] .main a {
      color: #ffb6c1;
      }
      [data-theme="dark"] .row .main .testfest .task a{
        color: #3E0BA2;
      }