body {
    background-color: #F6D5D5;
}

:root {
    --mainBoxWidth: 58vw;
    --mainBoxHeight: 60vw;
}

#user-box-grid {
    position: relative;
    margin-left: 11.7vw;
    margin-bottom: 2vw;
}

#user-box-left {
    position: relative;
    z-index: 2;
    width: 34.89vw;
    background-color: #F9F0E9;
    padding: 0.5vw;
    margin-left: 0;

    border-radius: 0.3vw;
    border: 0.1vw solid black;
}

#user-box-profile-grid {
    display: grid; 
    grid-template-columns: 1.2fr 2fr;
    width: 90%;
    margin-top: 1.5vw;
}

#user-box-name {
    font-size: 1vw;
    font-weight: 600;
}

#user-box-apellation {
    font-size: 1vw;
    font-weight: 500;
}

#user-box-sp {
    font-size: 1vw;
    font-weight: 600;
    color: rgb(132, 0, 255);
}

#user-box-profile-pic {
    width: 10vw;
    height: 10vw;
    margin-left: 0.5vw;
    border-radius: 0.5vw;
    border: 0.1vw solid black;

    background: url('/images/profilePics/erik_andersson.png') center center no-repeat;
    background-size: cover;
}

#user-box-btns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 4vw;
    width: 11.2vw;
}

.user-box-btn {
    margin: 0.8vw;
    width: auto;
    height: auto;
    cursor: pointer;

    background: center center no-repeat;
    background-size: contain;
}

#user-bio {
    font-size: 1vw;
    font-weight: 600;
    margin-left: 0.5vw;
}

#user-bio-text {
    font-size: 1vw;
    font-weight: 500;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    margin-bottom: 0.5vw;
}

#user-box-right {
    position: absolute;
    left: 38vw;
    top: 0;
    z-index: 0;
    width: 25vw;
    margin-left: -5%;
    background-color: rgb(255, 116, 139);
    padding: 0.5vw;
    padding-right: 0;
    
    border-radius: 0.3vw;
    border: 0.1vw solid black;
    height: calc(100% - 1.2vw);

    overflow: hidden; /* Viktigt: förhindra att höjden pressas ut */
}

#user-box-right-title {
    font-size: 1vw;
    font-weight: 600;
    margin-left: calc(5% + 1.5vw);
}

#user-box-right-articles-title-line-under-the-article-title-joel-nanemyr-title-line-box-user-left-or-right-verified-line {
    width: auto;
    height: 0.1vw;
    background-color: black;
    margin-left: calc(5%);
    margin-bottom: 0.5vw;
}

#user-article-list-container {
    flex: 1;
    width: auto;
    margin-top: -0.5vw;
    height: calc(100% - 2.7vw);
    overflow-y: scroll;
    scrollbar-color: grey transparent;
    
}

.user-article-list {
    margin-left: calc(5% + 1.5vw);
    font-size: 1vw;
    font-weight: 500;
    cursor: pointer;
    margin-right: 1vw;
}
.user-article-list:hover {
    text-decoration: underline;
}

#tv-box {
    position: relative;
    background-color: #F9F0E9;
    border-radius: 0.6vw;
    border: solid 0.1vw black;
    padding: 0.5vw;

    margin-left: 11.7vw;
    width: 40vw;
    margin-bottom: 2vw;
}

#tv-box-screen {
    width: calc(100% - 0.05vw);
    height: 25vw;
    background-color: rgba(102, 95, 95, 0.603);
    border-radius: 1vw;
    border: 0.1vw solid black;
    object-fit: cover;
}

#tv-controls-grid {
    display: grid;
    grid-template-columns: min-content min-content min-content min-content min-content;
    height: 3vw;
    margin-top: 0.5vw;
}

.tv-controls-grid-item {
    border-right: 0.1vw solid black;
}

.tv-play {
    width: 4vw;
    height: auto;
    border: 0.1vw solid black;
    border-bottom: 0.2vw solid black;
    border-radius: 0.5vw 0 0 0.5vw;
    border-right: none;
    cursor: pointer;

    background: url('/images/site/pixel8/icons8-play-90.png') center center no-repeat;
    background-size: 1.5vw;
}
.tv-play:active {
    margin-top: 0.1vw;
    border-bottom: 0.1vw solid black;
}

.tv-pause {
    width: 4vw;
    height: auto;
    border: 0.1vw solid black;
    border-bottom: 0.2vw solid black;
    border-right: none;
    cursor: pointer;

    background: url('/images/site/pixel8/icons8-pause-90.png') center center no-repeat;
    background-size: 1.5vw;
}
.tv-pause:active {
    margin-top: 0.1vw;
    border-bottom: 0.1vw solid black;
}

.tv-back {
    width: 4vw;
    height: auto;
    border: 0.1vw solid black;
    border-bottom: 0.2vw solid black;
    border-right: none;
    cursor: pointer;

    background: url('/images/site/pixel8/icons8-rewind-60.png') center center no-repeat;
    background-size: 1.5vw;
}
.tv-back:active {
    margin-top: 0.1vw;
    border-bottom: 0.1vw solid black;
}

.tv-forward {
    width: 4vw;
    height: auto;
    border: 0.1vw solid black;
    border-bottom: 0.2vw solid black;
    border-radius: 0 0.5vw 0.5vw 0;
    cursor: pointer;

    background: url('/images/site/pixel8/icons8-fast-forward-60.png') center center no-repeat;
    background-size: 1.5vw;
}
.tv-forward:active {
    margin-top: 0.1vw;
    border-bottom: 0.1vw solid black;
}

.tv-loop {
    width: 4vw;
    height: auto;
    border: 0.1vw solid black;
    border-bottom: 0.2vw solid black;
    border-radius: 0.5vw;
    cursor: pointer;
    margin-left: 19.7vw;

    background: url('/images/site/pixel8/icons8-repeat-90.png') center center no-repeat;
    background-size: 1.5vw;
}
.tv-loop:active {
    margin-top: 0.1vw;
    border-bottom: 0.1vw solid black;
}

.tv-selected {
    margin-top: 0.1vw;
    border-bottom: 0.1vw solid black;
}


.NoelJanemyr {
    background-color: #F9F0E9;
    border-radius: 0.3vw;
    border: solid 0.1vw black;
    padding: 0.5vw;

    margin-left: 11.7vw;
    width: fit-content;
    margin-bottom: 2vw;
}

.windowTitle {
    font-size: 1vw;
    text-align: left;
    margin: 0;
    margin-bottom: 0.3vw;
}

.tabs {
    border-radius: none;
    margin-bottom: 2.3vw;
}

:root {
    --tabsWidth: 14.53vw;
    --tabsHeight: 2vw;
}

/* Style the buttons that are used to open the tab content */
.tabs button {
  background-color: inherit;
  float: left;
  border: solid 0.1vw black;
  border-right: none;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.8vw;
  background-color: white;

  height: var(--tabsHeight);
  width: var(--tabsWidth);
}

/* Create an active/current tablink class */
.tabs button.active {
    border-top: solid 0.1vw black;
    border-right: solid 0.1vw black;
    border-radius: 0.2vw 0.2vw 0 0;
    height: 2.2vw;
    margin-top: -0.2vw;
    border-bottom: none;
}

#Följer {
    border-right: solid 0.1vw black;
    border-top-right-radius: 0.2vw;
}

#Rekommenderat {
    border-top-left-radius: 0.2vw;
}

#articlesBox {
    padding: 3vw;
    padding-top: 1vw;
}

.tabcontent {
  display: none;
  border-top: none;
}

.articleTitle {
    font-size: 1.5vw;
    margin-top: 0;
    margin-bottom: 0.5vw;
    width: 60%;
}

.articleInfo {
    margin-top: 0;
    font-size: 0.85vw;
}

.articleLine {
    height: 0.1vw;
    width: 60%;
    background-color: black;
}


.articleListContainer {
    padding-top: 1vw;   
    cursor: pointer;
}

.articleListContainer:hover .articleTitle{
    text-decoration: underline;
}

.insideBoxNJ {
    width: 58vw;
    margin: 0;
    margin-top: 0vw;
    background-color: white;
    border: solid 0.1vw black;
    border-radius: 0.2vw;
}

.insideBoxWithTabs {
    border: solid 0.1vw black;
    border-radius: 0 0 0.2vw 0.2vw;
    border-top: none;
    height: 30vw;
    overflow-y: scroll;
}

#login-replacer {
    font-size: 1.5vw;
    width: 100%;
    text-align: center;
    margin-top: 4vw;
}

#JoelNanemyr {
    position: fixed;
    top: 6vw;
    left: 72.5vw;

    background-color: #F9F0E9;
    border-radius: 0.3vw;
    border: solid 0.1vw black;
    padding: 0.5vw;

    width: 24vw;
    min-height: 20vw;
}

#insideBoxJN {
    width: 24vw;
    height: calc(100vh - 13vw - 40px);
    margin: 0;
    margin-top: 0vw;
    background-color: white;
    border: solid 0.1vw black;
    border-radius: 0.2vw;
}

#windowTitleJN {
    font-size: 1vw;
    text-align: left;
    margin: 0;
    margin-bottom: 0.3vw;
}

#discussionInput {
    display: block;
    font-family: "Share Tech Mono", 'Segoe UI', Tahoma;
    font-size: 1vw;
    width: calc(100% - 0.75vw);
    height: 1.7vw;
    border: solid 0.1vw black;
    border-radius: 0.2vw;
    padding-left: 0.5vw;

    margin: 0;
    margin-bottom: 0.5vw;
}

#discussionSubmit {
    font-family: "Share Tech Mono", 'Segoe UI', Tahoma;
    font-size: 0.8vw;
    width: 4vw;
    padding: 0.2vw;
    height: 1.7vw;
    background-color: rgb(255, 116, 139);
    margin-bottom: 0.5vw;

    border: solid 0.1vw black;
    border-radius: 0.2vw;
    border-right: solid 0.15vw black;
    border-bottom: solid 0.15vw black;

    cursor: pointer;
}

#discussionSubmit:active {
    border: solid 0.1vw black;
    border-radius: 0.2vw;
}

#guestForm {
    margin: 0;
    padding: 0;
}