:root{
   --col1: #9dd9d2;
   --col2: #392f5a;
   --col3: #696D7D;
   --col4: #6FD1D8;
   --col41:#6FDFD8;
   --col5: #E28B5C;
   --col6: #F5EFFF;
   --col7: #4A6D7C;
   --black: #07090F;
   --col9: #62929E;
   --col10: #9c9c9c54;
   --bcol: #657383;
   --ccc: #d3d3d3;
   --orange: #f1c3a6;
   --red: #d66d67;
   --blue: #3B77A4;
   --lightblue: #a5c6df;
   --darkblue: #002e52;
   --formblue: #004172;
   --white: #fbf8ff;

 }

 * {
   font-family: 'Courier New', Courier, monospace;
   padding: 0;
   margin: 0;
 }

 body {
   background-color: var(--white);
 }

 .login-page {
   background-color: var(--formblue);
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .login-page .login-logo {
  width: 384px;
  height: 78px;
  margin: 10px;
  background-image: url(img/WsekAlt2.png);
  background-size: 100%;
  position: relative;
  bottom: 0;
 }

 .login-page .login-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    /*justify-content: center; */
 }

.login-page .login-content form {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 60%;
   margin-left: 20%;
 }

 .login-page .login-content form button {
    margin-top: 0.5rem;
    background-color: var(--white);
    color: var(--formblue);
    font-weight: bold;
    border: solid 1px var(--white);
    border-radius: 4px;
    width: 50%;
    margin-left: 25%; 
  }

  .login-page .login-content form button:hover {
    background-color: var(--formblue);
    color: var(--white);
  }

 /* check out REM */

 /* Style the tab */
 .tab {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    background-color: var(--col6); /* #397fa8; */
    max-width: 1000px;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: var(--lightblue);
    float: left;
    border: 1px solid var(--blue);
    border-top-left-radius: 0%;
    border-top-right-radius: 10%;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: var(--orange);
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: var(--red);
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 0;
    border: 1px solid var(--blue);
    border-top: none;
    
  }

  .tabRow {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--ccc);
    padding: 4px;
    margin: 0;
    white-space: pre-wrap;
    
  }

  .tabRow .score-div {
    display: flex;
    justify-content: space-between;
    margin-right: 5%;
  }

  .tabRow a, .tabRow p, .tabRow div {
    width: 20%;
  }

  .tabRow .description {
    width: 40%;
  }

  .tabRow p {
    width: 20%;
  }

  .tabRow .score-div {
    width: 20%;
  }
  
  .tabRow .score-div p {
    padding-left: 5px;
    padding-right: 5px;
  }

  .upvote, .downvote {
    color: #E28B5C;
    border: none;
    font-size: medium;
    width: 30px;
  }

  .banner {
    display: flex;
    justify-content: space-between;
    padding: 0px;
    width: 100%;
    height: 50px;
    /*border-bottom: 2px solid var(--blue); */
    background-color: var(--blue);
    
  }

  .banner .logo {
    /* border: 2px solid red; */
    width: 192px;
    height: 39px;
    margin: 10px;
    margin-bottom: 2px;
    background-image: url(img/WsekAlt2.png);
    background-size: 100%;
    position: relative;
    bottom: 0;
  }

  .banner .upload-ref {
    font-size: large;
    color: var(--col6);
    background-color: var(--formblue);
    text-decoration: none;
    margin-top: 2px;
    margin-right: 5%;
    padding: 15px;
  }

  .banner .upload-ref:hover {
    border-left: 3px solid var(--orange);
    border-top: 3px solid var(--orange);
    border-right: 3px solid var(--orange);
  }



  .page {
    display: flex;
  }

  .page .content {
    padding: 1rem;
  }

  .page .content .startpagecontent {
    display: flex;
  }

  .page .content .page-header {
    padding: 20px;
    margin-left: 3rem;
    margin-top: 2rem;
    border-bottom: 1px solid var(--red);
    color: var(--black);
  }

  .page .content .start-header {
    width: 700px;
    padding: 20px;
    margin-left: 3rem;
    margin-top: 2rem;
    border-bottom: 1px solid var(--red);
    color: var(--black);
  }

  .page .content .total-tab {
    padding: 2rem;
    margin-left: 2rem;
  }

  .page .content .message {
    padding: 3rem;
    margin-left: 2rem;
    width: 500px;
    color: var(--black);
  }

  .page .content .main-message {
    margin-bottom: 1rem;
  }

  .page .content .booklink {
    margin: 10px;
    margin-top: 20%;
    border: 5px solid var(--blue);
    border-radius: 1rem;
    padding: 10px;
    height: 300px;
    width: 300px;
    color: var(--white);
    background-color: var(--blue);
  }

  .page .content .booklink a{
    color: var(--orange);
    margin: 0;
    padding: 0;
  }

  .page .navigation {
    width: 200px;
    height: 1000px;
    background-color: var(--lightblue);
    padding-top: 2px;
  }

  .page .navigation ul {
    display: none;
  }

  .page .navigation button {
    width: 200px;
    min-height: 50px;
    border: none;
    padding: 10px;
    font-size: medium;
    background-color: var(--lightblue);
  }

  .page .navigation .year-button {
    background-color: var(--col6);
    border-bottom: 2px solid var(--lightblue);
    border-top: 2px solid var(--lightblue);
    border-left: 4px solid var(--lightblue);
    color: var(--darkblue);
    text-align: left;
  }

  .page .navigation .year-button:hover {
    border-bottom: 2px solid var(--orange);
    border-top: 2px solid var(--orange);
    border-left: 4px solid var(--orange);
  }
  
  .page .navigation .course-button {
    width: 180px;
    margin-left: 20px;
    color: var(--darkblue);
    border-left: 2px solid var(--lightblue);
    border-top: 2px solid var(--lightblue);
    border-bottom: 2px solid var(--lightblue);
  }
  .page .navigation .course-button:hover {
    background-color: var(--blue);
    color: var(--col6);
  }

  .wrapper-form {
    max-width: fit-content;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border: 5px solid var(--col3);
    border-radius: 5%;
    background-color: var(--col2);
  }

  .in-form {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    color: var(--col6);

    font-size: large;
  }

  .wrapper-form .in-form input[type=text], textarea {
    border: 2px solid var(--col3);
    padding: 0.4rem;
    color: var(--col6);
    background-color: var(--blue);
    font-weight: bold;
  }

  .wrapper-form .in-form input[type=text]:focus, textarea:focus {
    outline: none;
    background-color: var(--lightblue);
    border-bottom: 2px solid var(--orange);
    border-left: 2px solid var(--orange);
    color: var(--black);
  }

  .wrapper-form .in-form #beskriv {
    width: 400px;
    height: 150px;
    resize: none;
    box-sizing: border-box;
  }