body,html{margin:0; height:100%; width:100%;}
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; 

}
.vertical{
    display:flex;
    flex-direction: column;
    width:100%;
    background-color:transparent;
    margin:0;

}
.horizontal{
    display:flex;
    flex-direction: row;
    max-width:100%;
    background-color:transparent;
    margin:0;
    /* padding-left:1vw;
    padding-right:1vw; */

    /* padding-left:15px;
    padding-right:15px; */
    /* gap:1vh; */
}
.subContainer{
    box-sizing:border-box;

    position:relative;
    display:flex;
    width:100%;
    margin:0;
    padding-left:1vw;
    padding-right:1vw;
}
.container{
    box-sizing:border-box;
    position:relative;
    background-color:#f0f0f0;
    border-radius:1vh;
    box-shadow:0 0 0.5vw 0.3vw #b4b7b7;
    margin-left:1vw;
    margin-right:1vw;
    width:100%;
    height:15vw;
}
.hcenter{
    display: flex;
    justify-content: center;
}

.normalText{
    position:relative;
    box-sizing: border-box;
    width:100%;
    font-size:1.5vw;
    padding:2vw;
    margin:0;
    font-family: sans-serif;
    color: #313131;
    border:none;

}
.largerText{
    position:relative;
    box-sizing: border-box;
    width:100%;
    font-size:2vw;
    line-height: 2.2vw;
    padding:2vw;
    margin:0;
    font-family:sans-serif;
    color: #313131;
    border:none;

}

#footer{
    position:absolute;
    margin:0;
    margin-top: 10vw;
    padding-top:1.2vw;
    padding-bottom:1.2vw;

    width:100%;
    background-color:#f0f0f0;
    font-family: sans-serif;

}

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

}
.newEntry{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    /* margin-top:2vw;
    margin-bottom:2vw; */
    
}
.vertical > div{
    margin-bottom:2vw !important;
}

.newEntry{
    position:relative;
    /* background-color:#f0f0f0; */
    width:100%;
    margin-top:1vw;
    margin-bottom:1vw;
    margin:0;
    border-bottom:0.2vw #e2e2e2 solid;
}
.newEntryTtl{
    position:relative;
    font-size:3.5vw;
    color:#313131;
    font-family:sans-serif;
    font-weight: 600;
    margin:0;
    margin-bottom:1vw;
    margin-top:1vw;

}
.entryBtn{
    text-decoration: none;
    display: inline-block;
    left:50%;
    transform:translateX(-50%);
    margin-top:1vw;
    margin-bottom:1vw;
    padding:0.5vw;
    padding-left:1vw;
    padding-right:1vw;

    border-radius:1vw;
    transition: background-color 0.15s ease;
}

.entryBtn:hover{
    cursor:pointer;
    background-color:#f0f0f0;
}
.entryBtn:active{
    background-color:#e2e2e2;
}
.pfpCont{
    position:relative;
    width:16vw;
    padding-left:10vw;
    padding-right:10vw;
}
.profileImg{
    position:relative;
    background-image: url('Images/PFP.png');
    background-size: 100% auto;
    background-repeat: repeat-y;
    width:16vw;
    height:16vw;
    border-radius: 100vw;
    border:0.2vw #e2e2e2 solid;
    box-shadow:0 0 1vw 0.5vw #b4b7b7;
    /* margin-left:10vw;
    margin-right:10vw; */
}
.profileDsc{
    position:relative;
    display:flex;
    /* width:100%; */
    /* border:1px red solid; */
    padding-right:10vw;
    width:100%;
}

@media (max-aspect-ratio:4/4) {
    .horizontal{
        display:flex !important;
        flex-direction: column;
        max-width:100%;
        /* padding-left:15px;
        padding-right:15px; */
        background-color:transparent;
        margin:0 !important;
        /* margin-bottom:1vh !important; */
        justify-content: center !important;
    }
    .container{
        border-radius:2vh !important;
        
    }

    .ftrDsc{
        font-size:1.5vh !important;
    }
    #footer{
        padding-top: 2vh !important;
        padding-bottom: 2vh !important;
    }
    .normalText{
        font-size:2vh !important;
        line-height: 2vh !important;
    }
    .largerText{
        font-size:2.5vh !important;
        line-height: 2.6vh !important;
    }
    .newEntryTtl{
        font-size:4vh !important;
    }
    .profileImg{
        display: block !important;
        width:50vw !important;
        height: 50vw !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        border:0.4vh #e2e2e2 solid !important;
        box-shadow:0 0 1vh 0.5vh #b4b7b7 !important;
        /* margin-left:10vh;
        margin-right:10vh; */
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .pfpCont{
        left:50% !important;
        transform:translateX(-50%) !important;
        padding-bottom:3vh !important;
        padding-top:1vh !important;
    }
    .noHVgap{
        margin-bottom: 0 !important;
    }
    .profileDsc{
        padding:0 !important;
    }

}