/* Lato */
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
/* Montserrat */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
/* Roboto */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

:root {
  --dm-dark-gray: #18181b;
  --dm-medium-gray: #3f3f46;
  --dm-light-white: #fafafa;
  --dm-light-gray: #59595e;
  --dm-dark-blue: #001233;

  /* Palette From Coolors */
  --cultured: #f8f9faff;
  --cultured-2: #e9ecefff;
  --gainsboro: #dee2e6ff;
  --light-gray: #ced4daff;
  --cadet-blue-crayola: #adb5bdff;
  --sonic-silver: #6c757dff;
  --davys-grey: #495057ff;
  --onyx: #343a40ff;
  --eerie-black: #212529ff;

  --picton-blue: #22a7f0;
  --curious-blue: #349bd8;
  --jelly-bean: #2574a9;
  --darker-blue: #00719c;
}

.dark {
  background-color: var(--dm-dark-gray);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dm-light-white);
  font-family: "Montserrat";
}

p {
  font-family: "Montserrat";
  color: var(--gainsboro);
  font-size: 20px;
  line-height: 30px;
}

td {
  font-family: "Montserrat";
  color: var(--gainsboro);
  font-size: 20px;
  line-height: 30px;
  width: 33.33%;
}

h2 {
  color: var(--picton-blue);
  font-size: 30px;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.intro {
  position: absolute;
  top: 50%;
  transform: translate(0, -55%);
}

.largeh1 {
  font-size: 3vw;
  font-weight: 700;
  margin-bottom: 0vw;
}

.largeh2 {
  font-size: 2vw;
  font-weight: 700;
  margin-bottom: 0vw;
}

.shift-right {
  margin-left: 15vw;
  margin-right: 15vw;
}

.top-header {
  margin-top: 5vh;
}

.changing-text {
  color: var(--dm-light-white);
}

#pranav_logo_small_dark {
  margin-left: 1vw;
  position: fixed;
  top: 0;
  z-index: 1;
}

.sidenav {
  position: absolute;
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  width: 5vw;
  text-align: center;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: var(--dm-light-gray);
  display: block;
}

.sidenav a:hover {
  color: var(--cultured);
}

.icon-text-group {
  white-space: nowrap;
}

.sidenav-element {
  display: inline;
}

.sidenav-p-1,
.sidenav-p-2,
.sidenav-p-3,
.sidenav-p-4,
.sidenav-p-5,
.sidenav-p-6,
.sidenav-p-7,
.sidenav-p-8,
.sidenav-p-9,
.sidenav-p-10,
.sidenav-p-11,
.sidenav-p-12 {
  display: none;
}

.about-me {
  margin-top: 100vh;
}

.heading-icon {
  margin-right: 15px;
  font-size: 30px;
}

/* More Sidebar */

.icon-text-group1:hover .sidenav-i-1 {
  color: var(--cultured);
}

.icon-text-group1:hover .sidenav-p-1 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group2:hover .sidenav-i-2 {
  color: var(--cultured);
}

.icon-text-group2:hover .sidenav-p-2 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group3:hover .sidenav-i-3 {
  color: var(--cultured);
}

.icon-text-group3:hover .sidenav-p-3 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group4:hover .sidenav-i-4 {
  color: var(--cultured);
}

.icon-text-group4:hover .sidenav-p-4 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group5:hover .sidenav-i-5 {
  color: var(--cultured);
}

.icon-text-group5:hover .sidenav-p-5 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group6:hover .sidenav-i-6 {
  color: var(--cultured);
}

.icon-text-group6:hover .sidenav-p-6 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group7:hover .sidenav-i-7 {
  color: var(--cultured);
}

.icon-text-group7:hover .sidenav-p-7 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group8:hover .sidenav-i-8 {
  color: var(--cultured);
}

.icon-text-group8:hover .sidenav-p-8 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group9:hover .sidenav-i-9 {
  color: var(--cultured);
}

.icon-text-group9:hover .sidenav-p-9 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group10:hover .sidenav-i-10 {
  color: var(--cultured);
}

.icon-text-group10:hover .sidenav-p-10 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group11:hover .sidenav-i-11 {
  color: var(--cultured);
}

.icon-text-group11:hover .sidenav-p-11 {
  display: block;
  display: inline;
  color: var(--cultured);
}

.icon-text-group12:hover .sidenav-i-12 {
  color: var(--cultured);
}

.icon-text-group12:hover .sidenav-p-12 {
  display: block;
  display: inline;
  color: var(--cultured);
}