@import url("https://fonts.googleapis.com/css?family=Pixelify Sans");
@import url("https://fonts.googleapis.com/css?family=Press Start 2P");
@import url("https://fonts.googleapis.com/css?family=Roboto Flex");
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&family=VT323&display=swap');




body {
 background-color: #8A9A5B;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 overflow-x: hidden;
 position: relative;
}


html{
   cursor: url('./media/icons/cursor.png'), default;
}


table{
   border-collapse: collapse;
   width: 100vw;
}


tr{
   border: 2px solid #56463A;
   text-align: center;
}


td{
   border-right: 2px solid #56463A;
   border-left: 2px solid #56463A;
}


br{
   display:block;
   content:"";
   margin-top: 15px;
}


.main-contents{
   display: flex;
   flex-direction: column;
   padding: 15px;
   align-items: center;
   position: relative;
   gap: 15px;

}


.header{
   display: flex;
   flex-direction: row;
   width: 80vw;
   height: 100px;
   position: sticky;
   align-items: center;
   top: 0;
   z-index: 1000;
   background-color: #FFFFFF;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   padding-top: 20px;
   padding-bottom: 20px;
   padding-right: 0px;
   padding-left: 0px;
}


.quick-links{
   display: flex;
   flex-direction: row;
   width: 80vw;
   height: 100px;
   align-items: center;
   padding-top: 20px;
   padding-bottom: 20px;
   padding-right: 0px;
   padding-left: 0px;

}


.logo{
 height: 150px;
 margin-top: 10px;
 padding: 10px;
 top: 0;
}


.headshot{
   height: 700px;
}


.nav{
   text-decoration: none;
   color: #fcfffa; /*white*/
   font-size: 14px;
   background-color: #8A9A5B;
   margin: 0px;
   height: 40px;
   flex-basis: 100%;
   text-align: center;
   font-family: 'Press Start 2P';
   transition: background-color 0.3s ease;
   padding: 10px 15px;
   align-items: center;
}


.nav:hover {
   background-color: #c2d4a7; /* Slightly lighter green for hover */
   cursor: url('./media/icons/star.png'), default;
}


.pdf {
   width: 1000px;
   height: 1200px;
   aspect-ratio: 11 / 8;
   padding: 0;
   display: block;
   margin: 0 auto;
}


.rectangle {
   width: 80vw;
   height: fit-content;
   background-image: linear-gradient(#e07ea7, #e591b3, #eaadc6, #f2cfdb, #f8eaed, #fcfffa);
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   top: 100px;
}

.main-music{
   display: flex;
   flex-direction: row;
   justify-content: center;
}


.vinyl-right{
   width: 400px;
   top: 30vh;
   object-fit: cover;
   position: absolute;
   right: 90vw;
   transition: transform 0.3s ease-in-out;
}


.vinyl-left{
   width: 400px;
   top: 30vh;
   object-fit: cover;
   position: absolute;
   left: 90vw;
   transition: transform 0.3s ease-in-out;
}


.vinyl-left:hover{
   transform: scale(1.2);
}
.vinyl-right:hover{
   transform: scale(1.2);
}


.vinyl-button-left{
   cursor: url('./media/icons/star.png'), default;
   border: none;
   width:400px;
   height: 400px;
   left: 90%;
   top: 30%;
   background: transparent;
   position: absolute;
}


.vinyl-button-right{
   border: none;
   cursor: url('./media/icons/star.png'), default;
   width:400px;
   height: 400px;
   right: 90%;
   top: 30%;
  background: transparent;
   position: absolute;
}


@keyframes spin {
   from {
       transform: rotate(0deg); /* Start at 0 degrees */
   }
   to {
       transform: rotate(360deg); /* End at 360 degrees */
   }
}


.spotify-player{
   display: flex;
   flex-direction: column;
   padding: 10px;
   width: 500px;
   text-align: center;
}




.contents{
   width: 70vw;
   margin-top: 100px;
   padding: 20px;
   align-items: center;
   justify-content: center;
}


.intro{
   width: 800px;
   line-height: 1.5;
}


.main-page{
   display: flex;
   flex-direction: row;
   padding: 10px;
   justify-content: space-around;
   align-items: center;
   height: fit-content;
}


.article-display{
   width: 80vw;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
   padding: 10px;
}


.article-pic{
   width: 50vw;
   max-width: 300px;
}


.article-image{
   height: 40vh;
   max-height: 500px;
   display: block;
   margin: 0 auto;
   padding-bottom: 30px;
}


.article-info{
   display: flex;
   flex-direction: column;
   white-space: wrap;
   align-items: left;
   padding: 10px;
   text-align: left;
   margin-left: 30px;
   margin-right: 30px;
}


.player{
   display: none;
   height: 500px;
   width: 500px;
}


.horizontal-line{
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0em;
  margin-left: 30px;
  margin-right: 30px;
  border-style: inset;
  border-width: 0px;
  height: 5px;
  background-color: #fcfffa;
  width: 80%;
}


.horizontal-line2{
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0em;
  margin-left: 30px;
  margin-right: 30px;
  border-style: inset;
  border-width: 0px;
  height: 5px;
  background-color: #fcfffa;
  width: 80%;
}


.top-fade{
   width: 70vw;
   background-image: linear-gradient(to top, rgba(252, 255, 250,0), rgba(252, 255, 250,1));
   height: 150px;
}
.slogan-container {
   width: 70vw;  /* Full width of the screen */
   overflow: hidden;  /* Hide anything that goes outside the container */
   white-space: nowrap;  /* Prevent the text from wrapping to the next line */
   position: relative;
   padding:0px;
   margin: 0px;
}




.slogan{
   font-family: 'VT323', monospace;
   font-style: italics;
   font-size: 3.5em;
   text-align: center;
   padding: 0px;
   margin: 0px;
   white-space: nowrap;
   color: #f8eaed;
   display: inline-block;  /* Make it inline so it can move */
   animation: moveText 20s linear infinite
}




h1 {
 color: #fcfffa;
 font-size: 5.5em;
 text-align: left;
 padding-top: 40px;
 margin-left: 50px;
 text-shadow:
         -4px -4px 0 #8A9A5B,
         4px -4px 0 #8A9A5B,
         -4px 4px 0 #8A9A5B,
         4px 4px 0 #8A9A5B,
         2px 2px 4px black;
 font-family: 'Pixelify Sans';
}


.article-title,
h2 {
 font-size: 2em;
 text-align: left;
 font-family: 'Press Start 2P';
 color: #fcfffa;
 margin-left: 30px;
 margin-right: 30px;
 text-decoration: none;
 line-height: 1.6;
}


.article-title:hover{
   cursor: url('./media/icons/star.png'), default;
}


h3 {
 font-family: 'Pixelify Sans';
 font-size: 2.5em;
 text-align: left;
 color: #8A9A5B;
 text-shadow:
           -2px -2px 0 #fcfffa,
           2px -2px 0 #fcfffa,
           -2px 2px 0 #fcfffa,
           2px 2px 0 #fcfffa;
 margin-left: 30px;
 margin-right: 30px;
}


h4{
 color: #56463A;
 margin-left: 30px;
 margin-right: 30px;
 font-size: 50px;
 font-family: 'Roboto Flex';
 font-weight: 700;
 line-height: 50px;


}


p,
.text,
ul,
li,
label {
 color: #56463A;
 margin-left: 30px;
 margin-right: 30px;
 font-size: 30px;
 font-family: 'Roboto Flex';
 line-height: 50px;
 white-space: wrap;
}
br{
   margin: 30px;
}
.text{
   padding-bottom: 30px;
   margin-left: 40px;
   margin-right: 40px;
}


.spotify-launcher{
   background-color: #8A9A5B;
   color: #fcfffa;
   font-family: 'Press Start 2P', cursive;
   font-size: 18px;
   padding: 15px 30px;
   border: none;
   border-radius: 12px;
   cursor: url('./media/icons/star.png'), default;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
}


.spotify-launcher:hover{
   background-color: #c2d4a7;
   color: #fcfffa;
   transform: scale(1.1);
}
.spotify-launcher:active {
   transform: scale(1);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.grid-container {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 padding: 10px;
 align-items: center;
 align-text: left;
 gap: 16px;
}
.grid-item {
 display:flex;
 flex-direction: column;
 font-size: 30px;
 text-align: left;
}


.proj-img{
   width: 500px;
}


.proj-demo{
   width: 85vw;
   display: block;
   margin: 0 auto;
   padding-top: 20px;
}


.proj-title{
 text-align: left;
 font-family: 'Press Start 2P';
 color: #fcfffa;
 margin-left: 30px;
 margin-right: 30px;
 text-decoration: none;
 line-height: 1.6;
 font-size: 1 em;
}


.proj-title:hover{
   cursor: url('./media/icons/star.png'), default;
}


.proj-details{
   display: block;
   margin: 30px 30px 30px;
   background-color: #8A9A5B;
}


.contact-but{
   text-decoration: none;
   background-color: #e07ea7;
   color: #fcfffa;
   font-family: 'Press Start 2P', cursive;
   font-size: 18px;
   padding: 15px 30px;
   border: none;
   border-radius: 12px;
   cursor: url('./media/icons/star.png'), default;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
   position: fixed;
   bottom: 0;
   right: 0;
}


.contact-but:hover{
   background-color: #eaadc6;
   color: #fcfffa;
   transform: scale(1.1);
}
.contact-but:active {
   transform: scale(1);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.contact-info{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
   padding: 10px;
}


.contact-img{
   width: 700px;
}