#mainContainer{
  max-width: 75vw;
}

body{
  display: flex;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(to bottom right, #FFC87A, #FF9EFD);
}

header{
  width: calc(75vw - 10px);
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  padding-top: 3vh;
  overflow: hidden
}

section{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  padding: 5px;
}


/*navigation bar*/

nav{
  background-color: #d188da;
  height: 50px;
  margin-top: 3vh;
}

nav ul{
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
  padding-top: 6px;
  margin-bottom: 0px
}

nav ul li{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #AA74B5;
  padding: 5px;
}

nav ul :hover{
  background-color: #fbccfb;
  border-radius: 15px;
}

/*blinkie bar*/

#marqueeContainer{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 5px;
}

.blinkie{
  flex: 0 0 auto;
  width: 150px;
  height: 20px;
  display: flex;
  padding-left: 5px;
}

#marquee{
  display: flex;
  width: max-content;
  animation: scroll 90s linear infinite;
}


/*main boxes*/

main{
  justify-content: center;
  display: flex;
  height: 600px;
}

#left{
  order: 1;
  width: auto;
  max-width: calc(20% - 10px);
  min-width: calc(20% - 10px);
  min-height: calc(100% - 20px);
  max-height: calc(100% - 20px);
  height: auto;
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  padding: 5px;
  overflow: hidden;
}

#middle{
  order: 2;
  width: auto;
  height: calc(100% - 20px);
  max-height: calc(100% - 20px);
  min-height: calc(100% - 20px);
  max-width: calc(60% - 20px);
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px;
  overflow: hidden;
}

#right{
  order: 3;
  width: auto;
  max-width: calc(20% - 10px);
  min-width: calc(20% - 10px);
  min-height: calc(100% - 20px);
  max-height: calc(100% - 20px);
  height: auto;
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  padding: 5px;
  overflow: hidden;
}


/*left column*/

#howAmI{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  height: 30%;
  max-height: 30%;
  padding: 5px;
  background-color: #DDA3E3;
  overflow: hidden;
}

#imageContainer img{
  border: 2px solid black;
  border-radius: 45px;
  margin-top: 0.8vw;
}

.customLine{
  border: 1px solid #7D5A8A;
  border-radius: 15px;
  height: 2px;
  background-color: #7D5A8A;
  margin-left: 5px;
  margin-right: 5px;
}

#toDoList{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  height: calc(65% - 26px);
  max-height: calc(65% - 26px);
  margin-top: 5px;
  padding: 10px;
  background-color: #DDA3E3;
  overflow: hidden;
}

#toDoList ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

#toDoList ul li{
  line-height: 20px;
}


/*middle*/

#aboutWebsite{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  height: 35%;
  min-height: 35%;
  max-height: 35%;
  background-color: #DDA3E3;
  padding: 5px;
  margin-bottom: 5px;
  overflow: auto;
}
  
#aboutMeArea{
  display: flex;
  justify-content: space-evenly;
  height: calc(65% - 25px);
}

#featuredArt{
  order: 1;
  width: calc(50% - 10px);
  max-width: calc(50% - 10px);
  height: auto;
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  padding: 10px;
  overflow: auto;
}

#aboutMe{
  order: 2;
  width: calc(50% - 10px);
  max-width: calc(50% - 10px);
  height: auto;
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  padding: 10px;
  margin-left: 5px;
  overflow: auto;
}


/*right column*/

#coolThingsIDid{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  height: calc(50% - 6px);
  max-height: calc(50% - 6px);
  padding: 10px;
  background-color: #DDA3E3;
  overflow: hidden;
  margin-bottom: 5px;
}

#coolThingsIDid ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

#coolThingsIDid ul li{
  line-height: 20px;
}

#siteButton{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  height: calc(40%);
  max-height: calc(40%);
  padding: 10px;
  background-color: #DDA3E3;
  overflow: hidden;
}


/*stamp bar*/

#marqueeContainer2{
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
  overflow: hidden;
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
}

.stamp{
  flex: 0 0 auto;
  width: 99px;
  height: 56px;
  display: flex;
  padding-left: 5px;
}

#marquee2{
  display: flex;
  width: max-content;
  animation: scroll 45s linear infinite;
}


/*footer*/

footer{
  width: calc(75vw - 10px);
  border: 5px double #7D5A8A;
  border-radius: 15px;
  background-color: #DDA3E3;
}


/*for tablet*/

@media screen and (width >= 601px) and (width <= 1366px){
  #mainContainer{
    max-width: 90%;
  }
  
  main{
    flex-wrap: wrap;
    height: auto;
  }
  header{
    width: auto;
  }

 
  /*middle box*/

  #middle{
    order: 1;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5px;
    width: auto;
    min-width: calc(100% - 25px);
    height: auto;
    min-height: 0;
    max-height: none;
  }
  #aboutWebsite{
    height: auto;
    min-height: 0;
    max-height: none;
  }
  #aboutMeArea{
    height: auto;
    margin-top: 5px;
  }
  #aboutMe{
    width: calc(50% - 10px);
  }
  #featuredArt{
    width: calc(50% - 10px);
  }


  /*left box*/

  #left{
    order: 2;
    width: calc(50% - 25px);
    min-width: calc(50% - 25px);
    min-height: 318px;
    max-height: 318px;
    overflow: auto;
  }
  #howAmI{
    height: auto;
    max-height: none;
    min-height: 0;
  }
  #toDoList{
    height: auto;
    max-height: none;
    min-height: 0;
  }


  /*right box*/

  #right{
    order: 3;
    width: calc(50% - 25px);
    min-width: calc(50% - 25px);
    min-height: 318px;
    max-height: 318px;
    overflow: auto;
  }

  #coolThingsIDid{
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  #siteButton{
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  /*footer*/

  footer{
    width: auto;
  }
}


/*for mobile*/

@media screen and (width <= 600px){
  main{
    flex-direction: column;
    height: auto;
  }
  header{
    width: calc(100% - 10px);
  }
  
  
  /*middle box*/
  
  #middle{
    order: 1;
    width: calc(100% - 20px);
    min-width: 0;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 5px;
  }
  #aboutMeArea{
    height: auto;
    min-height: 0;
    max-height: none;
  }
  #aboutWebsite{
    height: auto;
    min-height: 0;
    max-height: none;
  }
  #featuredArt{
    height: auto;
    width: calc(100% - 15px);
    min-width: 0;
    max-width: calc(100% - 15px);
    max-height: 20%;
    min-height: 0;
  }
  #aboutMeArea{
    flex-wrap: wrap;
  }
  #aboutMe{
    width: calc(100% - 15px);
    height: auto;
    margin: 0;
    min-width: 0;
    max-width: none;
    min-height: 0;
    max-height: 20%;
  }
  #aboutMe p{
    margin-left: 1vh;
    margin-right: 1vh;
  }


  /*left box*/

  #left{
    order: 2;
    width: calc(100% - 20px);
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    height: auto;
    min-height: 0;
    max-height: none;
    max-width: none;
  }
  #howAmI{
    height: auto;
    min-height: 0;
    max-height: 30%
  }
  #toDoList{
    height: auto;
    min-height: 0;
    max-height: 50%
  }


  /*right box*/

  #right{
    order: 3;
    width: calc(100% - 20px);
    margin: 0;
    padding: 5px;
    height: auto;
    min-height: 0px;
    max-height: none;
    max-width: none;
  }
  
  
  /*main*/
  
  #mainContainer{
    max-width: 100vw;
    overflow: hidden;
  }
  
  
  /*footer*/
  
  footer{
    width: calc(100% - 10px);
  }
  
}


/*animations*/

@keyframes scroll{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/*text styling*/

h1{
  font-size: 2em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

h2{
  font-size: 1.4em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

p{
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}

a{
  color: black;
  font-weight: bold;
}