:root {
  --main-menu: #45b67d;
  --main-white: #f0f0f0;
  --main-red: #be3144;
  --main-blue: #1f2636;
  --main-gray: #ff76cd;
  --box-shadow: rgba(210,210,10, 0.3);}

  @media only screen and (width <= 320px) {
   
    #welcome-section .bio{font-size:12px;}
  }
  @media only screen and (320px <= width <= 640px) {
    
    #welcome-section .bio{font-size:14px;}
  }

  @media only screen and (720px <= width) {
   
    #welcome-section .bio{font-size:1.2rem; ;}
  }


*{
box-sizing: border-box;

}
body {

font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 200;
  
  margin:0;
 background-color:#26263d
}

.navbar {display: flex;
  justify-content: flex-end;

color:rgba(255,20,60,0.0);
background-color:var(--main-blue);
 position: fixed;
 
  top: 0;
  left: 0;
  width: 100%;
   box-shadow: 0 2px 0 white;
   z-index: 10;
}

.nav-list {
  display: flex;
 margin: 0;
 padding:0;
  margin-right: 1rem;
   background-color:var(--main-blue);
}
.nav-list a {
  display: block;
  font-size: 1rem;
  padding: 1rem;
  background-color:var(--main-blue);
  color:#fafafa;
}
.nav-list a:hover {
  background:#fff0f0;
  color:#0f0f0f;}
  
.nav-list a:active {
  background:var(--main-red);}

hr{
  border-top: 1px solid rgb(254, 254, 254);
  margin:0;
  padding:0;
}
#welcome-section{
  /*  visibility: hidden;  VISIBLE */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
  height:45rem;
  text-align:center;
  padding-top:50;
  margin:0;
  background-image: linear-gradient(42deg, #76768e 0%, var(--main-blue) 70%);
  color: var(--main-white);
  box-shadow: 0 2px 0 white;
  position: relative;
  z-index:9;
}
#welcome-section .bio{
font-weight: 200i;
font-kerning: normal;}

.projects {
  /* visibility: hidden; VISIBLE */
   text-align: center;
  padding: 8rem 2rem 2rem;
  background: var(--main-blue);
  background-image: linear-gradient(112deg, #76768e 0%, var(--main-blue) 70%);
  margin:0;
  box-shadow: 0 2px 0 white; /* --box-shadow rgba(210,210,10, 0.3) */
  position: relative;
  z-index:8;
  
}

.projects > h1{
  margin-bottom:6rem;
  margin-top:-1rem;
  font-size:2em;
}
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 0.8fr));
  grid-gap: 2rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom:6rem;
}

.project{

  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5);
  border-radius:2px;
}

.proj-tile{
  background:white;
  opacity:0.9;
  transition:  opacity 0.3s ease-out, background 0.3s ease-out ;
  transition: transform 0.3s ease-out 
}

.proj-tile:hover {
  background: var(--main-red);
  opacity:1;
  transform: scale(105%);
}
 .proj-grid a {color:var(--main-blue);}

.p123 {
  height: calc(100% - 3.3rem);
  width: 100%;
  object-fit: cover;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: -9px;
  opacity:1;
  box-shadow: 0px 0px 7px rgba(2, 2, 2, 0.2);

  transition: opacity 0.3s ease-out;
}
.p123:hover {opacity:1;} 

.proj-tit {
  font-size: 1.5rem;
  color: var(--main-blue);
  padding: 0rem 0.5rem;
  padding-top: 0px;
  margin-top: 0.43rem;
  vertical-align: center;
  position:relative;
  z-index:8;
}

.project:hover {
  color: #dddd;
}

.cont-sec {

  background-image: 
  linear-gradient(112deg, #394864 0%, 
  var(--main-blue) 70%);
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 40vh;
    padding: 0 2rem;
}

.cont-header { color:#be31f4;
margin-top:2rem}
.cont-header h1 {color:#0f0f0f;
font-size:2rem;
margin:0;
}
.cont-header p { color:#0f0f0f;
  margin:0;
  font-size:0.9rem;
  font-style: italic;
}

.warning{color:#be31f4;
font-size:small;}
.links-row{
font-size:14px;
margin-top:2rem;
color:#f0f0f0;
display: flex;
justify-content: center;
width: 100%;
max-width: 980px;
margin-top: 3rem;

flex-wrap: wrap;
}

.links-row a { transform: translateY(0px);
/* text-shadow: 1px 1px 2px #ffffff; */
transition: transform 0.3s ease-out;

} 

.links-row a:hover { /*color:#7fff50;*/
opacity:1;
transform: translateY(8px);
}

.links-row a{margin-left: 1ch;
margin-right: 1ch;
color:white}


.footer_stripe{
  
  display:flex;
  width:100%;
  flex-direction: row;
  font-size:0.8rem;
  font-family:sans-serif;
color: #fff;
background-color:orange}

.footer_stripe p{margin:0; margin-right:14px; padding:0;
font-family:arial, sans-serif;
color:#2c053b;}
.footer_stripe a {color:#2c053b; margin-left:0; }
.footer_stripe .warning {color:#9c4bbd;
align-items: flex-end;
font-family:arial, sans-serif;}