.container{
  display: flex;
  flex-flow: column;
  text-align: center;
  justify-content: center;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, 'Roboto', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* spacing in regards to div/ sections/ etc.. */
body{overflow-x: hidden;}
header{padding: .5rem;}
section{padding: 0 .5rem 1rem .5rem;}
.sect-header{padding: .5rem;}
footer{padding: .5rem;}

/* -----
   art
   ---- */
   .art-theme{background: #f1eff0;; color: rgb(65, 65, 65);}
   .art-theme a{color: #a75993;}
   .art-theme hr{width: 80%; color: rgba(66, 66, 66, 0.1);}
   .art-theme li{color:#c06a82;}
   .art-theme li a{color:#c06a82;}
   .art-theme .card{
     border: unset; 
     background-color: #ffffffd7;
     -webkit-box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.123); 
     box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.123);
   }
   .art-theme .card img {border: .5px solid rgba(240, 240, 240, 0.904);}
   .art-theme .about-me img {filter: contrast(1.1) hue-rotate(-10deg) contrast(90%) ;;}

/* -----
   light
   ---- */
.light-theme{background: #f9f9f9; color: black;}
.light-theme a{color: #1579A8;}
.light-theme .theme-button{background: #333333; color: white; border: none;}
.light-theme hr{width: 80%; color: rgba(249, 249, 249, 0.288);}
.light-theme li{color:#DF164F;}
.light-theme li a{color:#DF164F;}
.light-theme .card{
  border: unset; 
  background-color: #ffffffd7;
  -webkit-box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.123); 
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.123);
}
.light-theme .card img {border: .5px solid rgba(240, 240, 240, 0.904);}
.light-theme .about-me img {filter: contrast(1.1) hue-rotate(-10deg) contrast(90%) ;;}

/* ----
   dark
   ----*/
.dark-theme{background: #333333; color: #f9f9f9;}
.dark-theme a{color: #1579A8;}
.dark-theme .theme-button{background: #f9f9f9; color: black; border: none;}
.dark-theme hr{width: 80%; color: rgba(88, 88, 88, 0.877);}
.dark-theme li a {color: #b48d9f;}
.dark-theme li {color: #b48d9f;}
.dark-theme ul .html5{color:#e29c33;}
.dark-theme ul .js{color:#f8df52;}
.dark-theme ul .css3{color:#a3c9ec;}
.dark-theme li .bootstrap{color:#7c47c8;}
.dark-theme li .react{color:#61dafb;}
.dark-theme li .nodejs{color:#448942;}
.dark-theme li .pyt{color: #3c78a9;} .dark-theme li .hon{color: #e0c145;}
.dark-theme li .flask{color: #f1f1f1;}
.dark-theme li .vs{color:#0066b8;}
.dark-theme .card{
  background: rgba(112, 126, 206, 0.103);
  border: 1px solid rgba(51, 51, 51, 0.24);
  -webkit-box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.123); 
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.123);
}
.dark-theme .card a{color: #f9f9f9;}
.dark-theme img{filter: contrast(80%) ;}
.dark-theme .under-title a{color:  #1579A8;}
.dark-theme .under-title p{color: rgba(255, 255, 255, 0.705);}

/* text styling */
input, button, submit { border:none; } 
.collapse-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
} .collapse-button{
  background-color: rgba(230, 230, 230, 0.8);
}
.thinner-font{font-weight: 400;}
h1{font-weight: 600; margin-bottom: 0;}
h2{font-weight: 500; font-size: 17pt; margin: .5rem 0;}
.section-info{opacity: .5; font-size: 11pt;}
p{margin: .5rem 0;}
a{text-decoration: none;}
ul{
  display: inline-flex;
  flex-wrap: wrap;
  border-radius: 4px;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-width: 90%;
}
li{
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 12.5pt;
  padding: 1rem;
}
.capitalize {text-transform: capitalize;}
strong{ font-weight: 700;}

/*about me */
.about-me{ 
  display: inline-flex;
  flex-flow: column-reverse;
  align-items: center;
  padding: .8rem;
}
.about-me p{ 
  text-align: left;
  font-size: 12pt;
}
.about-me img{
  margin: 1rem;
  display: inline-block;
  object-fit: cover;
  width: 150px;
  height: 150px;
  border-radius: 10%;
}


/* card */
.card{
  display: inline-flex;
  align-content: center;
  flex-direction: column;
  width: 90%;
  padding: .2rem .5rem;
  text-align: left;
}
.card .under-title{
  font-size: 10pt;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}
.card h3{font-weight: 400; margin-bottom: 0;}
.card img {display: none;}

.img-cards{
  display: flex;
  width: 100%;
  height: auto;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
.img-card{
  box-shadow: 0px 0px 1px 1px rgba(167, 167, 167, 0.123);
  height: max-content;
  padding: 1rem 0;
}
.img-card img{
  width: 90%;
  padding: .2rem .5rem;
  text-align: left;
  background-color: unset;
}
.img-card h3 {
  font-weight: 200;
  padding-bottom: 0;
  margin-bottom: 0;
}
.img-card .text{
  display: inline-flex; 
  align-items: baseline;
}
.img-card .text *{
  margin: 0 .4rem;
}

/* theme button & time */
.theme-button{
  transition: transform 2s;
  z-index: 1;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 65px;
  width: 65px;
  margin: 0 1rem 1rem 0;
  border-radius: 50%;
  font-size: 11pt;
}
#time{
  display: none;
  padding: .1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0 0 1rem 1rem;
  font-size: 10pt;
  background-color: rgba(129, 129, 129, 0.5);
}

/* Animations */
.anim-enlarge{
  transform: scale(40);
  transition: transform .5s ease-in-out;
}
/*#button-anim{opacity: 0;}*/
.anim-dark-to-light{animation-name: dark-to-light; animation-duration: .5s; }
.anim-light-to-dark{animation-name: light-to-dark; animation-duration: .5s; }
.anim-fade-in{animation-name: fade-in; animation-duration: .5s; }
.anim-fade-out{animation-name: fade-out; animation-duration: .5s; }
@keyframes dark-to-light {
  0% { background-color: #f1f1f1; }
  25% { background-color: rgb(204, 204, 204); }
  50% { background-color: rgb(105, 105, 105); }
  75% { background-color: rgb(27, 27, 27);}
  100% { background-color: #333333;; }
}
@keyframes light-to-dark{
  100% { background-color: #f1f1f1; }
  75% { background-color: rgb(204, 204, 204); }
  50% { background-color: rgb(105, 105, 105); }
  25% { background-color: rgb(27, 27, 27);}
  0% { background-color: #333333;; }
}
@keyframes fade-in {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}
@keyframes fade-out {
  0% { opacity: 1; }
  20% { opacity: 0.9; }
  40% { opacity: 0.5; }
  60% { opacity: 0.3; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

/* Footer */
footer{
  padding: 1rem;
}
footer p{margin: 0;}

.desktop-only{display: none;}

/* ----------------
   Desktop Viewport
   ---------------- */
@media (min-width:1281px)  {
  .container{
    width: 80%;
  }
  .desktop-only{display: unset;}
  .card{
    display: inline-flex;
    width: 320px;
    height: 450px;
    margin: .5rem;
  }
  .card img{
    display: flex;
    width: auto;
    height: 280px;
  }
  li:hover{transform: scale(1.2); transition: transform .5s;}
  ul{
    display: inline-flex;
    flex-wrap: wrap;
    border-radius: 4px;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .theme-button{margin-right: 6%; margin-bottom: 2%;}
  .anim-enlarge{
    transform: scale(60);
    transition: transform 1s;
  }
  #time{
    display: unset;
    background-color: unset;
    left: unset;
    right: 0;
    margin-right: 2.5%; 
    margin-bottom: 2.3%;
  }
  .about-me{ 
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 75%;
    padding: 2rem; 
  }
  .about-me .text-container{
    display: inline-flex;
    flex-flow: column;
    align-items: left;
    width: 50%;
  }
  .about-me .text-container p{ 
    text-align: left;
    font-size: 12.5pt;
  }
  .img-container{
    padding: unset;
    width: 350px;
    height: auto;
  }
  .about-me img{
    display: inline-block;
    width: 180px;
    height: 180px;
    border-radius: 2%;
  }
  .hobby-div{
    display: inline-flex;
    flex-direction: column;
  }
  .img-cards{
    flex-direction: row;
  }
  .img-card{
    width: 400px;
  }
}