/* --- main css --- */
* {
   box-sizing: border-box;
   scroll-behavior: smooth;
}

main {
   margin: 0px 65px 0px 65px;
}

body {
   border: 2px solid black;
   margin: 0px;
   color: black;
   background-color: #e6e6e6;
   font-size: 110%;
   font-family: 'Noto Sans', sans-serif;
}

a:link, a:visited {
   text-decoration: none;
   color: blue;
}

a:hover, a:active {
   text-decoration: underline;
   color: red;
}

/* --- nav --- */
.nav {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: #262626;
   overflow-x: hidden;
   transition: 0.5s;
   padding-top: 60px;
   opacity: 0.95;
}

.nav a {
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 25px;
   color: white;
   display: block;
   transition: 0.3s;
}

.nav a:hover {
   background-color: #808080;
}

.nav .closebtn {
   position: absolute;
   top: 0;
   right: 25px;
   font-size: 30px;
}

.nav ul {
   list-style-type: none;
}

.navbtn {
   font-size: 30px;
   cursor: pointer;
   margin-left: 0.5%;
   color: white;
}

.nav-span {
   background-color: #262626;
   padding: 10px;
   position: fixed;
   left: 0;
   top: 0;
   width: 50px;
   height: 100%;
}

/* --- header --- */
.head {
   border: 8px groove grey;
   text-align: center;
   background-image: url("images/wallpaper.jpg");
   color: black;
   font-size: 110%;
   font-family: 'Playfair Display', serif;
}

/* --- content --- */
.content-container {
   text-align: center;
}

.content {
   border: 5px double black;
   border-radius: 10px;
   text-align: center;
   margin: 0px 5% 0px 5%;
   padding: 10px;
   background-color: #cccccc;
   color: black;
}

#projects .content {
   text-align: center;
}

/* --- project grid --- */

.grid-item {
   background-color: white;
   border: 1px solid black;
   border-radius: 5px;
   padding: 5px;
   text-align: justify;
   margin: 1%;
}

.grid-item-solo {
   background-color: white;
   border: 1px solid black;
   border-radius: 5px;
   padding: 5px;
   text-align: justify;
   margin: 0px 15% 0px 15%;
}

/* --- project slides --- */
.slide-container {
   max-width: 100%;
   position: relative;
   margin: auto;
}

.slide-container img {
   vertical-align: middle;
   width: 100%;
}

.slide0, .slide1, .slide2, .slide3 {
   display: none;
}

.prev, .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   margin-top: -22px;
   color: white;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
}

.next {
   right: 0;
   border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
   background-color: #f1f1f1;
   color: black;
   text-decoration: none;
}

/* --- socials --- */
.social-grid-container {
   display: grid;
   grid-column-gap: 40px;
   grid-template-columns: auto auto;/* --- adjust for more cols. --- */
   padding: 5px 42% 5px 42%;
   background-color: #cccccc;
   margin: 10px 5% 10px 5%;
   border: 5px double black;
   border-radius: 10px;
}

.social-grid-item {
   background-color: white;
   border: 1px solid grey;
   border-radius: 4px;
   text-align: center;
   padding: 5px;
}

/* --- form --- */
#form-container {
   text-align: center;
   padding: 0px 15% 0px 15%;
}

input[type=text], input[type=email], textarea {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
}

input[type=submit] {
   width: 100%;
   background-color: #3385ff;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

input[type=submit]:hover {
   background-color: #1a1aff;/*------------------------------*/
}

form {
   border: 1px solid black;
   border-radius: 5px;
   background-color: #d9d9d9;
   padding: 20px;
   color: black;
}

/* --- footer --- */
footer {
   border: 5px groove grey;
   font-size: 85%;
   text-align: center;
   background-color: #cccccc;
   color: black;
}

.foot-content {
   margin: 0px 65px 0px 65px;
   padding: 8px;
}

/* --- light/dark mode --- */
.light-dark {
   background-color: #4d4d4d;
   padding: 5px;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 50px;
}

/* --- return to top --- */
#topBtn {
   display: none;
   position: fixed;
   height: 35pt;
   width: 35pt;
   bottom: 20px;
   right: 30px;
   z-index: 99;
   font-size: 18px;
   border: 2px groove #8c8c8c;
   outline: none;
   background-color: #b3b3b3;
   cursor: pointer;
   padding: 15px;
   border-radius: 6px;
}

/* --- screen adjustments --- */
@media only screen and (max-height: 450px) {
   .nav {padding-top: 15px;}
   .nav a {font-size: 18px;}
}

@media only screen and (max-width: 500px) {
   main {margin: 0px 20px 0px 60px;}
   .grid-container {grid-template-columns: auto;}
   #form-container {padding: 0px 5% 0px 5%;}
   .slide-container img {
      width: 100%;
      height: 100%;
   }
   .grid-container-solo .grid-item {margin: 0px;}
   .grid-container-solo .slide-container {width: 100%;}
   .social-grid-container {padding: 5px 35% 5px 35%;}/* --- adjust for more cols. --- */
}