* {
    font-family: "Outfit", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, sans-serif;
    padding:0;
    margin:0;
    color:rgb(210,210,210);
    box-sizing:border-box;
    cursor:default;
}
body {
    background-color:rgb(50,50,50);
    overflow-x:hidden;
}
body *:active {
    transition:0.2s ease;
}
/* Parts */
.top {
    background-color:rgba(80, 80, 80, 0.7);
    width:100vw;
    height:7vw;
    display:flex;
    align-items:center;
    flex-direction:row;
    justify-content:space-between;
    position:sticky;
    top:0;
    left:0;
    backdrop-filter:blur(3px);
    z-index:10;
    padding:0 1vw;
    box-shadow:0px 10px 20px rgba(30, 30, 30, 0.5);
    border-bottom: 1px solid rgb(100, 100, 100);
    min-height: 60px;
}
.nav {
    background-color: rgba(80, 80, 80, 0.7);
    height:70%;
    border-radius:40px;
    padding:5px 20px;
    display:flex;
    justify-content:center;
    align-items: center;
    flex-direction: row;
    transition:0.5s ease;
    margin-left:3vw;
    border:1px solid rgb(100, 100, 100);
    width:65%;
}
a {
    cursor:pointer;
}
.nav-items {
    font-size:1.5vw;
    height:90%;
    font-weight: 500;
    padding:10px 1vw;
    border-radius:calc((3vw + 3vh) / 2);
    background-color:green;
    display:flex;
    align-items: center;
    justify-content:center;
    text-align: center;
    transition:0.5s ease;
    text-decoration:none;
    margin:0 0.5vw;
    flex: 1 1 calc(100% / 5);
}
.nav-items:hover {
    transform: scale(1.1);
    background-color: greenyellow;
    color: black;
    box-shadow: 0 0 20px rgba(30, 30, 30, 0.8);
}
.nav-items:active {
    transform:scale(0.9);
}
.main {
    display:flex;
    flex-direction:column;
    width:100%;
}
.main * {
    transition:0.5s ease;
}
.giant-h1 {
    font-size:3vw;
    cursor:pointer;
}
.giant-h1:hover {
    transform:translateX(5%) scale(1.1);
}
.giant-h1:active {
    transform:scale(0.9);
}
.content-div {
    width:100%;
    display:flex;
    flex-direction:row;
    height:350px;
    margin-top:1vh;
}
.content-div-data {
    padding:20px;
    width:60vw;
    height:100%;
}
.content-div-img {
    width:40vw;
    height:100%;
    display:flex;
    align-items: center;
    background-repeat:no-repeat;
    background-size:cover;
}
.content-div-data:hover + .content-div-img {
    width:60vw;
}
.content-div-img:hover {
    width:60vw;
}
/* Mini */
.content-div-small {
    height:300px;
    width:100vw;
    display:flex;
    flex-direction:row;
    margin-top:1vh;
}
.description {
    font-size:2vw;
    text-align:justify;
}
.link {
    color:aqua;
    text-decoration:underline;
}
.link:hover {
    transform:scale(1.1);
}
.link:active {
    transform:scale(0.9);
}
.nav-mobile {
    width:90vw;
    position:fixed;
    bottom:0;
    left:0;
    display:none;
    flex-direction: row;
    align-items: center;
    background-color: rgba(80, 80, 80, 0.7);
    backdrop-filter: blur(3px);
    padding:0 5px;
    height:calc((10vh + 10vw) / 2.5);
    z-index:10;
    margin:10px 5vw;
    border-radius:50px;
    box-shadow:0px 0px 30px rgba(30, 30, 30, 0.7);
    border:1px solid rgb(100, 100, 100);
    justify-content: space-evenly;
    min-height: 60px;
}
#content-div-bottom {
    margin-bottom:75px;
    margin-top:1vh;
}
#top-h1 {
    padding:0;
    margin:0;
    font-size:2vw;
}
.seperatorH1 {
   background-color:rgba(30,30,30,0.5);
   width:100%;
   margin-top:1vh;
   padding-left:20px;
}
.seperatorH1text {
    font-size:5.5vw;
}
.bsod-sad {
    font-size:10vw;
    width:20vw;
  }
  .bsod-tag {
    font-size:2.5vw;
    padding: 20px 0;
  }
  .bsod-error-code {
    font-size:2vw;
  }
  .bsod-container {
    display:flex; 
    align-items:center; 
    justify-content:left;
  }
@media (max-width:1450px) and (min-width:880px) {
    .top {
        height:calc((10vh + 8vw) / 2);
    }
    .nav-items {
        font-size:1.8vw;
        padding:5px;
    }
    #top-h1 {
        font-size:3.5vw;
    }
    .seperatorH1text {
       font-size:3vw;
    }
}
@media (max-width:880px) {
    .description {
        font-size:3vw;
    }
    .giant-h1 {
        font-size:4.5vw;
    }
    .seperatorH1text {
        font-size:5vw;
    }
    .giant-h1:hover {
        transform: translatex(15px) scale(1.05);
        }
    .content-div {
        flex-direction: column;
        height:auto;
        width:100vw;
    }
    .content-div-small {
        flex-direction: column;
        height:auto;
        width:100vw;
    }
    .content-div-data {
        width:100%;
        padding:10px 20px;
    }
    .content-div-img {
        width:100vw;
        height:100px;
    }
    .nav {
       display:none;
    }
    .nav-items {
        font-size:0.9vw;
    }
    .nav-mobile {
        display:flex;
        overflow-x:auto;
        overflow-y:hidden;
    }
    .content-div-data:hover + .content-div-img, .content-div-img:hover {
        width:100%;
    }
    #homepage-content-div {
        height:300px;
    }
    .top {
        height:7vh;
        width:100vw;
        justify-content:center;
    }
    .nav-items {
        font-size:3vw;
        padding:1px;
        height:70%;
    }
    #top-h1 {
    font-size:5vw;
    }
    .bsod-container {
        flex-direction: column;
    }
      .bsod-sad {
        font-size:20vw;
    }
      .bsod-tag {
        font-size:5vw;
    }
}
@media (min-width:1440px) {
    .seperatorH1text {
    font-size:3vw;
    }
        #top-h1 {
    font-size:3vw;
    }
    .content-div {
        height:30vw;
        min-height:400px;
    }
    .content-div-small {
        height:15vw;
        min-height: 300px;
    }
}