html, body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    scroll-behavior: smooth;
    background-color: #f3eced;
    width: 100%;
    height: 100%;
}
ul{
    list-style: none;
}
p, span, h1, h2, h3, h4, h5, h6 {
    color: #1b0d0f;
}
a {
    text-decoration: none;
    color: #87414F;
    transition: .5s;
}
a:hover{
    color: #BFA5A8; 
}
nav {
    position: relative;
    top: 20%;
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    text-align: center;
}
img {
    padding: 0px 20px;
}
/*Custom Classes*/
.container {
    width: 1140px;
    margin: auto;
}
.clear {
    clear: both;
}
.circle {
    border-radius: 50%;
    padding: 10px;
}
.splash {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.50), rgba(219, 198, 202, 0.95)),
    url('../assets/pocket-watch-3156771_1920.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-left: 300px;
    transition: 3s ease;
  }
.loud {
    font-family: 'Kaushan Script', cursive;
    font-size: 150px;
    color: #6c343f;
    text-align: center;
}
.heading {
    font-size: 60px;
    font-family: 'Kaushan Script', cursive;
    color: #6c343f;
    text-align: center;
    text-shadow: 2px 2px 5px white;
}
.left {
    float: left;
}
.accent {
    border-left: thick solid #87414F;
    padding-left: 10px;
  }
.center {
    text-align: center;
    vertical-align: middle;
}
.flex-item {
    display: inline-flex;
    width: 270px;
    height: 690px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: top;
    justify-content: center;
    vertical-align: top;
    border-right: solid 2px #6c343f;
    padding: 5px;
}
.flex-item img {
    max-width: 225px;
    max-height: 100px;
    height: auto;
}
.flex-item li:before {
    content: "\203A \00A0";
  }
  .no-border {
      border: none;
  }
/*Loading screen*/
.pre-loader {
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display:flex;
  justify-content: center;
  align-items: center;
  background-color: #BFA5A8;
  z-index: 9999;
 }
 .spinner {
   width: 50px;
   height: 50px;
   border: 5px solid rgba(189,189,189 ,0.25);
   border-left-color: rgba(219, 198, 202, 0.95);
   border-top-color:  rgba(219, 198, 202, 0.95);
   border-radius: 50%;
   display: block;
   animation: rotate 1.5s infinite ease;
 }

/*Custom IDs*/
#menu {
    position: fixed;
    top:0;
    left: 0;
    width: 150px;
    height: 100%;
    background-color: #dbc6ca;
    font-family: 'Kalam', cursive;
    text-align: center;
    display: none;
    z-index: 998;
}
#arrow {
    color: #87414F;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 20px;
    font-size: 100px;
    animation: scrolling 1.5s infinite running alternate ease-in;
}
#popup-menu {
    border: none;
    background: transparent;
    outline: none;
    cursor: pointer;
    margin:auto;
    padding: 50px;
    position: fixed;
    z-index: 999;
    display: block;
}
#popup-menu:hover {
    animation: fade 1s infinite ease-in alternate;
}
 /*Animations*/
 @keyframes rotate {
   to {
     transform: rotate(1turn);
   }
 }

 @keyframes scrolling {
     to {
         transform: translateY(50px);
         opacity: 0.1;
     }
 }
 @keyframes fade {
     to {
         opacity: .3;
     }
     
 }
/*For Mobile/Tablet view 320px & 768px*/
@media screen and (max-width: 320px) {
    .splash {
        padding:0;
    }
    .heading {
    /*uhhhh make it 1:1 on the phone screen just bc*/
    }
    #menu {
        display:none;
    }
    .container {
        width: 100%
    }
    /*.......for experience section do something about the flex items to make it mobile friendly*/
}
@media screen and (max-width: 768px) {

}