body,html{margin:0; height:100%; width:100%;}

#landContainer{
    margin:0;
    height: 100vh;
    width:100%;
    position:relative;
    overflow: hidden;
}
body{
    z-index:1;
    background-color:#313535;
    overflow:auto;
        /* background-color: #0e0e0e; */
    /* background-image:
        linear-gradient(rgba(255,255,255,0.006) 1px, transparent 1px),
        linear-gradient(45deg, rgba(255,255,255,0.006) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.009) 1px, transparent 1px),
        linear-gradient(45deg, rgba(255,255,255,0.009) 1px, transparent 1px);
    background-size: 5vw 5vw, 2.5vw 2.5vw; */
      width: 100%;
    min-height: 100vh; /* full viewport height */
  background: repeating-linear-gradient(
    135deg,
    #f0f0f0,
    #ffffff 25vh,
    #f0f0f0 50vh
  );
  background-size: cover;        /* cover whole area */
  background-attachment: fixed;  /* makes it static while scrolling */
  background-repeat: repeat;     /* repeat the pattern */
  z-index: -1; 

}
#titleContainer{
    position:absolute;
    /* position:relative; */
    left:50%;
    top:35%;
    transform:translate(-50%,-50%);
    /* width:80%; */
    padding:2vw;
    border-radius: 3vw;
    background: #f0f0f0;
    box-shadow:0 0 2vw 1vw #b4b7b7
}
#titleContainer:hover{
    cursor:default;
}
#homeTitle{
    width:100%;
    height:100%;
    text-align: center;
    font-family: sans-serif;
    color:#313535;
    font-size:6vw;
    line-height: 100%;
}
.vertical{
    display:flex;
    flex-direction: column;
    width:100%;
    background-color:transparent;
    margin:0;

}
.userbox{
    position:relative;
    display:flex;
    width:80%;
    border-radius: 2vw;
    /* border:0.2vw, #313535, solid; */
    min-height:10vh;
    /* max-height:auto; */
    padding-top:3vh;
    padding-bottom:3vh;

    left:50%;
    text-decoration: none;
    background-color: #f0f0f0;
    /* text-align: center;
    align-items: center; */
    /* top:35%; */
    transform:translateX(-50%);
    box-shadow:0 0 2vw 1vw #b4b7b7;
    
    transition: width 0.3s ease, box-shadow 0.5s ease;
}
.userbox:hover{
    cursor:pointer;
    width:82%;
    box-shadow: 0 0 4vw 2vw #b4b7b7;

}
#footer{
    position:absolute;
    margin:0;
    margin-top: 10vw;
    padding-top:20px;
    padding-bottom:20px;

    width:100%;
    background-color:#f0f0f0;
    font-family: sans-serif;
    /* bottom:0%; */
    border-top:0.2vw #313535 solid;

}

.ftrDsc{
    text-align: center;
    margin:0;
    width:100%;
    color:#313535;
    height:13px;
    line-height: 13px;
    font-size:13px;

}
.username{
    position:relative;
    text-align: center;
    height:100%;
    font-size:7vh;
    font-family: sans-serif;
    color: #313535;

}
.userGap{
    position:relative;
    width:100%;
    margin-top:5vh;
}
.centered{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

@media (max-aspect-ratio:4/4) {
    .horizontal{
        display:flex;
        flex-direction: column;
        /* width:100%; */
        max-width:100%;
        /* padding-top:15px; */
        padding-left:15px;
        padding-right:15px;
        background-color:transparent;
        margin:0;
        /* margin-bottom:20px; */
        /* margin-left:20px; */
        /* margin-right:20px; */
        /* background-color: aqua; */
    }
    #titleContainer{
        width:80% !important;
    }
    #homeTitle{
        font-size:10vw !important;
    }
    .username{
        font-size:8vw !important;
        margin-top:5vw !important;
        margin-bottom:5vw !important;
    }
    div.horizontal{
        padding-top:15px !important;

    }
    .keepHorizontal{
        flex-direction: row !important;
    }
    .ftrDsc{
        font-size:1.5vh !important;
    }
    #footer{
        padding-top: 2vh !important;
        padding-bottom: 2vh !important;
    }

}