/* SETTING VARIABLES */
:root {
  /* COLORS */
  --black: #021526;
  --gray: #424242;
  --white: #F5F5F5;
  --navy: #03346E;
  --sky: #6EACDA;
  --shadow: rgba(0, 0, 0, 0.15);

  /* FONTS */
  --fredoka: "Fredoka", sans-serif;
  --pixel: "Pixelify Sans", sans-serif;

  /* SIZING */
  --sm: 8px;
  --md: 16px;
  --lg: 20px;
  --xl: 30px;
  --xxl: 40px;
}

/* SETUP */
* {
   margin: 0px;
   padding: 0px;
   scroll-behavior: smooth;
   background-color: var(--white);
   border-radius: var(--sm);
}

/* NAV BAR */
ul {
   font-family: var(--pixel);
   font-size: var(--xl);
   list-style-type: none;
   overflow: hidden;
   text-align: left;
   background-color: var(--black);
   position: fixed;
   top: 0;
   width: 100%;
   padding: var(--lg);
   padding-left: var(--xl);
   z-index: 5;
   border-radius: 0;
}
li {
   display: inline;
   background-color: var(--black);
}
li a {
   text-decoration: none;
   color: var(--white);
   padding-left: var(--md);
   padding-right: var(--md);
   background-color: var(--black);
}
li a:hover {
   color: var(--sky);
}
#underlined {
   text-decoration: underline;
}

/* INTRO */
#introduction {
   margin-top: calc(var(--xl) + 76px);
   color: var(--black);
   width: 30%;
   margin-left: var(--xl);
   position: absolute;
   left: 16px;
   top: 15%;
   z-index: 4;
   background-color: var(--white);
   padding: var(--md);
   padding-bottom: var(--xl);
   border-radius: var(--sm);
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#banner {
   width: 100%;
   position: relative;
   z-index: 3;
   border-radius: 0;
}
.container {
   position: relative;
}
#learn {
   text-decoration: none;
   background-color: var(--navy);
   padding: var(--md);
   font-family: var(--fredoka);
   font-size: var(--lg);
   color: var(--white);
   font-weight: 600;
   box-shadow: inset 0 0 0 0 var(--sky);
   transition: ease-out 0.3s;
   border-radius: var(--sm);
}
#learn:hover {
   cursor: pointer;
   box-shadow: inset 136px 0 0 0 var(--sky);
   color: var(--navy);
}

/* GENERAL */
h1 {
   font-family: var(--pixel);
   font-size: var(--xxl);
   color: var(--navy);
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
p {
   font-family: var(--fredoka);
   font-size: var(--lg);
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
   margin-top: var(--sm);
   margin-bottom: var(--xl);
}

#info {
   display: flex;
   margin-left: var(--sm);
   margin-right: var(--sm);
}

/* SECTION ONE */
#question {
   width: 30%;
   float: left;
   margin-top: var(--xl);
}
#info2 {
   overflow: hidden;
   margin: var(--md);
   width: 50%;
   padding: var(--sm);
   transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.2s ease;
   border-radius: var(--sm);
}
#info2:hover {
   cursor: pointer;
   transform: translateY(-5px) scale(1.03);
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#infoHeading {
   margin-top: var(--lg);
}

/* SECTION TWO */
#exclamation {
   width: 30%;
   float: left;
   margin-top: var(--xl);
}
#info3 {
   overflow: hidden;
   margin: var(--md);
   width: 50%;
   padding: var(--sm);
   transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.2s ease;
   border-radius: var(--sm);
}
#info3:hover {
   cursor: pointer;
   transform: translateY(-5px) scale(1.03);
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#infoHeading {
   margin-top: var(--lg);
}

/* FACT GENERATOR */
#facts {
   background-color: var(--sky);
   width: 50%;
   margin: 0 auto;
   margin-bottom: var(--md);
   margin-top: var(--md);
   padding: var(--md);
   text-align: center;
   transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.2s ease;
}
#facts:hover {
   cursor: pointer;
   transform: translateY(-5px) scale(1.03);
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#factsHeading {
   text-align: center;
   background-color: var(--sky);
}
#factButton {
   background-color: var(--navy);
   padding: var(--md);
   font-family: var(--fredoka);
   font-size: var(--lg);
   color: var(--white);
   font-weight: 600;
   border: none;
   margin-top: var(--md);
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#factButton:hover {
   background-color: var(--white);
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
   color: var(--navy);
}
#factButton:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#factText {
   background-color: var(--sky);
   margin: 0;
   margin-top: var(--md);
   margin-bottom: var(--sm);
}

/* RESOURCES */
#heading {
   text-align: center;
   margin-top: calc(var(--xl) + 76px);
   font-size: 60px;
}
#resources {
   display: flex;
   margin-top: var(--xl);
   text-align: center;
   background-color: var(--sky);
   border-radius: 0;
}
#res1 {
   overflow: hidden;
   margin: var(--xl);
   width: 33%;
   padding: var(--md);
   padding-bottom: var(--xxl);
   transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.2s ease;
   border-radius: var(--sm);
}
#res1:hover {
   cursor: pointer;
   transform: translateY(-5px) scale(1.03);
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#res2 {
   overflow: hidden;
   margin: var(--xl);
   width: 33%;
   padding: var(--md);
   padding-bottom: var(--xxl);
   transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.2s ease;
   border-radius: var(--sm);
}
#res2:hover {
   cursor: pointer;
   transform: translateY(-5px) scale(1.03);
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#res3 {
   overflow: hidden;
   margin: var(--xl);
   width: 33%;
   padding: var(--md);
   padding-bottom: var(--xxl);
   transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.2s ease;
   border-radius: var(--sm);
}
#res3:hover {
   cursor: pointer;
   transform: translateY(-5px) scale(1.03);
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#logo {
   width: 75%;
   margin: auto;
   margin-top: var(--md);
}
hr {
   height: var(--sm);
   background-color: var(--navy);
   border: none;
   width: 98%;
   margin: 0 auto;
}
#link {
   text-decoration: none;
   background-color: var(--navy);
   padding: var(--md);
   font-family: var(--fredoka);
   font-size: var(--lg);
   color: var(--white);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border-radius: var(--sm);
}
#link:hover {
   background-color: var(--sky);
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
   color: var(--navy);
}
#link:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ABOUT */
#profile {
   margin-left: 400px;
   margin-right: 400px;
}
#profileHeading {
   text-align: center;
   margin-top: calc(var(--xl) + 76px);
   font-size: 60px;
}
#pfp {
   border-radius: 100%;
   display: block;
   margin: 0 auto;
   width: 20%;
   margin-top: var(--md);
   margin-bottom: var(--md);
}
#profileDesc {
   text-align: center;
}