html{
    background-color: var(--highlight);
}
.header{
    background-color: var(--highlight);
    color: white;
}
.logo{ background-color: transparent;}
.logo span a{transition: color 1s;}
.sublogo{display: none;}
nav, .top-gradient, .logo-gradient{display: none;}
.main{margin-top: var(--headerHeight); height:88vh; overflow: hidden;}
.division{background-color: white; display: block;}
.home-titles{
    position: relative;
    margin-left: 100px;
    font-size: 30vw;
    margin: 0 0 0 100px;
    line-height: 80%;
    transition: color 1s;  
    letter-spacing: -15px;
    color: white;
    width: max-content;
}
.logo a:hover, .home-titles:hover{color: black;} 
.content{
    overflow: scroll;
    width: 26vw;
    height: 30vw;
    margin: 0 20px;
    position: absolute;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.content::-webkit-scrollbar {
  display: none;
}
.close{
    display: block;
    position: initial;
    color: black;
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 0;
    transition: color 1s;
}
.close:hover{
    cursor: pointer;
    color: var(--highlight);
}
.soon{
    font-size: 2vw;
    letter-spacing: 0;
    opacity: 0;
    transition: opacity 1s;
}
.soon.temporary{opacity: 1;}
.home-titles span:hover{cursor: pointer;}

@media screen and (max-width: 500px) {
    .home-titles{
        margin-left: 20px;
        font-size: 34vw;
        letter-spacing: -9px;
    }
    .content{
        width: 45vw;
        height: 50vw;
        margin: 0 10px;
    }
}