*{
    box-sizing: border-box;
}

#body{
    background-color: rgb(247, 235, 188);
}


#wrapper{ 
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
    display: table;
    background-color: rgb(247, 192, 218);  
    
}
 .row{
    display: table;
    width: 1280px;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#nameandmenu{
    padding-top:1px;
    padding-bottom: 50px;
}

#menu-bar{
    width: 100%; 
    padding-top: 20px;
    padding-bottom: 20px;
    float: right;
}
.menu-item {
    width: 15%;
    float: right;
    background-color: rgb(131, 67, 141);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-right: 5%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, serif;
}
.menu-item a:link{
    color: antiquewhite;
    font-weight: bold;
    text-decoration: none;
}
.menu-item a:visited{
    color: antiquewhite;
    font-weight: bold;
    text-decoration: none;
}
.menu-item:hover {
    background-color: antiquewhite;
}
.menu-item:hover a {
    color: rgb(131, 67, 141);
}

#Collections{
    position: relative;
    color: rgb(250, 215, 237);
    font-weight: bold;

}

#Collections:hover{
    position: relative;
    color: rgb(131, 67, 141);
    font-weight: bold;
}

#drop-down-menu {
	
	width: 100%;
	background-color:rgb(131, 67, 141);
	position: absolute;
	top: 53px;
    display: none;
	
}

.drop-down-menu-item {
	width: 100%;
	padding-bottom: 20px;
	padding-top: 15px;
	background-color:rgb(131, 67, 141);
	text-align: center;
}

#Collections:hover #drop-down-menu {

    display: block;
}

.drop-down-menu-item a:link{
    color: antiquewhite;
    font-weight: bold;
    text-decoration: none;
}
.drop-down-menu-item a:visited{
    color: antiquewhite;
    font-weight: bold;
    text-decoration: none;
}

.active{
font-weight: bold;
background-color: rgb(192, 202, 222);
color: rgb(131, 67, 141);

}

#name{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, serif;
    text-shadow:
    3px 3px 3px rgb(131, 241, 255);
    width: 30%;
    float: left;
    margin-left: 3%;
    margin-right: 10%;
    text-align: center; 
    font-weight: bold;
    color: rgb(192, 20, 154);
    font-size: 230%;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right:12% ;
}

#aboutme{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, serif;
    width: 70%;
    height: 510px;
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 21px;
    padding-bottom: 27px;
    padding-left:2%;
    padding-right:2%; 
    border-style: double;
    border-color: rgb(132, 231, 231);
    background-color: rgb(244, 147, 183);

}

#p{
    width: 50%;
    height: 350px;
    float: right; 
    display: table;
    margin-right: 2%;
    padding-top: 35px;
    text-align: center; 
    color:  rgb(73, 72, 72);
}

#picofme img{
    width: 40%;
    height: 450px;
    float: left;
    display: table;
    margin-left: 2%;
    border-radius: 3%;
    
}

.boxes{
    width: 1280px;
    height: 350px;
    margin-top: 70px;
}
.box{
    width: 29%;
    height: 300px;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}
.box img{
    display: table;
    width: 100%;
    height: 100%;
}
    
#footer{
    width: 100%;
    height: 120px;
    background-color: rgb(189, 147, 195);
    padding-top: 20px;
    padding-bottom: 20px;
}

#footertext{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, serif;
    margin-left: 5%;
    margin-right: 5%;
    color: rgb(50, 50, 49);
    font-weight: 400;
}


.highlights{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, serif;
    width: 100%;
    height: 108px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 37px;
    padding-bottom: 42px;
    font-size: larger;
    font-size: 150%;
    color: rgb(128, 40, 92);
    
}

img{
    transition: transform .6s;
    width:50px;
    height:50px;
    margin:0 auto;
   
}
img:hover{
    transform:scale(1.5);
}


.disabled {
    pointer-events: none;
  }

#paintbrush{
    float:right;
    width: 100px;
    height: 100px;
    margin-right: 2%;
    padding-bottom: 2%;
}

body {
    background-image: url("./images/gold.avif");
    background-repeat: round;
  }



/* Brainstorming Questions:
1.Consider changing your aesthetic palete so it is more in unison with the images.
2.Also consider if there is a way to reorganize the images so that they are more visible on the page (this may involve some resizing and also size disparities between every image which might compromise the aesthetic).
3.It might be interesting to have an option where the viewer can hover their mouse over the image to enlarge it. */