* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-x: hidden;

}

.noscroll {
    overflow: hidden;
}

body {
    background-color: #202124;
    font-family: Helvetica; 
    margin: 0;
}

nav {
    background: #0c0c0c;
    padding: 0 1em;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

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

.menu,
.submenu {   
    list-style-type: none;
    padding: 0;
}

.logo {
    display: grid;
    grid-template-columns: auto auto;
    place-content: start;
    color: white;
    font-size: 150%;
    padding: 5px;
}

.logo p {
    padding-top: 1em;
    padding-left: .5em;
}

.logo img {
    height: 75px;
    width: 75px;
}

.item {
    padding: 25px 10px;
}

.item.button {
    padding: 9px 5px;
}

.item:not(.button) a:hover,
.item a:hover::after {
    color: #ccc;
}

/* Mobile menu */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.menu li a {
    display: block;

}

.menu li.subitem a {
    padding: 15px;
}

.toggle {
    color: white;
    order: 1;
    font-size: 20px;
    cursor: pointer;
}

.item.button {
    order: 2;
}

.item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
}

.active .item {
    display: block;
}

.button.secondary { /* divider between buttons and menu links */
    border-bottom: 1px #444 solid;
}

/* Submenu up from mobile screens */
.submenu {
    display: none;
}

.submenu-active .submenu {
   display: block;
}

.has-submenu i {
    font-size: 12px;
}

.has-submenu > a::after {
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    line-height: 16px;
    font-weight: 900; 
    content: "\f078";
    color: white;
    padding-left: 5px;
}

.subitem a {
    padding: 10px 15px;
}

.submenu-active {
    background-color: #111;
    border-radius: 3px;
}

/* Tablet menu */
@media all and (min-width: 700px) {
    .menu {
        justify-content: center;
    }
    .logo {
        flex: 1;
    }
    .item.button {
        width: auto;
        order: 1;
        display: block;
    }
    .toggle {
        flex: 1;
        text-align: right;
        order: 2;
    }
    /* Button up from tablet screen */
    .menu li.button a {
        padding: 10px 15px;
        margin: 5px 0;
    }
    .button a {
        background: #0080ff;
        border: 1px royalblue solid;
    }
    .button.secondary {
        border: 0;
    }
    .button.secondary a {
        background: transparent;
        border: 1px #0080ff solid;  
    }
    .button a:hover {
        text-decoration: none;
    }
    .button:not(.secondary) a:hover {
        background: royalblue;
        border-color: darkblue;
    }
}

/* Desktop menu */
@media all and (min-width: 960px) {
    .menu {
        align-items: flex-start;     
        flex-wrap: nowrap;
        background: none;
    }
    .logo {
        order: 0;
    }
    .item {
        order: 1;
        position: relative;
        display: block; 
        width: auto;
    }
    .button {
        order: 2;
    }
    .submenu-active .submenu {
        display: block;
        position: absolute;
        left: 0;
        top: 68px;
        background: #111;
    }
    .toggle {
        display: none;
    }
    .submenu-active {
        border-radius: 0;
    }
}

section {
    display: grid;  
}

section::-webkit-scrollbar {
    display: none;
}

.highlight {
    color: rgb(139, 178, 255);
  }

/* section 1 */
.header {
    padding-top: 5em;
    color: white;

}

.header h1 {
    font-size: 1.5em;
    font-style: italic;
}

.landing-main {
    display: grid;
    grid-template-areas: 
    'head ghost1'
    'data new'
    'hist ghost2';
    padding: 2em;
    height: 100vh;
    overflow: hidden;
    padding-left: 4em;
    background: linear-gradient(to right, rgb(0,0,0), rgb(0,0,0) 45%, rgb(0,0,0,0) 70%), url("assets/landing.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.ghost1 {
    grid-area: ghost1;
}

.ghost2 {
    grid-area: ghost2;
}


.data-box {
    display: grid;
    grid-template-columns: auto auto;

    background-color: black;
    color: white;
    border: solid;
    border-color: white;
    border-width: 4px;

    width: 40vw;
    height: 30vh;

    overflow: hidden;
    grid-area: data;
}

.hist-box {
    display: grid;
    grid-template-columns: auto auto;

    background-color: white;
    color: black;
    border: solid;
    border-color: black;
    border-width: 4px;

    width: 40vw;
    height: 30vh;

    overflow: hidden;
    grid-area: hist;
}

.new-box {
    display: grid;
    grid-template-columns: auto auto;

    background-color: white;
    color: black;
    border: solid;
    border-color: black;
    border-width: 4px;

    width: 40vw;
    height: 30vh;

    overflow: hidden;
    grid-area: new;
}

.data-box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-color: white;

    place-content: right;
    overflow: hidden;
}

.hist-box img {
    height: 100%;
    width: 100%;
    object-fit: cover;

    place-content: right;
    overflow: hidden;
}

.new-box img {
    height: 100%;
    width: 100%;
    object-fit: cover;

    place-items: right;
    overflow: hidden;
}

.data-box:hover {
    background-color: white;
    color: black;
    transition: 0.3s;
    border-color: white; 
}

.hist-box:hover {
    background-color: black;
    color: white;
    transition: 0.3s;
    border-color: white; 
}

.new-box:hover {
    background-color: black;
    color: white;
    transition: 0.3s;
    border-color: white; 
}

.text {
    padding: 1em;
    width: 100%;

    overflow: hidden;
}


.text h1 {
    font-size: 1.5em;
}

.text p {
    font-size: .5em;
}


@media screen and (max-width: 800px) {
    .header {
        height: 25vh;
    }

    .text {
        padding: 1em;
        padding-bottom: 13vh;
    }

    .text h1 {
        font-size: 1.5em;
    }

    .text p {
        font-size: 1em;
        padding-bottom: 1em;
    }

    .scrollbar {
        color: white;
        font-size: 0.75em;
    }

    .landing-main {
        margin-top: 4em;
        padding-left: 5vw;
        padding-right: 5vw;
        gap: 2em;
        height: fit-content;
        display: grid;
        grid-template-areas: 
        'head'
        'data'
        'hist'
        'new';
    }

    .hist-box,
    .data-box,
    .new-box {
        width: 90vw;
        font-size: .8em;
        
        
    }
}

.scroll section:nth-child(1) {
    height: fit-content;
    
}

/* section 2 */
.community {
    background-color: rgb(250, 250, 250);
    height: fit-content;
    padding-bottom: 2em;
}

.community-container {
    padding-top: 2em;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 2em;
    place-content: center;
    padding-bottom: 1vw;
}


.community-h1 {
    padding-top: 2em;
    padding-left: 2em;
    font-size: 2em;
}


.community-card {
    display: grid;
    grid-template-columns: auto auto;
    background-color: #1B1C1E;
    width: 40vw;
    height: 15vw;
    overflow: hidden;
}

.community-card img {
    background-color: grey;

}
.community-text {
    padding: 1em;
    color: white;
    width: 20vw;
}

.community-text p {
    padding-top: .5em;
}

.text-img {
    background-size: cover;
    position: relative;
    width: 20vw;
    height: 15vw;
}

.background-img1 {
    background-image: url('/assets/hairgel.jpg');
}

.background-img2 {
    background-image: url('/assets/kasperlab.jpg');
}

.background-img3 {
    background-image: url('/assets/skingenes.png');
}

.background-img4 {
    background-image: url('/assets/skinglow.png');
}

.background-img5 {
    background-image: url('/assets/humanatlas.png');
}

.background-img6 {
    background-image: url('/assets/skincommunity.png');
}


@media screen and (max-width: 1250px) {
    .community-text {
        font-size: .8em;
    }
}

@media screen and (max-width: 1100px) {

    .community-h1 {
        padding-top: 1em;
        padding-left: 1em;
        font-size: 2em;
    }

    .community {
        background-color: rgb(250, 250, 250);
        height: fit-content;
    }

    .community-container {
        grid-template-columns: auto;
        padding-bottom: 2em;
    }

    .community-card {
        width: 70vw;
        height: 25vw;
    }

    .community-text {
        width: 35vw;
        font-size: 1em;
    }

    .text-img {
        width: 35vw;
        height: 25vw;
    }

    .scroll section:nth-child(2) {
        height: fit-content;
        
    }
    
}

@media screen and (max-width: 800px) {
    .community-card {
        width: 90vw;
        height: 27.5vw;
    }

    .community-text {
        width: 55vw;
        height: 27.5vw;
    }

    .text-img {
        height: 27.5vw;
    }

    .community-text h1 {
        font-size: .9em;
    }

    .community-text p {
        font-size: .8em;
    }


}

/* section 3 */
.history-title {
    -ms-overflow-style: none; 
    scrollbar-width: none;
    padding-left: 5em;
    padding-right: 5em;
}

.history-title h1 {
    font-size: 2.5em;
    padding-top: 2.5em;
    padding-bottom: 1em;
    color: white;
}

.content img {
    padding-bottom: 1em;
}

.photo {
    color: white;
    border: solid;
    border-color: white;
    background-color: #1B1C1E;
    padding: 0.5em;
    font-size: 1em;
    
}

.photo:hover {
    color: #1B1C1E;
    background-color: rgb(250, 250, 250);
    border-color: #1B1C1E;
    border: solid;

}

.main-history::-webkit-scrollbar {
    display: none;
}

.main-history {
    scroll-snap-type: y mandatory;
    -ms-overflow-style: none; 
    scrollbar-width: none;
}

.timeline {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    
}
  
  /* The actual timeline (the vertical ruler) */
  .timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
  }
  
  /* Container around content */
  .history-container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
  }
  
  /* The circles on the timeline */
  .history-container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
  }
  
  /* Place the container to the left */
  .left {
    left: 0;
  }
  
  /* Place the container to the right */
  .right {
    left: 50%;
  }
  
  /* Add arrows to the left container (pointing right) */
  .left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
  }
  
  /* Add arrows to the right container (pointing left) */
  .right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  
  /* Fix the circle for containers on the right side */
  .right::after {
    left: -16px;
  }
  
  /* The actual content */
  .content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
  }

  .content img {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 900px) {
    .history-title {
        padding-left: 2.5em;
        padding-bottom: .5em;
    }
    
    .history-title h1 {
        font-size: 2em;
        padding-top: 2.5em;
        padding-bottom: 0.5em;
    }

    /* Place the timelime to the left */
    .timeline::after {
    left: 31px;
    }
    
    /* Full-width containers */
    .history-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
    }
    
    /* Make sure that all arrows are pointing leftwards */
    .history-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
    }
  
    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
    left: 15px;
    }
    
    /* Make all right containers behave like the left ones */
    .right {
    left: 0%;
    }
}


@media screen and (max-width: 450px) {
    
    .photo {
        font-size: .25em;
    }
    .content p {
        font-size: .75em;
    }
}

.scroll section:nth-child(3) {
    background-color: #1B1C1E;
}


.scroll section:nth-child(4) {
    height: 5vh;
    background-color: #1B1C1E;
}

.footer{
    padding-left: 2em;
    padding-top: 4vh;
    color: white;

}

.footer,
.scroll section:nth-child(5) {
    height: 10vh;
    background-color: #0c0c0c;
}

.banner {
    padding:1em;
    position:fixed;
    bottom:0;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #0c0c0c;
    color:white;
    width:100%;
    z-index: 99;
}